JavaScript中的变量关键字详解（var、let、const）

---

前言

本篇文章主要讲JavaScript中三个定义变量关键字var,let,const的介绍、区别、使用场景和需要注意的事项等。希望看完文章的你会有所收获。

---

一、var

比较需要注意的是var变量关键字的作用范围和变量提升

    <script>
        // 1.var的作用域为局部变量,作用范围为函数作用域
        function test(){
            var temp = "abc";
        }
        test();
        console.log(temp); // 无法输出

        // 2.var的声明提升，在某局部作用域中，不论在何处定义了var变量，都会被提升到作用域顶部，但仅限于声明
        function test1(){
            console.log(temp);
            var temp = "def";
            // 上两行代码等价于以下三行代码
            // var temp;
            // console.log(temp);
            // temp = "def";
        }
        test1(); // 输出：undefined

        // 3.由于var变量提升的存在，多个相同的var变量名会自己在作用域顶部聚合而不会报错，所以可以在不确定是否声明过时直接使用
        var aaa;
        var aaa; // 不会报错

        // 4.同样由于var变量提升的原因，不要在for循环的条件中使用var关键字
        for (var i = 0; i < 3; i++) {
        }
        console.log(i); // 输出：3

        // 5.var在全局作用域中声明的变量会成为window对象的属性
        var hello = "hello";
        console.log(window.hello); // 输出hello

        // 6.在非JavaScript的严格模式中，可以直接定义变量名赋并赋值，省略前面的关键字，那么就是默认创建了一个全局变量
        function test3(){
            temp = "abc";
        }
        test3();
        console.log(temp); // 输出：abc
    </script>

---

二、let

let关键字中不存在变量提升，这是与var变量最大的区别，导致许多应用上的差别。

    <script>
        // 1.let和var同样是局部变量，但let的作用范围是块作用域
        // 以下代码将let修改为var即可在if代码块外输出temp，区别所在。
        if(true){
            let temp = "abc";
            console.log(temp); // 输出：abc
        }
        console.log(temp); // 报错：temp未定义。

        // 2.let不允许在同作用域中出现冗余声明，包括混用关键字
        let b;
        let b; // 报错：b已被声明
        var c;
        let c; // 报错：c已经声明

        // 3.因为以作用域为限制，上一点说的冗余声明，在嵌套的块中是允许的
        let d = 1;
        console.log(d); // 输出：1
        if(true){
            let d = 2;
            console.log(d); // 输出：2
        }

        // 4.有关var中的变量提升，在let中并不存在。
        if(true){
            console.log(e); // 不会输出undefined，而是报错：e未定义。
            let e = 2;
        }

        // 5.let变量在全局声明时不会成为window对象的属性，但变量依旧时存在的，需要注意冗余声明
        let hello = "hello";
        console.log(window.hello); // 输出：undefined

        // 6.由于let不存在变量提升，所以在同一页面多个js文件中，需要特别注意同名的变量名。
        // <script> let name = "amy" <\/script>
        // <script> let name = "lihua" <\/script>，由于上一个script里的name声明，这里会报错，换成var则不会。

        // 7.let变量关键字，最长使用的地方为循环体条件内，因为不存在变量提升所以不会污染到外部变量
        for (let i = 0; i < 3; i++) {
        }
        console.log(i); // 输出：i未定义
    </script>

---

三、const

变量中的一种不允许被修改的常量，类似其他编程语言中的final关键字

    <script>
        // const变量关键字与let在行为上基本类似，包括作用域和变量提升。
        // const类似于java中的final关键字，设置变量为静态常量，声明时必须赋值，且不能修改
        const hello = "hello";
        hello = "hi"; // 报错：给常量赋值
        // 如果const时对象类型，修改对象内部的属性是允许的。
        const hi = {};
        hi.value = "hi"; // 不会报错
    </script>

---

总结

合理使用最适合的变量声明关键字，能有效的提升代码质量。最好不要随意使用var进行变量声明，尽可能的用let或const，明确的作用域、声明位置以及不变的值，由此写出的代码更易理解，也利于一些bug检测分析工具提前发现问题。