ES6 let var const 声明变量的区别

三者的区别：

• const 声明常量，后面不能修改
• let 声明变量，块作用域，后面不能覆盖之前声明的值
• var 声明变量，函数作用域，后面能覆盖之前声明的值
  下面具体说明使用方法：

• const 声明常量，后面不能修改

<script>
    const id = 'dddd';
    id = 'dfd'; //这里会报错
</script>

const 修改报错

我们可以借助这个属性声明一个不可修改的类：

const person = {
        name: 'hello',
        age: 20
    }
    person.age = 22;
    console.log(person);
    //不能修改属性 这时es5新增的属性
    const he = Object.freeze(person);
    he.age = 1;
    console.log(he);

两次输出的结果都一样的，通过 Object.freeze声明的变量是无法修改类的属性的

• let 声明变量，块作用域，后面不能覆盖之前声明的值

<script>
    var price = 100;
    var count = 10;
    if (count > 5) {
        let discount = price * 0.6;
        console.log(`the discount is ${discount}`);
    }
</script>

let声明不是全局变量

• var 声明变量，函数作用域，后面能覆盖之前声明的值

<script>
    var price = 100;
        var price = 60;  //这里能覆盖声明
    var count = 10;
    if (count > 5) {
        var discount = price * 0.6;
        console.log(`the discount is ${discount}`);
    }
</script>

var声明的是全局

个人见解：
如果是全局变量声明后不再修改的，比如配置参数等用const声明，如果导入的库文件以及方法内部变量用let，全局的变量用var，尽量少使用var去污染全局变量。
仅是个人见解，如有不妥请指正。

在实际使用中：
for循环使用频率很高，但是有个问题估计很少有人注意到。

    for (var i = 0; i<10; i++) {
        console.log(i);
    }
    console.log(i)

这里控制台输出的i是10。

图片.png

这里如果用let的话，i就变成了块级作用域，出了循环也就没有了。

for (let i = 0; i<10; i++) {
        console.log(i);
        setTimeout(function(){
           console.log(`i:${i}`);
        },1000);
    }

    console.log(">>"+i)

图片.png

[获取授权]