ES6 中 let 和 const 声明变量的作用与区别

JavaSCript ES6 提供了 let 和 const 两种声明变量的方式，相较于传统的 var 声明变量，它们具有更加灵活、可控的特性，可以更好地适应现代前端开发的需求。在本文中，我们将详细探讨 let 和 const 声明变量的作用与区别，帮助大家更好地应用这两种声明方式。

let 和 const 的作用

let 和 const 的作用是声明一个变量，并且可以赋初值或不赋初值。二者的不同在于，let 声明的变量可以被重新赋值，而 const 声明的变量不可以被重新赋值。

let a = 1;
a = 2;
console.log(a); // 输出 2

const b = 1;
b = 2; // 报错，Assignment to constant variable.

let 和 const 的区别

除了变量赋值的可变性不同之外，二者还有以下区别。

变量作用范围

let 声明的变量作用范围是块级作用域，即在外部无法访问内部作用域的变量。

if (true) {
  let a = 1;
}
console.log(a); // 报错，a 未定义

而 var 声明的变量作用范围是函数或全局作用域，即在函数或全局作用域内均可访问。

if (true) {
  var a = 1;
}
console.log(a); // 输出 1

const 声明的变量作用范围和 let 相同，是块级作用域，即在外部无法访问内部作用域的变量。

变量声明提升

使用 var 声明的变量会存在变量声明提升的问题，即变量可以在声明前使用。

console.log(a); // 输出 undefined
var a = 1;

而使用 let 和 const 声明的变量不存在变量声明提升问题，使用未声明的变量会报错。

console.log(a); // 报错，a 未定义
let a = 1;

临时死区

使用 let 和 const 声明变量，在声明前访问该变量会报错，并进入“临时死区”。

console.log(a); // 报错，a 未定义
let a = 1;

对象属性

使用 const 声明对象时，虽然不能直接修改该对象的值，但可以修改该对象的属性。

const person = {
  name: 'tom',
  age: 18,
};
person.age = 20; // 正常运行，修改对象属性
person = {}; // 报错，Assignment to constant variable.

总结

let 和 const 声明变量相较于传统的 var 声明变量具有更加灵活和可控的特性，可以更好地适应现代前端开发的需求。在使用 let 和 const 声明变量时，需要注意变量作用范围、变量声明提升、临时死区和对象属性等方面的差异，以充分发挥它们的价值。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c0e8a583d39b48815408df