JavaScript 中 let 和 const 知识点

前言：

在 JS 中不仅 var 可以声明变量，在es6中又推出了 let 和 const 声明变量，那么他们有什么区别呢，现在就给大家分享一下。

---

区别：

var

for (var i = 0; i < 3; i++) {
  console.log(i); // 0 1 2
}
console.log(i); // 3
console.log(window.i); // 3

var 声明的变量不支持封闭作用域，因此 var 声明的变量会作用到全局上边，因此，上边代码 最后 在循环体外边也可以访问到 var 声明的变量。

for (var i = 0; i < 3; i++) {
   setTimeout(() => {
     console.log(i);
   }, 1000);
}

上述代码无法实现 每秒输出 i 的值，因为 setTimeout 是宏任务，因此会在同步代码执行完毕后执行，此时 i 的变量已经变为 终止值，因此无法正确输出 i 的值。

for (var i = 0; i < 3; i++) {
  (function (i) {
    setTimeout(() => {
      console.log(i);
    }, 1000);
  })(i);
}

如果 想输出每秒一次 i 的值，就需要使用到闭包的知识，因此写出的代码会很丑陋，但是 let 声明的变量就可以解决此问题。

---

let

let 支持了块级作用域，声明的变量只会在当前作用域内执行。

for (let i = 0; i < 3; i++) {
  setTimeout(() => {
    console.log(i); // 0 1 2
  }, 1000);
}

上边代码就可以轻松获取每次的 i 的值，因为 { } 可以被立即为一个块级作用域，每个 i 的值都在 一个  { } 中，因此 就可以正常的读取到 i 的值。

// 可以声明，但是很奇怪，不建议这样写，可能会出问题
   var a = 1;
   var a = 2;
// let 无法重复声明 ‘Identifier 'a' has already been declared’
   let a = 1;
   let a = 2;
// 如果使用let 声明过了，就不要再使用 var 声明了 ‘Identifier 'a' has already been declared’

let 无法重复声明相同的变量，因此会避免我们以后编写代码时候出现未知问题。

// 可以访问到b ，但是打印出来 是 undefined，因为赋值语句 在下边
console.log(b);
var b = 1;

// 无法访问到c ，因为 let 声明的变量不会提升
 console.log(c);
 let c = 1;

let 声明的变量没有提升到作用域的最前边，因此没有var 的变量提升的特性。

let a = 1;
{
  console.log(a); // 
  let a = 2;
}

//Uncaught ReferenceError: Cannot access 'a' before initialization

let/const 命令会使区块形成封闭的作用域。若在声明之前使用该变量，就会报错，这样的特性被网友称为 “暂时性死区”

---

const

通过 const 声明的变量的值(普通值、引用地址)无法被修改。

const a = 1;
a = 2;

// TypeError: Assignment to constant variable.

 const a = {
   age: 99,
 };
 a.age = 88;

// 可以修改引用空间内部的属性

---

总结

建议大家开发的时候优先使用 let 和 const 来声明变量和常量，var 这种方式可以放弃了。