JavaScript中var，let，const 的区别

最新推荐文章于 2025-04-11 19:11:11 发布

Java-请多指教

最新推荐文章于 2025-04-11 19:11:11 发布

阅读量266

点赞数

分类专栏：工作学习文章标签： javascript 前端 vue.js

本文链接：https://blog.youkuaiyun.com/wuzj1314/article/details/132411189

版权

工作学习专栏收录该内容

31 篇文章

订阅专栏

本文详细比较了JavaScript中var、let和const的声明特性，包括作用域、提升、是否可变等，并强调了ES6推荐使用let和const以提高代码质量和可维护性，特别是const的常量性质对预防意外修改的优势。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、使用var声明变量

var是ECMAScript规范中最早用于声明变量的关键字，一直延用自今。但是自从ES6规范中又增加了两种方式之后，var声明变量再也不是唯一的和最佳的选择了。那么var声明的变量到底有什么特点呢？

1、var 声明的变量是函数作用域

var声明的变量具备函数作用域的特点，在函数内部声明的变量只能在函数作用域内部使用，在函数外部不能访问。但是，在函数内部可以访问函数外部的全局作用域中的变量。关于这一点，可以详细学习一下作用域和作用域链。这里不在赘述。

    <script>
       var num="333";
       function fun(){
           var age=23;//在函数内部声明，在函数外部不能访问
           console.log(age)//23
           console.log(num);//333,函数内部可以访问全局作用域中的变量num
       }
       fun();
       console.log(age);//报错Uncaught ReferenceError: age is not defined,不能访问函数内部的变量
    </script>

2、var声明的变量会有变量提升

在全局作用域中，var声明的变量会被提升到全局作用域的最顶端，在局部作用域中声明的变量会被提升到局部作用域的最顶端

    <script>
      console.log(num);//undefined
       var num="333";
       function fun(){
           console.log(age);//undefined
           var age=23;
       }
       fun();
    </script>

在上面这段代码中，定义了一个全局变量num，在函数fun中定义可一个局部变量age。但是，都是在变量被声明之前使用打印变量num和age的。但是结果并没有报错，而是undefined。说明变量num和age都被提升到变量当前作用域中的最顶端了。可以在变量声明之前使用变量。但是没有多大的意义。

虽然两个变量在声明的时候都赋有初始值，但是初始值并没有没打印出来。这是因为，使用var声明的变量会被提升，但是但是变量的赋值并不会被提升。

3、全局作用域中声明的变量会被挂载到全局对象的window中，

以下这段代码分别打印：96,96，true。

    <script>
        var num=96;
        console.log(num)//96
        console.log(window.num);//96
        console.log(num===window.num)//true
    </script>

4、同一作用域下，可以重复声明相同的变量名

同一个作用域下可以使用var声明相同名称的变量，前面的值会被后面的值覆盖，使用时使用最后声明的变量

    <script>
        var a=23;
        var a=56;
        var a=98;
        console.log(a);//98
    </script>

二、使用let声明变量

1、使用let声明的变量具有块级作用域的特点

ES6 新增的 let 关键字跟 var 很相似，但它的作用域是块级的，这也是 JavaScript 中的新概念。块级作用域由最近的一对包含花括号{}界定。换句话说，if 块、while 块、function 块，甚至连单独的块也是 let 声明变量的作用域。在变量的作用域之外，无法访问变量，会报错

    <script>
        {
            let num='36';
            console.log(num);//36
        }
        console.log(num);//报错：ReferenceError 


        if(true){
            let num1=23;
            console.log(num1);//23
        }
        console.log(num1);//报错：ReferenceError 


        while(true){
            let num3=69;
        }
        console.log(num3);//报错：ReferenceError 

        
        function fun(){
            let num4=65;
        }
        console.log(num4)//报错：ReferenceError 
    </script>

2、let声明的变量有暂时性死区，没有变量提升，必须先声明再使用，

这一点与var有区别，let声明的变量必须先声明再使用。未经声明就使用，会报错，在 let 声明之前的执行瞬间被称为“暂时性死区”，在此阶段引用任何后面才声明的变量都会抛出 ReferenceError。

    <script>
        console.log(num)//报错ReferenceError
        let num=96;
        {
            console.log(a);//报错ReferenceError
            let a=6;
        }
    </script>

3、全局作用域中使用let声明的变量不会挂载到window对象中

这一点和var也不一样。let声明的全局变量不会放在window中。以下代码分别输出666,undefined,false

    <script>
       let num=666;
       console.log(num);//666
       console.log(window.num);//undefined
       console.log(num===window.num);//false
    </script>

4、同一作用域下不能使用let重复声明相同的变量

在相同的额作用域下，相同的变量名不能使用let重复声明，会报错。但是不同作用域下不受限制。

同一作用域下不能使用let重复声明变量

    <script>
        let num=66;
        let num=33;//报错，SyntaxError，相同作用域下不能重复声明变量
    </script>

不同作用域下，let可以声明相同变量名的变量

    <script>
        let num=66;
        function fun(){
            let num=65;
            {
                let num=63;
                console.log(num);//63
            }
            console.log(num);//65
        };
        console.log(num);//66
        fun();
    </script>

相同作用域下不能重复声明并不受var关键字的限制

    <script>
        var a=66;
        var a=99;
        let a=33;//报错SyntaxError
    </script>

在上面这段代码中，虽然变量a是使用var关键字声明的，但是在同一作用域下再次使用let声明a变量，依然会报错，不能重复声明。

三、使用const声明常量

除了 let，ES6 同时还增加了 const 关键字。使用 const 声明的变量必须同时初始化为某个值。一经声明，在其生命周期的任何时候都不能再重新赋予新值。

1、const声明常量必须赋初始值

    <script>
        const a=6;//合法有效
        const b;//报错 SyntaxError，必须赋初始值才可以
    </script>

2、const声明的常量不能更改

    <script>
        const a=6;//合法有效
        a=7;//报错，不能更改
    </script>

对于const声明的原始数据类型，一旦声明变不能更改，但是对于引用数据类型，虽然不能重新赋值给某个新的引用类型变量。但是操作操作引用数据类型变量中的元素或者属性却是合法的。因为这些操作不会改变引用数据类型的地址。

    <script>
       const obj={};
       let o={};
       //obj=o;//报错

       obj.name="南山行者";//合法有效
       console.log(obj);


       const arr=[1,2,3];
       //arr=obj;//报错
       arr.push(3);//合法有效
       arr.shift();//合法有效
       console.log(arr);
    </script>

const除以上这两点不同之外，其他的特性与let的特性一致，也是具有块级作用域、变量不能提升，同一个作用域下不能重复声明等特点。