ES6 中新增了两个声明变量的关键字，分别是 let 和 const。相较于之前的 var 关键字，let 和 const 更加严谨，并且能够避免一些常见的编程错误。本文将详细介绍 let 和 const 的使用方式以及常见的误区，希望能够对前端开发者有所启发。
let 关键字
let 关键字和 var 不同，它只在所在的块级作用域内有效。在之前的 ES5 中，我们常常使用匿名函数来模拟块级作用域，以避免变量污染。而在 ES6 中，let 关键字的出现让我们能够更加方便地控制变量的作用域。
使用方式
如下是 let 关键字的基本语法：
let variableName;
如果需要声明多个变量，则可以使用逗号分隔：
let x, y, z;
我们还可以使用 let 来声明变量并进行赋值：
let x = 1;
如果有多个变量需要初始化，则可以使用逗号分隔：
let x = 1, y = 2, z = 3;
常见误区
重复声明
在同一个作用域下，使用 let 声明已经存在的变量会导致程序抛出错误。例如：
let x = 1; let x = 2; // TypeError: Identifier 'x' has already been declared
这是由于 let 只能声明一次，禁止重复声明引起的。
变量提升
在 ES6 中，let 关键字不存在变量提升。也就是说，在声明变量之前使用该变量会导致 ReferenceError：
console.log(x); // ReferenceError let x = 1;
这是因为变量在声明之前不存在，let 关键字避免了使用未声明变量的问题。
循环中使用
在 for 循环中，使用 var 声明的变量往往会产生一些奇怪的结果。而使用 let 关键字，则能够避免这些问题：
-- -------------------- ---- -------
--- ---- - - -- - - -- ---- -
--------------------- -
--------------- -- -- ---------
-- ------
-
--- ---- - - -- - - -- ---- -
--------------------- -
--------------- -- -- ---------
-- ------
-其中，使用 var 声明的变量 i 会一直存在于全局作用域中，因此当 setTimeout 回调函数中使用 i 时，i 的值已经变成了 5。而使用 let 声明的变量 i 则只在 for 循环中有效，不存在变量污染的问题。
const 关键字
const 关键字也是用来声明变量的，但它声明的是一个常量，其值在声明后不能修改。
使用方式
const 关键字的使用方式和 let 关键字类似：
const variableName;
如果需要声明多个变量，则可以使用逗号分隔：
const x = 1, y = 2, z = 3;
我们还可以使用 const 声明一个对象，并指定一个初始值：
const obj = {name: 'John', age: 18};之后，常量 obj 的值就不能再修改了。
常见误区
对象和数组的修改
上面提到，const 声明的变量值不可变，但这并不代表指向的对象或数组不可变。例如：
const arr = [1, 2, 3]; arr.push(4); // 可行 arr = [1, 2, 3, 4]; // TypeError: Assignment to constant variable.
上述代码可以向数组中添加元素，但不能修改 arr 的引用地址。
恶意修改
对 const 声明的变量进行赋值操作会导致 TypeError：
const x = 1; x = 2; // TypeError: Assignment to constant variable.
这个特性使得 const 常量更加安全。但是，恶意修改是一个主要问题。例如，const 声明的一个对象可以看作是一个引用类型的变量，可以通过修改其属性值来“修改”常量。例如：
const obj = {name: 'John', age: 18};
obj.age = 19; // 可行
obj = {name: 'John', age: 19}; // TypeError: Assignment to constant variable.这说明了 const 变量是不能修改其引用地址，但是其指向对象的属性值可以改变。
总结
本文介绍了 let 和 const 关键字在 ES6 中的使用方法以及常见误区。作为前端开发者，我们应该更加注意变量作用域和声明方式，以避免由此产生的错误。同时，我们也需要意识到 const 变量并不完全不可变，需要谨慎处理其中的引用类型变量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6464cf3a968c7c53b05a8bea