闭包、定时器和 BOM

1. 下面的代码输出多少？修改代码让 fnArr[i] () 输出 i。使用 两种以上的方法

var fnArr = [];
for (var i = 0; i < 10; i ++) {
    fnArr[i] =  function(){
        return i;
    };
}
console.log( fnArr[3]() );  //10

//方法一
var fnArr = [];
for (var i = 0; i < 10; i ++) {
  !function(i) {fnArr[i] =  function(){
    return i;
  }
}(i)}
console.log( fnArr[3]() );  //3

//方法二
var fnArr = [];
for (var i = 0; i < 10; i ++) {
  fnArr[i] =  (function(i){
    return function() {
      return i;
    }
  })(i);
}
console.log( fnArr[3]() );  //3

//方法三
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 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';

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
//虽然设置的时间为0秒，但是它必须等待本次执行的代码执行完毕后才会执行

4. 下面这段代码输出结果是? 为什么?

var flag = true;
setTimeout(function(){
    flag = false;
},0)
while(flag){}
console.log(flag);
//flag 值一直为 true，无限循环 while(flag){}，不会执行 console.log(flag);

5. 下面这段代码输出？如何输出delayer: 0, delayer:1...（使用闭包来实现）

for(var i=0;i<5;i++){
    setTimeout(function(){
         console.log('delayer:' + i );
    }, 0);
}

//方法一
for (var i = 0; i < 5; i++) {
    setTimeout((function (i) {
        return function () {
            console.log('delayer:' + i);
        }
    })(i), 0);
}
//delayer:0
//delayer:1
//delayer:2
//delayer:3
//delayer:4

//方法二
for (var i = 0; i < 5; i++) {
    (function (i) {
        setTimeout(function () {
            console.log('delayer:' + i);
        }, 0);
    })(i)
}
//delayer:0
//delayer:1
//delayer:2
//delayer:3
//delayer:4

6. 如何获取元素的真实宽高

function getAttr(ele,pseudoElt,attr) {
    if(ele.currentStyle) {
        return ele.currentStyle[attr];
    } else if(window.getComputedStyle) {
        return window.getComputedStyle(ele, pseudoElt)[attr];
    }
}

7. URL 如何编码解码？为什么要编码？

• 编码

  • encodeURI()：不会对ASCII字母、数字、~!@#$&*()=:/,;?+'进行编码，
    着重于整个URL进行 编码。
  • encodeURIComponent() 不会对ASCII字母、数字、~!*()'进行编码，用于对URL的组成部分进行个别编码，不用于对整个URL进行编码。

• 解码

  • decodeURI：可对 encodeURI() 函数编码过的 URI 进行解码。
  • decodeURIComponent：可对 encodeURIComponent() 函数编码的 URI 进行解码。

• 为什么：因为不同的操作系统，不同的浏览器，不同的网页字符集，将会导致完全不同的编码结果。因此使用 javacript 先对URL编码，然后再向服务器提交，不给浏览器插手的机会。因为 JavaScript 的输出总是一致的，所以保证了服务器得到的数据格式总是一致的。

8. 补全如下函数，判断用户的浏览器类型

function isAndroid(){
    return /Android/i.test(navigator.userAgent);
}
funcnction isIphone(){
    return /iPhone/i.test(navigator.userAgent);
}
function isIpad(){
    return /iPad/i.test(navigator.userAgent);
}
function isIOS(){
    return /(iPad|iPhone|iPod)/i.test(navigator.userAgent);
}