ES6 | let、const以及与var之间的区别

目录

一、let

1.声明变量

2.块儿级作用域

 3.不存在变量提升

 4.不影响作用域链

二、const

1.声明常量

 2.一般常量使用大写（潜规则）

3.常量的值不能修改

 4.块儿级作用域（const和let一样，都是块儿级作用域）

5.对于数组和对象的元素修改，不算做对常量的修改，不会报错

6.var的变量是顶级变量，而let和const不是 

三、let、const和var之间的区别

---

一、let

1.声明变量

可以直接声明变量（let a），可以同时声明多个变量（let b,c,d），也可以直接赋值（let e=100）,当然，也可以在同时声明多个变量的同时进行赋值（let f=521，g='i love you'，h=[]），但是有一个需要注意的点，就是变量不能重复声明，如果重复声明的话会报错。

2.块儿级作用域

变量只在代码块以内有效，出了代码块就没有效了。举个栗子！

 

 3.不存在变量提升

变量不能在变量未声明之前使用，它不像var有变量提升，var在未声明之前使用的话会显示undefined。

 4.不影响作用域链

虽然school是块儿级作用域，但是在函数内部找不到school这个变量，它还是会向上级作用域查找。 

我们来写一个小案例，之间我们也有写过：

 代码：

    <div>
        <h3>点击切换背景颜色: h3>
        <div class="item">div>
        <div class="item">div>
        <div class="item">div>
    div>
    <script>
        var items = document.querySelectorAll('.item')
        for(var i=0; ilength; i++){
            items[i].onclick = function(){
                this.style.background = 'skyblue'
            }
        }
    script>
body>

我们之间呢，是在点击事件中用了this来指定元素来改变背景颜色，一开始我们肯定犯了一个错误，就是我们用【items[i].style.background = 'skyblue'】却没有任何用，这是为什么呢？

其实这个变量i是一个全局变量，如果我没有记错的话，for循环和点击事件是一个异步任务，当我们点击时，此时的变量i已经跳出循环变成3了。当点击时，发现没有变量i，然后去上一级查找，找到window.i，此时window.i = 3，那它当然会没有反应啊！！！

所以想改变这个，一是把【items[i].style.background = 'skyblue'】改成【this.style.background = 'skyblue'】；二是把【var i = 0】改成【let i = 0】，有了块级作用域，也就不会报错。

二、const

1.声明常量

const和let不同，let声明常量时，可以不赋于初始值，但是如果const没有赋于初始值时，不然会报错。

        //1.声明变量
        const A;
        //2.const必须赋于初始值
        const B = 'am B'
        console.log(B)

 2.一般常量使用大写（潜规则）

3.常量的值不能修改

        const B = 'am B';
        B = 'am not B'
        console.log(B)

 4.块儿级作用域（const和let一样，都是块儿级作用域）

5.对于数组和对象的元素修改，不算做对常量的修改，不会报错

        const TEAM = ['UZI','MXLG','MING','Letme'];
        TEAM.push('Meiko')
        console.log(TEAM)

6.var的变量是顶级变量，而let和const不是 

三、let、const和var之间的区别

• var，没有块级作用域，创建和初始化的时候有变量提升，可以重复声明
• let，块级作用域，不允重复声明，暂时性死区
• const，块级作用域，不允许重复声明，暂时性死区，const声明的变量不能直接修改值，但是const定义的是指向这个对象的地址，地址不变，引用的数据可以改变

 暂时性死区：创建了变量但是没有初始化，没法使用变量，只在变量创建阶段有变量提升，在初始化阶段没有提升，形成了暂时性死区