为什么要用let和const来替代var

为什么要用let和const来替代var

要明白这一点，首先得了解作用域的概念。ES6之前javascript作用域的层级只在函数层面，而没有块级作用域的概念。也就是说，一个函数内在不包含另一个函数的情况下，其内部所有的变量都属于同一个作用域链。通过var声明的变量会提升上函数的最顶上。

function() {
    var a = [1,2,3,4,5];
    for (var i = 0; i < 10; i++) {
        console.log(i);
    }
}

经过预编译后等效于

function() {
    var a;
    var i;
    a = [1,2,3,4,5];
    for (i = 0; i < 10; i++) {
        console.log(i)
    }
}

观察下面的这段程序，其目的本是想针对于由数值组成的数组a，生成一个由方程组成的数组aFn，aFn中的方程与a中的数值一一对应，方程执行的结果为对应数值的平方。但是实际上数组aFn中每个方程的执行结果都是100。

var a = [0,1,2,3,4,5,6,7,8,9,10]
var aFn = [];
for (var i = 0; i < 10; i++) {
    aFn[i] = function() {
        return a[i]**2;
    }
}
//执行aFn中函数
for (var j = 0; j < 10; j++) {
    console.log(aFn[j]());
}

执行时输出结果:

100; (输出10次)

这是因为，函数自身的作用域是在函数执行前的那一刻产生的，因此，对于aFn中所有的函数来说，他们的i都是继承自同一个全局作用域。因此表现出来的就是全局作用域那个i，在执行的过程中，i的值已经是10了，所以输出都是100。而ES6引入的const和let定义的是块级作用域，这样每个循环相当于定义了属于自己的块级作用域，而对于aFn中的函数，其父级作用域对应的是每次循环时的块级作用域，循环过程中i值对于每个块级作用域是独立的。因此可以达到预期的效果,代码如下：

let a = [0,1,2,3,4,5,6,7,8,9,10];
let aFn = [];
for (let i = 0; i < 10; i++) {
    aFn[i] = function() {
        return i**2;
    }
}
//执行aFn中函数
for (var j = 0; j < 10; j++) {
    console.log(aFn[j]());
}

执行时输出结果:

0; 1; 4; 9; 16; 25; 36; 49; 64; 81