ES6精解:let、const、块级作用域

发布时间:2019-08-09 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了ES6精解:let、const、块级作用域脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

let命令

ES6新增了let命令,跟var类似,都是用来声明变量的

1.不允许重复声明

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

2.不存在变量提升

    {
       console.LOG(b);//报错
        let b = 1;
    }

正确写法为:

    {
        let b = 1;
        console.log(b);
    }

既要先定义,后面才能有这个值,否则会报错,如果改成var会提示undefined未定义,但是let就直接报错了

3.暂时性死区

只要在块级作用域里面存在let,则它所声明的变量就绑定在这个块级作用域上了,不受外界影响

   VAR a = 2;
   if(true){
       console.log(a); //报错
       let a = 3;
   }

注意:a先是全局变量,但是let声明之后,导致let声明的变量已经绑定在这个块级作用域上了,在块级作用域里面a就变成局部变量,所以在let声明变量前,输出a会报错

简述: let不能重复声明,不存在变量提升,暂时性死区,作用于块级作用域,let声明的变量只有在它所在的区域里面有效

4.let与var的区别

我们知道let和var都是定义变量的,那这两者之间有什么区别呢,以下例子具体说明:

例1:

  {
        var a = 1;
        let b = 2;
    }
    console.log(a);//1
    console.log(b);//Uncaught ReferenceError: b is not defined

从这个例1可以看出var定义的是全局变量,而let定义的话只能在当前作用域下有效,如果出了作用域者无效

例2:

    {
        console.log(a); //undefined
        var a = 100;

        console.log(b); //Uncaught ReferenceError: b is not defined
        let b = 100;
    }

从例2可以看出let必须得定义后才能生效,否则会报错;而var没定义也是可以的,值为undefined,也就是var存在变量提升

块级作用域

在讲let的时候,我们提到了块级作用域,那么什么是块级作用域呢?

 var tmp =12;
    function f() {
        console.log(tmp);
        if (false) {
            var tmp = 'hello world';
        }
    }
    f(); // undefined

tmp会被内层覆盖,所以输出undefined,因为var存在变量提升

let实际上就是块级作用域,比如:

    {
        var a = 1;
        {
            var a = 2;
        }
        console.log(a);//2
    }

如果用var外部声明的a会被内部声明的给覆盖,但是如果用let

    {
        let a = 1;
        {
            let a = 2;
        }
        console.log(a);//1
    }

用上let这个时候就不会被覆盖,外部的a绑定的是外部作用域,内部的a绑定的是内部作用域

还有一个问题我们肯定经常会碰到,如:

  var callbacks = [];
    for(var i = 0;i < 5;i++){
        callbacks[i] = function () {
            return i;
        }
    }
    console.log(callbacks[0]()); //5

因为i被后面覆盖,所以一直都是5
es5中我们是这么解决的:

   var callbacks = [];
    for(var i = 0;i < 5;i++){
        (function (i) {
            callbacks[i] = function () {
                return i;
            }
        })(i);
    }
    console.log(callbacks[0]()); //0

然而ES6中我们就可以利用let的块级作用域了

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

从这里我们可以看出,块级作用域其实就是立即执行函数(function(){})()

const命令

const跟let类似,只是const是声明常量,而let是声明变量

1.不能重复声明

{
    const a = 1;
    const a = 2;//报错
}

2.一旦声明就不能改变

{
    const a = 1;
    a = 2;//报错
}

注意: const实际上不是变量不能改变,而是变量声明的地址不能改变,如下:

{
    const a = {};
    a.name = 'Lily';
    console.log(a); //输出:{name: "Lily"}
}

但是如果改成:

{
    const a = {};
    a = {name:'Lily'};
    console.log(a); //报错
}

所以改变变量里面的属性是不会报错的,只有把整个变量都改变即改变变量地址,那就会报错

3.声明一定要有值

{
    const a; //报错
}

所以常量声明一定要有初始值

4.暂时性死区

const a = 2;
{
    const a = 1;
}
console.log(a);//2

const跟let一样都会产生块级作用域,内部跟外部定义的变量毫不相干

5.不存在变量提升

{
    console.log(a);//报错
    const a = 1;
}

const跟let一样,还没有定义都会报错

简述: const必须初始化,声明一定要有值,无法重复声明,是块级作用域

以上个人总结,有什么不对的地方欢迎留言指出!

脚本宝典总结

以上是脚本宝典为你收集整理的ES6精解:let、const、块级作用域全部内容,希望文章能够帮你解决ES6精解:let、const、块级作用域所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。