JavaScript作用域之for循环

前言：今天在看书的时候看到ES6的一个新特性的时候作者讲到了let的语法和使用的时候，让我突然想到自己前段时间在阿里技术面（渣渣一面就被挂了）的一个问题，就是关于for循环作用域的问题。今天记录一下算是做个复盘。

• JavaScript中的作用域

• for循环作用域的问题

• for循环作用域问题的解决方法

JavaScript中的作用域

JavaScript作用域由ES6之前的：全局作用域和局部作用域
扩展为ES6之后的：全局作用域、局部作用域（函数作用域）和块级作用域

for循环作用域的问题

大家看这样一个例子：

var arr = ["bacon111", "xiamo222", "chenguo333"];
for(var i = 0; i<arr.length; i++){
    console.log("数组第" + i + "个值为：" + arr[i]);
}
输出结果：
数组第0个值为：bacon111
数组第1个值为：xiamo222
数组第2个值为：chenguo333

再来看这样一个例子：

var arr = ["bacon111", "xiamo222", "chenguo333"];
for(var i = 0; i<arr.length; i++){
    setTimeout(function(){
        console.log("数组第" + i + " 个值为：" + arr[i]);
    }, 1000);
}
输出结果：
数组第3个值为：undefined

相信大家都知道这两个例子：第一个例子就不用解释了，至于第二个例子为何会产生这样的结果呢？原因就是由于js的主执行队列和异步执行队列造成的，在主执行队列执行完毕for循环后，开始event-loop事件轮询执行异步方法setTimeout()，而在执行完毕for循环之后i值已经变为3了，所以才会看到连续3次输出：数组第3个值为：undefined。主要原因还是变量的作用域问题造成的，上例使用关键字var声明的变量是个全局作用域，执行完毕后就覆盖了，没有“块级作用域”的概念。

for循环作用域问题的解决方法

方法一：for循环中使用ES6新特性的关键字let

var arr = ["bacon111", "xiamo222", "chenguo333"];
for(let i = 0; i<arr.length; i++){
    setTimeout(function(){
        console.log("数组第" + i + "个值为：" + arr[i]);
    }, 1000);
}
输出结果：
数组第0个值为：bacon111
数组第1个值为：xiamo222
数组第2个值为：chenguo333

方法二：使用一个匿名函数

var arr = ["bacon111", "xiamo222", "chenguo333"];
for(var i = 0; i<arr.length; i++){
    (function(i){
        setTimeout(function(){
            console.log("数组第" + i + " 个值为：" + arr[i]);
        }, 1000);
    })(i);
}
输出结果：
数组第0个值为：bacon111
数组第1个值为：xiamo222
数组第2个值为：chenguo333

看到这里相信大家对解决这个问题有了一定的认识和想法了。在for循环中使用关键字let使得循环语句中的自变量i是通过let来定义的，而let关键字成功的将自变量i的作用域限定在每一次for循环语句块当中了，因此也就能正常获取数组中的内容了。