关于let

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了关于let相关的知识,希望对你有一定的参考价值。

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

 

以上是关于关于let的主要内容,如果未能解决你的问题,请参考以下文章

20个简洁的 JS 代码片段

关于let以及var的区别

用下面的代码解释一下javascript中var和let关键字的区别

关于代码片段的时间复杂度

JavaScript ES6 的let和const

关于片段生命周期