ES6 Let关键字

let关键字

let可以声明一个块级作用域的变量。
1.下面代码中{}就是一个块级作用域，let关键字声明的a只在{}内有效，在作用域外部打印a结果是a is not defined。

if (true) {
        let a = 10;
        var b = 20;
    }
    console.log(a);//a is not defined
    console.log(b);//20

2.let可以防止循环变量变成全局变量。用var声明时i是一个全局变量，在循环体外仍然可以调用。用let声明将a限制在了for循环里面。

for (var i = 0; i < 5; i++) {

    }
    console.log(i);//5
    for (let i = 0; i < 5; i++) {

    }
    console.log(i);//i is not defined

3.使用let声明的变量有暂时性死区。if中有let声明，let与块级作用域暂时绑定在了一起，块级作用域内的a变量和外面的a无关。输出a时a在块内未定义，所以时a is not defined。

  var a = 10;
    if (true) {
        console.log(a); //a is not defined
        let a = 20;
    }

从上往下执行程序时，i相当于一个全局变量。函数暂时未调用，先将循环执行完，这时i=5，最后调用函数输出i时，输出结果全都是5。

var arr = [];
    for (let i = 0; i < 5; i++) {
        arr[i] = function() {
            console.log(i);
        }
    }
    arr[0]();//,5
    arr[3]();//5

用let声明变量，相当于每循环一次都产生了一个新的块级作用域。调用函数时可以根据i输出相应的值。

let arr = [];
    for (let i = 0; i < 5; i++) {
        arr[i] = function() {
            console.log(i);
        }
    }
    { let i = 0
    arr[i] = function(){
    console.log(0);
    }
    { let i = 1
    arr[i] = function(){
    console.log(1);
    }
    { let i = 2
    arr[i] = function(){
    console.log(2);
    }
    ...
    arr[0]();//0
    arr[3]();//3

改变li的背景颜色
如果用var声明i，因为click是异步任务，会在循环完后才执行，这时没有相应的li与其对应。用let声明，每一次循环都会创建一个对应的块级作用域，可以根据点击的li变化背景颜色。

 var lis = document.querySelector('li')
    for (let i = 0; i < lis.length; i++) {
        lis.onclick = function() {
            lis[i].style.background = 'green';
        }
    }