关于let

Posted 2020-09-06

ES6新增了声明变量的命令let，let与var不同的是let声明的作用域是块级作用域。下面是let的几种使用场景。

1、let常见使用场景

以往写for循环经常有这样的代码：for(var i=0;i<num;i++)

这种情况下声明的变量i的作用域其实函数作用域，相当于

var i；

for(i=0;i<num;i++)

 

现在有了let可以这样写for(let i=0;i<num;i++),i只在for循环体内有效。需要注意的是在每次循环中i都是一个新的变量。但是javascript引擎会记录上一个i的值，根据上一个i的值对本次的i进行初始化。因为let的这个特性所以可以拿来解决闭包所带来的问题。因为每个i都是一个新的变量，所以输出的i就是0,1,2,3,4...

var buttons=document.getElementsByTagName("button"); 
for(let i=0;i<buttons.length;i++){
　　buttons[i].onclick=function(){
　　　　console.log(i);
　　}
}

for循环的变量i的作用域是父作用域，for循环里面的句子还可以用let再次定义i

for(let i=0;i<10;i++){
    let i="aaa";
    console.log(i);//输出aaa
}

2、var与let的不同

1.let块级作用域

2.不支持变量提升

3.会出现暂时性死区

当用let声明变量在该区域会产生封闭，外部的变量对其无影响

function test(){
        let i=1;
        let a=2;
        if(1){
            console.log(a);//不会出现暂时性死区，因为在该区域没有再定义a所以会拿到上一级的变量a
            console.log(i);//出现暂时性死区，在该区域声明了变量i,会产生封闭，外界的变量i则对其无影响，又因为let不提升变量所以出现报错。
            let i;
        }
    }
    test()

 

4.不允许重复定义变量

var a;
let a;
//报错

let a=1;
let a=2;
//报错

 

5.不支持函数提升（但在支持ES6环境下还是会支持提升，相当于var。一般不在块作用域定义函数，即使定义函数也应使用let定义函数表达式，但在没有大括号情况下会报错）

// 浏览器的 ES6 环境
function f() { console.log(‘I am outside!‘); }

(function () {
  if (false) {
    // 重复声明一次函数f
    function f() { console.log(‘I am inside!‘); }
  }

  f();
}());
// Uncaught TypeError: f is not a function

//实际上执行的代码效果
// 浏览器的 ES6 环境
function f() { console.log(‘I am outside!‘); }
(function () {
  var f = undefined;
  if (false) {
    function f() { console.log(‘I am inside!‘); }
  }

  f();
}());
// Uncaught TypeError: f is not a function