题目1: 下面的代码输出多少?修改代码让 fnArri 输出 i。使用 两种以上的方法
var fnArr = [];
for (var i = 0; i < 10; i ++) {
fnArr[i] = function(){
return i;
};
}
console.log( fnArr[3]() ); //
问题:因为循环完之后,i变成了10,函数没有声明i,只能从外部访问了,此时只能取到全局变量i为10
解决办法:创造一个局部作用域,这是闭包大展身手的时候
方法1:
//自执行函数
var fnArr = [];
for (var i = 0; i < 10; i ++) {
fnArr[i] = function(i){
return function(){
return i;
}
}(i)
}
console.log( fnArr[3]() ); //3
方法2:
//自执行函数
var fnArr = [];
for (var i = 0; i < 10; i ++) {
fnArr[i] = (function(){
var temp = i
return function(){
return temp
}
})()
}
console.log( fnArr[3]() ); //3
方法3:
var fnArr = [];
for (var i = 0; i < 10; i ++) {
!function(i){
fnArr[i] = function(){
return i;
}
}(i)
}
console.log( fnArr[3]() ); //3
方法4:
var fnArr = [];
for (let i = 0; i < 10; i ++) {
fnArr[i] = function(){
return i;
};
}
console.log( fnArr[3]() ); //3
题目2: 封装一个汽车对象,可以通过如下方式获取汽车状态
var Car = (function(){
var speed = 0;
function setSpeed(s){
speed = s
}
function getSpeed(){
return speed
}
function accelerate(){
speed += 10
}
function decelerate(){
speed -= 10
}
function getStatus(){
if(speed > 0){
return 'running'
}else{
return 'stop'
}
}
return {
setSpeed: setSpeed,
getSpeed:getSpeed,
accelerate:accelerate,
decelerate:decelerate,
getStatus:getStatus
}
})()
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);
}, 0);
var a ;
console.log(a);
a = 3;
console.log(a);
//1
//3
//2
-因为setTimeout会在当前代码执行队列结束后执行(即异步延迟到同步代码执行结束后才允许执行)
题目4:下面这段代码输出结果是? 为什么?
var flag = true;
setTimeout(function(){
flag = false;
},0)
while(flag){}
console.log(flag);
- 没有任何输出
- 因为setTimeout会在当前代码执行队列结束后执行,while循环结束后才会执行setTimeout中的方法,故while循环的条件永远是true,会无限循环下去
题目5:下面这段代码输出?如何输出delayer: 0, delayer:1...(使用闭包来实现)
for(var i=0;i<5;i++){
setTimeout(function(){
console.log('delayer:' + i );
}, 0);
console.log(i);
}
闭包:
for(var i=0;i<5;i++){
!function(){
var n = i;
setTimeout(function(){
console.log('delayer:' + n );
}, 0)
console.log(i);
}();
}
题目6: 如何获取元素的真实宽高
function getCss(curEle,attr){
return window.getComputedStyle ? window.getComputedStyle(curEle,null)[attr] : curEle.currentStyle[attr];
}
getCss(ele,'width')//宽度
getCss(ele,'height')//高度
题目7: URL 如何编码解码?为什么要编码?
URL 只能使用 ASCII 字符集来通过因特网进行发送。也就是说URL只能使用英文字母、阿拉伯数字和某些标点符号,不能使用其他文字和符号 ;这意味着 如果URL中有汉字,就必须编码后使用。
但是麻烦的是 标准的国际组织并没有规定具体的编码方法,而是交给应用程序(浏览器)自己决定。这导致"URL编码"成为了一个混乱的领域。
解决办法:
- 使用decodeURI()/decodeURIComponent()进行解码
- 使用encodeURI()/encodeURIComponent()进行编码
注意:encodeURIComponent()函数与encodeURI()的区别是,它用于对URL的组成部分进行个别编码,而不用于对整个URL进行编码;decodeURI()/decodeURIComponent()两者同理。
题目8: 补全如下函数,判断用户的浏览器类型
function isAndroid(){
return /android/i.test(navigator.userAgent);
}
function isIphone(){
return /iphone/i.test(navigator.userAgent);
}
function isIpad(){
return /ipad/i.test(navigator.userAgent);
}
function isIOS(){
return /iphone|ipad/i.test(navigator.userAgent);
}
网友评论