javascript中varlet和const的区别

Posted 2021-02-11 liuzz07

在javascript中，var、let和const都可以用来声明变量，那么三者有什么区别呢？要回答这个问题，我们可以从先想想：三种不同的声明会影响变量的哪些方面？这些方面也就是变量的特性，那么变量有哪些特呢？无非就是两个：一个是变量的数据类型，是数字，字符串还是数组或者其他的，另一个就是变量的作用域，是全局的还是局部的，又或者是某个代码块的。因此我们可以从以下两个方面来探究三种声明方式的区别：

1.声明后变量的数据类型有什么不同？

2.声明后变量的作用域有什么不同？

先看第一个方面，数据类型有何不同

 1     //声明数字有何不同
 2     var n1 = 10;
 3     let n2 = 10;
 4     const n3 = 10;
 5     console.log(typeof n1);  //number
 6     console.log(typeof n2);  //number
 7     console.log(typeof n3);  //number
 8 
 9     //声明字符串有何不同
10     var s1 = "hello";
11     let s2 = "hello";
12     const s3 = "hello";
13     console.log(typeof s1);  //string
14     console.log(typeof s2);  //string
15     console.log(typeof s3);  //string
16 
17     //声明数组有何不同
18     var arr1 = [1,2,"a"];
19     let arr2 = [1,2,"a"];
20     const arr3 = [1,2,"a"];
21     console.log(typeof arr1);  //object
22     console.log(typeof arr2);  //object
23     console.log(typeof arr3);  //object
24     console.log(arr1 instanceof Array);  //true，判断是否是数组
25     console.log(arr2 instanceof Array);  //true
26     console.log(arr3 instanceof Array);  //true
27 
28     //声明对象有何不同
29     var o1 = {1:"a",2:"b"};
30     let o2 = {1:"a",2:"b"};
31     const o3 = {1:"a",2:"b"};
32     console.log(typeof o1);  //object
33     console.log(typeof o2);  //object
34     console.log(typeof o3);  //object
35 
36     ////声明后不设置初始值有何不同
37     var u1;
38     let u2;
39     // const u3; //报错，const声明变量必须设置初始值
40     console.log(typeof u1);  //undefined
41     console.log(typeof u2);  //undefined
42     // console.log(typeof u3);

可以看到，三种声明方式不管是声明数字、数组、对象都没有差别，但是在声明后不设置初始值时有一点不同，var和let可以声明后不设置初始值，而const不行。

再来看声明后作用域有何不同，先看最常见的var

1 var a = 1;
2     f();
3     console.log(a);  //1
4     function f() {
5         console.log(a);  //undefined
6         var a = 10;
7         console.log(a);  //10
8     }

执行后结果为

undefined
10
1

可以看到用var声明的变量在函数外声明是全局变量，在函数内声明是局部变量，只能在函数内使用，第5行console.log(a)在声明的后面，所以会打印undefined，注意这里解释器会检测到函数f内定义

了a，所以会打印undefined，如果把第6,7行注释掉，那么函数内会直接引用外部的全局变量，打印的都是1。

let是ES6中新增的命令，那么let与var有什么区别呢，来看一段代码

<script>
    for (var i=0;i<5;i++) {
        console.log(i)
    }
    console.log(i)
</script>

//执行结果
0
1
2
3
4
5

{
    var i = 1;
}
console.log(i);

1

可以看到，这里再次证明了var声明的是全局变量，不受块级作用域（花括号）的限制。而let的作用域仅限于块级作用域

{
        let i = 1
    }
    console.log(i);  //ReferenceError: i is not defined

看到这里你大概可以想到了，let可以用于for循环，完成一些独特的功能，来看一道面试题

for (var i =0;i < 10; i++) {
        setTimeout(function () {
            console.log(i);
        },0)
    }
    
    //输出结果
    //10个10

如果把var改成let，结果会怎样呢

for (let i =0;i < 10; i++) {  //在for循环（块级作用域）内部使用，变量会被固定
        setTimeout(function () {
            console.log(i);  //i是循环体内的变量，不受外界影响
        },0)
    }

    //输出结果
    //0 1 2 3 4 5 6 7 8 9

ES6 明确规定，如果区块中存在let和const命令，这个区块对这些命令声明的变量，从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量，就会报错。
总之，在代码块内，使用let命令声明变量之前，该变量都是不可用的。这在语法上，称为“暂时性死区”（temporal dead zone，简称 TDZ）。

let的另一个区别是不能重复声明。

const意为constant variable，也就是固定的变量，不能被重新赋值，且需要在初始化时给其指定值，要不然会报错

const b=0;
b=1;  //TypeError: Assignment to constant variable.
console.log(b);
    
let hello = "hello world";
console.log(hello);
let hello = "world";  // SyntaxError: Identifier ‘hello‘ has already been declared

 

总结

1. var定义的变量是全局变量，可以修改，可以重复定义，不初始化会输出undefined

2. let定义的变量仅作用于块级作用域（不受外界影响），可以修改，但不能重复定义，不初始化会输出undefined

3. const定义的变量是全局变量，不能修改，不能重复定义，不初始化会报错