javascript中使用var、let和const声明变量的区别

在JavaScript中可以使用var、let和const三种修饰符来声明变量，使用的场景有所不同。

1.使用var声明的变量会挂载到window上，而使用let和const声明的变量则不会。

var yanggb = 100;
console.log(yanggb, window.yanggb); // 100 100

let yanggb1 = 10;
console.log(yanggb1, window.yanggb1); // 10 undefined

const yanggb2 = 1;
console.log(yanggb2, window.yanggb2); // 1 undefined

2.使用var声明的变量存在声明提升的特性，而使用let和const声明的变量则不会。

console.log(yanggb); // undefined，相当于var yanggb; console.log(yanggb); yanggb = 100;
var yanggb = 100;

console.log(yanggb1); // 报错：yanggb1 is not defined
let yanggb1 = 10;

console.log(yanggb2); // 报错：yanggb2 is not defined
const yanggb2 = 10;

这一特性同时也使得可以使用var在统一作用域下声明同名变量，而使用let和const则不行。

var yanggb = 100;
console.log(yanggb); // 100

var yanggb = 10;
console.log(yanggb); // 10

上面这段代码实际上相当于：

var yanggb;

yanggb = 100;
console.log(yanggb); // 100

yanggb = 10;
console.log(yanggb); // 10

而同样的逻辑使用let或const则会报错：

let yanggb = 100;
console.log(yanggb); // 100

let yanggb = 10; // 报错：Identifier 'yanggb' has already been declared

3.使用var声明的变量会超脱出块级作用域（for循环中的花括号或if中的花括号），而使用let和const声明的变量则不会。

if (true) {
    var a = 100;
    let b = 100;
    const c = 100;
}

console.log(a); // 100
console.log(b); // 报错：b is not defined
console.log(c); // 报错：c is not defined

for (var yanggb = 0; yanggb < 100; yanggb++) {
    // ..
}
console.log(yanggb); // 100

for (let yanggb1 = 0; yanggb1 < 100; yanggb1++) {
    // ..
}
console.log(yanggb1); // 报错：yanggb1 is not defined

4.使用let命令会带来暂时性死区（temporal dead zone，简称TDZ）。

var yanggb = 100;

if (true) {
    // TDZ开始
    yanggb = 10;
    console.log(yanggb); // 在当前块作用域中存在使用let/const声明的情况下，
    // 给yanggb赋值10时，只会在当前作用域找变量a，
    // 而这时，还未到声明时候，所以控制台Error：yanggb is not defined
    let yanggb = 1; // TDZ结束
    console.log(yanggb);
}

console.log(yanggb); // 100，不受块级作用域中声明的变量的影响

只要块级作用域内存在let命令，它所声明的变量就被绑定在这个区域内，不再受外部的影响重点内容。简单理解就是，就是只要某个代码块有let指令，即使外部有名称相同的变量，该代码块的同名变量与外部的变量也互不干扰。

5.const声明的变量必须具备初始值且声明后不可修改，是最严格的语法，通常用于声明常量。

const yanggb = 100;
yanggb = 666;
console.log(yanggb); // 100

但是如果声明的变量是复合类型的，则是可以修改其内部属性的，这时可以看作只是类型不可改变。

const yanggb = [];
yanggb[0] = 10;
console.log(yanggb); // [10]

const yanggb1 = {};
yanggb1.name = 'yanggb1';
console.log(yanggb1); // {name: 'yangb1'}

总结

var是历史存留的语法，在新的规范中基本上都不建议使用了（过于灵活，容易失去控制）；而let和const的选用则是要根据场景而定，如果声明的是常量（声明后不再改变其值），则使用const；如果声明之后会改变值，则可以使用let（理论上用得最多）。

 

"人生就像一场烟花，你盛装而来，却只是争得片刻的辉煌和美丽。"