JavaScript中let与const的使用指南及块级作用域

let命令详解

let是ES6新增的变量声明命令，旨在解决var带来的作用域混乱问题。let具有块级作用域，不允许重复声明，且不存在变量提升现象。

第1步：理解块级作用域与不可重复声明

let声明的变量仅在其所在的代码块（由{}包裹）内有效。在同一代码块内，禁止对已通过let声明的变量进行重复声明，这与var的行为有本质区别。

{
    let a = 10;
    var a = 1; // 报错：Identifier 'a' has already been declared
}

// 不同代码块中可以声明同名变量
{
    let a = 1;
    console.log(a); // 1
}
{
    let a = 2;
    console.log(a); // 2
}

第2步：掌握暂时性死区（TDZ）机制

let声明的变量存在“暂时性死区”。在变量声明语句执行之前，该变量在作用域内不可访问。若在声明前使用，将抛出ReferenceError错误。这一机制防止了因变量提升导致的逻辑错误。

console.log(tmp); // 报错：Cannot access 'tmp' before initialization
tmp = 'abc';
let tmp;

暂时性死区也可能出现在函数参数的默认值中。若参数B依赖于参数A，但A尚未初始化完成，则会触发死区错误：

function bar(x = y, y = 2) { 
    return [x, y];
}
bar(); // 报错：Cannot access 'y' before initialization

第3步：规避for循环中的闭包陷阱

在使用var声明循环变量时，所有迭代共享同一个外部作用域的变量，导致回调函数输出错误的索引值。let每次循环都会创建一个新的绑定，确保每个迭代拥有独立的变量副本。

// 使用 let：输出 7
const arr = [];
for (let i = 0; i < 10; i++) {
    arr[i] = () => console.log(i);
}
arr[7](); 

// 使用 var：输出 10
const arr2 = [];
for (var j = 0; j < 10; j++) {
    arr2[j] = () => console.log(j);
}
arr2[7]();

const命令详解

const用于声明只读常量。其基本行为与let类似，同样具备块级作用域和暂时性死区特性，但增加了“不可重新赋值”的限制。

第1步：严格声明与赋值要求

使用const声明时必须立即初始化赋值，且声明后的变量名不能指向新的内存地址（即不能重新赋值）。

const PI = 3.14159;
PI = 3; // 报错：Assignment to constant variable.

const NAME; // 报错：Missing initializer in const declaration
NAME = 'Test';

第2步：处理复杂数据类型的可变性

对于基本数据类型（如字符串、数字），const完全锁定其值。但对于复杂数据类型（对象、数组），const仅保证变量指向的内存地址不变，地址内的属性或元素仍可修改。

const person = {};
person.name = 'John'; // 允许：修改对象属性
person = {};          // 报错：试图改变引用地址

若需彻底冻结对象，使其属性不可修改、添加或删除，应使用Object.freeze()方法。

块级作用域的存在意义

在ES6之前，JavaScript仅有全局作用域和函数作用域。let和const引入的块级作用域解决了两个核心痛点：

1. 防止变量泄露：var声明的循环变量会泄露到外层作用域，造成意外干扰。使用let可限制变量仅在块内有效。
2. 避免内部污染**：**在包含条件判断的函数中，内部的var声明会提升至函数顶部，可能覆盖外部的同名变量，导致逻辑错误。let隔离了内外层的作用域，确保变量独立性。

综上所述，在实际开发中，建议优先使用const声明不应改变的引用，使用let声明需要频繁更新的变量，避免使用var以提升代码的安全性与可读性。

以上就是JavaScript中let与const命令使用的详细内容，更多关于JavaScript变量声明规范与ES6新特性的资料请关注本站其它相关文章！