1、下面的代码输出多少？修改代码让 fnArr[i] () 输出 i。使用 两种以上的方法
var fnArr = [];
for (var i = 0; i < 10; i ++) {
fnArr[i] = function(){
return i;
};
}
console.log( fnArr[3]() ); //10
//修改后：
//1、立即执行函数：
var fnArr=[];
for(var i=0;i<10;i++){
fnArr[i]=function(i){
return function(){
return i;
};
}(i);
}
console.log(fnArr[3]());
//2、创建一个局部变量，把i的值传给局部变量：
var fnArr=[];
for(var i=0;i<10;i++){
let j=i; //注意let是声明一个块级作用域的本地变量，块外部的不会被访问到
fnArr[i]=function(){
return j;
}
}
console.log(fnArr[3]());
2： 封装一个汽车对象，可以通过如下方式获取汽车状态
var Car = (function(){
var speed = 0;
function setSpeed(s){
speed = s
}
function getSpeed(){
return speed;
}
function accelerate(){
speed+=10;
}
function decelerate(){
if(speed>=10){
speed-=10;
}
else speed=0;
}
function getStatus(){
if(speed>0) return "running";
else return "stop";
}
return {
setSpeed: setSpeed,
getSpeed: getSpeed,
accelerate: accelerate,
decelerate: decelerate,
getStatus: getStatus,
speed:"error"
}
})()
Car.setSpeed(30);
Car.getSpeed(); //30
Car.accelerate();
Car.getSpeed(); //40;
Car.decelerate();
Car.decelerate();
Car.getSpeed(); //20
Car.getStatus(); // 'running';
Car.decelerate();
Car.decelerate();
Car.getStatus(); //'stop';
Car.speed; //error
3：下面这段代码输出结果是? 为什么?
var a = 1;
setTimeout(function(){
a = 2;
console.log(a); //2
}, 0);
var a ;
console.log(a); //1
a = 3;
console.log(a); //3
//声明提前后的代码为：
var a;
var a ;
function b(){
a = 2;
console.log(a);
};
a=1;
console.log(a);
a=3;
console.log(a);
setTimeout(b(),0); //setTimeout为异步，放到最后执行
4：下面这段代码输出结果是? 为什么?
var flag = true;
setTimeout(function(){ //异步，setTimeout要放到最后执行
flag = false;
},0)
while(flag){} //flag为true,因为setTimeout还未执行，进入了无限循环
console.log(flag); //未输出，上个代码进入了无限循环
5： 下面这段代码输出？如何输出delayer: 0, delayer:1...（使用闭包来实现）
for(var i=0;i<5;i++){
setTimeout(function(){
console.log('delayer:' + i );
}, 0);
console.log(i);
}
//改写1：
for(var i=0;i<5;i++){
let j=i;
setTimeout(function(){
console.log("delayer:"+j);
},0);
console.log(i);
}
//改写2：
for(var i=0;i<5;i++){
setTimeout(function(i){
return function(){console.log("delayer:"+i);}
}(i),0);
}
console.log(i);
6： 如何获取元素的真实宽高
function get(element){
var obj={};
obj["width"]=element.offsetWidth;
obj["height"]=element.offsetHeight;
return obj;
}
7： URL 如何编码解码？为什么要编码？
JavaScript提供四个URL的编码/解码方法。
-
解码
decodeURI()
decodeURIComponent() -
编码
encodeURI()
encodeURIComponent() - 区别
| encodeURI方法不会对下列字符编码 | encodeURIComponent方法不会对下列字符编码 |
|---|---|
| ASCII字母 | ASCII字母 |
| 数字 | 数字 |
| ~!@#$&()=:/,;?+' | ~!()' |
所以encodeURIComponent比encodeURI编码的范围更大。
encodeURI被用作对一个完整的URI进行编码，而encodeURIComponent被用作对URI的一个组件进行编码。
对于Url来说，之所以要进行编码，是因为Url中有些字符会引起歧义。
例如，Url参数字符串中使用key=value键值对这样的形式来传参，键值对之间以&符号分隔，如/s?q=abc&ie=utf-8。如果你的value字符串中包含了=或者&，那么势必会造成接收Url的服务器解析错误，因此必须将引起歧义的&和=符号进行转义，也就是对其进行编码。
Url的编码格式采用的是ASCII码，而不是Unicode，这也就是说你不能在Url中包含任何非ASCII字符，例如中文。否则如果客户端浏览器和服务端浏览器支持的字符集不同的情况下，中文可能会造成问题。
8： 补全如下函数，判断用户的浏览器类型
function isAndroid(){
var reg=/Android/gi;
return reg.test(window.navigator.userAgent)
}
funcnction isIphone(){
var reg=/Iphone/gi;
return reg.test(window.navigator.userAgent)
}
function isIpad(){
var reg=/Ipad/gi;
return reg.test(window.navigator.userAgent)
}
function isIOS(){
var reg=/Iphone|Ipad/gi;
return reg.test(window.navigator.userAgent)
}
什么是BOM？
BOM：浏览器对象模型(browser object model)的简称，bom API没有规定的文档，全部都是约定俗成的，这些API全是挂在window上的。
BOM常用API
- window.history
window.history.back() //页面后退，相当于浏览器上页面后退键
window.history.forward() //页面前进，相当于浏览器上页面前进键
window.history.go(-1) //相当于window.history.back()
window.history.go(1) //相当于window.history.forward()
- window.innerHeight
window.innerHeight //页面高度，浏览器高度除去标签和地址书签高度
- window.loaction
window.location.href="http://www.baidu.com" //在当前页面打开百度，等价于window.location="http://www.baidu.com"
//注意一定要打上http://
window.location.href="www.baidu.com" //表示在当前页面的地址后面加上www.baidu.com
<a href="www.baidu.com"></a> //表示在当前路径下打开www.baidu.com路径
<a href="/www.baidu.com"></a> //表示在当前域名下打开www.baidu.com的路径
<a href="//www.baidu.com"></a> //表示继承当前协议，相当于http://www.baidu.com
-
获取地址栏里的所有东西
网址为：http://www.baidu.com:8080/zh/company/window?a=12&b=45#xxxxx
| 代码 | 含义 |
|---|---|
| location.protocol | 获取当前页面的协议(http:) |
| location.hostname | 获取当前页面的域名(www.baidu.com) |
| location.port | 获取当前页面的端口(8080) |
| location.host | 获取当前页面的域名+端口(www.baidu.com:8080) |
| location.pathname | 获取当前页面的路径，不包含？后面(/zh/company/window) |
| location.search | 获取？后面的查询字符串(?a=12&b=45) |
| location.hash | 获取#后面的锚点(#xxxxx) |
| document.location.assign('http://www.google.com') | 跳转到另一个网址 |
| location.reload(true) | 优先从服务器重新加载 |
| location.reload(false) | 优先从本地缓存重新加载（默认值） |
| location.toString() | 将location对象转为字符串，等价于document.location.href |
- window.name
<a href="http://www.baidu.com" target="Ethan">百度</a>
<a href="http://www.qq.com" target="Ethan">腾讯</a>
//当点击第一个链接时，在新标签打开百度首页，在百度页面控制台上输入window.name,显示为Ethan,当点击第二个链接时，腾讯在百度的标签里打开腾讯主页，若将百度页面window.name="XX",则点击第二个链接时在新标签打开腾讯主页
6.window.navigator.userAgent
window.navigator.userAgent
//"Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3071.115 Safari/537.36"
//不同的浏览器所得到的window.navigator.userAgent的值是不一样的，可以通过此属性判定各个浏览器
- window.parent
window.parent //等于父页面的window,比如页面下用iframe嵌入了一个子页面，可以在子页面通过window.parent对父页面进行操作
- window.screen
window.screen.availHeight //获取页面能达到的最高的高度
window.screen.availWidth //获取页面能达到的最宽的宽度
window.screen.height //屏幕的高度
window.screen.width //屏幕的宽度
window.screen.colorDepth //颜色深度
- window.self
window.self //等于window本身，所以不要设置self的全局变量
- window.open
var f="width=500px,height=500px"
window.open("http://www.baidu.com","_blank",f); //"_self"表示在当前页面打开百度，_blank表示在新标签打开百度，"width=500px,height=500px"设置了打开新页面的大小，设置了这个值百度会在当前页面弹出一个新窗口，窗口长宽为500px
(mission 11)
网友评论