闭包&定时器&BOM相关知识

下面的代码输出多少？修改代码让 fnArri 输出 i。使用 两种以上的方法

var fnArr = [];
    for (var i = 0; i < 10; i ++) {
        fnArr[i] =  function(){
            return i;
        };
    }
    console.log( fnArr[3]() );  //10；函数循环后i的值为10，函数没有声明i，此时得到全局变量i为10

方法一：

//return函数
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 (var i = 0; i < 10; i ++) {
  (function(i){
    fnArr[i] = function(){
      return i
    }
  })(i)
}
console.log( fnArr[3]()); //3

封装一个汽车对象，可以通过如下方式获取汽车状态

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,
    speed:"error"
  }
})()
Car.setSpeed(30);
console.log(Car.getSpeed()); //30
Car.accelerate();
console.log(Car.getSpeed()); //40;
Car.decelerate();
Car.decelerate();
console.log(Car.getSpeed()); //20
console.log(Car.getStatus()); // 'running';
Car.decelerate();
Car.decelerate();
console.log(Car.getStatus()); //'stop';
console.log(Car.speed); //error

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

var a = 1;
setTimeout(function(){
    a = 2;
    console.log(a); //2
}, 0);
var a ;
console.log(a); //1
a = 3;
console.log(a); //3

代码输出顺序为：1 3 2

声明提前后的代码：

var a;
function b(){
    a = 2;
    console.log(a);
};
var a;
a=1;
console.log(a);
a=3;
console.log(a);
setTimeout(b(),0); //setTimeout会将当前函数放在最后执行。

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

var flag = true;
setTimeout(function(){
    flag = false;
},0)
while(flag){}
console.log(flag);

• 没有输出结果；因为setTimeOut是异步，要放到最后执行，while循环的条件一直是true，并且会无限循环

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

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

• 代码首先打印最外层的console.log(i)输出：0，1，2，3，4
• 然后执行setTimeout内部的console.log('delayer:' + i)
  输出：delayer:5，delayer:5，delayer:5，delayer:5，delayer:5

使用闭包来实现：

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

如何获取元素的真实宽高

function $(selector) {
  return document.querySelector(selector);
}
console.log($('div').offsetWidth)
console.log($('div').offsetHeight)

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

JavaScript提供四个URL的编码/解码方法。

• 编码
  encodeURI()
  encodeURIComponent()
• 解码
  decodeURI()
  decodeURIComponent()

区别：encodeURIComponent()与encodeURI()的区别是，它用于对URL的组成部分进行个别编码，而不用于对整个URL进行编码。decodeURI()和decodeURIComponent()区别与上同理。

为什么要编码？

RFC3986文档规定，Url中只允许包含英文字母（a-zA-Z）、数字（0-9）、-_.~4个特殊字符以及所有保留字符。RFC3986文档对Url的编解码问题做出了详细的建议，指出了哪些字符需要被编码才不会引起Url语义的转变，以及对为什么这些字符需要编码做出了相应的解释。
HTTP协议中通过URL传参是通过键值对形式进行的，格式上是以？、&、=为特征标识进行解析，如果键或者值的内容中包含这些符号，就会造成解析错误，所以要进行编码，用不会造成歧义的符号代替有歧义的符号。

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

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);
}

window.onload 和 document.onDOMContentLoaded 有什么区别？

window.onload是一个事件，当文档加载完成之后才会触发该事件，可以为此事件注册事件处理函数，并将要执行的脚本代码放在事件处理函数中，于是就可以避免获取不到对象的情况。

document.onDOMContentLoaded DOM结构渲染完成后开始执行。

cookie & session &localStorage 分别是什么

• cookie
  cookie 是浏览器访问服务器后，服务器传给浏览器的一段数据。
  浏览器需要保存这段数据，不得轻易删除。
  此后每次浏览器访问该服务器，都必须带上这段数据。

• session
  用户在输入用户名密码提交给服务端，服务端验证通过后会创建一个session用于记录用户的相关信息，这个 session 可保存在服务器内存中，也可保存在数据库中。session 在实现的过程中需要使用cookie。

• localStorage
  localStorage HTML5本地存储web storage特性的API之一，用于将大量数据（最大5M）保存在浏览器中，保存后数据永远存在不会失效过期，除非用 js手动清除。一般用于性能优化，可以保存图片、js、css、html 模板、大量数据。

使用 localStorage封装一个 Storage 对象，达到如下效果

如下：

var Storage = (function(){
  return {
    set: function(key, value, expireSeconds){
      localStorage[key] = JSON.stringify({
        value: value, 
        expired: expireSeconds === undefined?undefined:Date.now() + 1000*expireSeconds
      })
    },
    get: function(key){
      if(localStorage[key] === undefined){
        return
      }
      var obj = JSON.parse(localStorage[key])
      if(obj.expired === undefined || Date.now() < obj.expired){
        return obj.value
      }else{
        delete localStorage[key]
      }
    }
 }
})()

Storage.set('name', '饥人谷') 
Storage.set('age', 2, 30) ;  //设置 name 字段存储的值为'饥人谷'
Storage.set('teachers', ['ruoyu', 'fangfang', 'tom'],  60)

Storage.get('name')   // ‘饥人谷’
Storage.get('age')     //  如果不超过30秒，返回数字类型的2；如果超过30秒，返回 undefined，并且 localStorage 里清除 age 字段
Storage.get('teachers')  //如果不超过60秒，返回数组； 如果超过60秒，返回undefined