跳到主要内容

JavaScript Let Const

在JavaScript的发展历程中，ES6（ECMAScript 2015）带来了许多重要更新，其中let和const关键字的引入是JavaScript变量声明方式的一次重大革新。这两个关键字为JavaScript提供了更加可预测和安全的变量声明方式，解决了使用var声明变量时存在的各种问题。

传统变量声明：var的问题​

在了解let和const之前，让我们先回顾一下使用var声明变量时存在的主要问题：

1. 作用域问题​

var声明的变量具有函数作用域，而非块级作用域，这可能导致预期外的行为：

function exampleFunction() {
  if (true) {
    var x = 10;
  }
  console.log(x); // 输出: 10，即使x是在if块中声明的
}

exampleFunction();

2. 变量提升​

var声明的变量会被"提升"到其作用域的顶部：

console.log(y); // 输出: undefined，而非报错
var y = 5;

// 上面的代码等同于：
var y;
console.log(y);
y = 5;

3. 可重复声明​

同一作用域内可以多次声明同一个变量：

var z = 10;
var z = 20; // 不会报错，z被重新赋值为20

现代变量声明：let和const​

为了解决以上问题，ES6引入了let和const关键字，它们提供了更精确的变量声明控制。

let关键字​

let声明的变量具有块级作用域，并且不会被提升：

function testLet() {
  if (true) {
    let x = 10;
    console.log(x); // 输出: 10
  }
  // console.log(x); // 报错: x is not defined
}

testLet();

let的主要特性​

  1. 块级作用域：变量仅在声明它的代码块内可用。
  2. 没有变量提升：变量必须在声明前使用，否则会报错。
  3. 不允许重复声明：在同一作用域中不能多次声明同一个变量。
// 演示块级作用域
{
  let blockScoped = "我只在这个块中可见";
  console.log(blockScoped); // 输出: 我只在这个块中可见
}
// console.log(blockScoped); // 报错: blockScoped is not defined

// 演示无变量提升
// console.log(noHoisting); // 报错: Cannot access 'noHoisting' before initialization
let noHoisting = "我没有被提升";

// 演示不能重复声明
let noDuplicate = "第一次声明";
// let noDuplicate = "第二次声明"; // 报错: Identifier 'noDuplicate' has already been declared

const关键字​

const关键字用于声明常量，其值在初始化后不能更改：

const PI = 3.14159;
console.log(PI); // 输出: 3.14159

// PI = 3.14; // 报错: Assignment to constant variable

const的主要特性​

  1. 块级作用域：与let相同，具有块级作用域。
  2. 必须初始化：声明时必须赋值，否则会报错。
  3. 不可重新赋值：一旦初始化，不能更改其值。
  4. 对于引用类型（对象、数组等），其内容仍可修改。
// 必须初始化
// const MUST_INITIALIZE; // 报错: Missing initializer in const declaration

// 引用类型内容可修改
const person = {
  name: "张三",
  age: 25
};

person.age = 26; // 有效 - 可以修改对象的属性
console.log(person); // 输出: {name: "张三", age: 26}

// person = {}; // 报错 - 不能重新赋值整个对象
提示

如果你需要一个完全不可变的对象，可以使用Object.freeze()方法：

const frozenPerson = Object.freeze({
  name: "李四",
  age: 30
});

// frozenPerson.age = 31; // 严格模式下报错，非严格模式下静默失败
console.log(frozenPerson.age); // 输出: 30 (值未改变)

let vs const vs var：何时使用？​

以下是选择变量声明方式的一些指导原则：

  1. 默认使用const：除非你知道变量值将来会改变，否则首选使用const。这有助于避免意外修改变量。

  2. 需要重新赋值时使用let：当变量的值需要更改时，如计数器、状态变量等，使用let。

  3. 避免使用var：在现代JavaScript中，很少有理由继续使用var。

// 推荐的做法
const API_URL = "https://api.example.com"; // 不会改变的值
let count = 0; // 会改变的值

function incrementCounter() {
  count += 1;
  return count;
}

实际应用场景​

场景1：循环中使用let​

在循环中使用let能够避免闭包相关的问题：

// 使用var的问题
function createButtonsWithVar() {
  for (var i = 1; i <= 3; i++) {
    var button = document.createElement("button");
    button.textContent = "按钮 " + i;
    button.onclick = function() {
      alert("这是按钮 " + i); // 总是会弹出 "这是按钮 4"
    };
    document.body.appendChild(button);
  }
}

// 使用let解决问题
function createButtonsWithLet() {
  for (let i = 1; i <= 3; i++) {
    const button = document.createElement("button");
    button.textContent = "按钮 " + i;
    button.onclick = function() {
      alert("这是按钮 " + i); // 正确显示按钮编号
    };
    document.body.appendChild(button);
  }
}

场景2：保护配置参数​

使用const可以确保应用程序中的重要配置参数不被意外修改：

const CONFIG = {
  apiKey: "abcd1234",
  maxRetries: 3,
  timeout: 5000
};

function fetchData(endpoint) {
  // CONFIG在这里是安全的，不会被重新赋值
  return fetch(`${CONFIG.apiUrl}/${endpoint}`, {
    headers: {
      "Authorization": `Bearer ${CONFIG.apiKey}`
    },
    timeout: CONFIG.timeout
  });
}

场景3：避免变量提升导致的错误​

function processTasks(tasks) {
  // 使用let避免提升问题
  let taskCount = tasks.length;
  
  if (taskCount === 0) {
    let message = "没有任务需要处理";
    console.log(message);
    return;
  }
  
  // 这里不能访问message，避免了变量污染
  for (let i = 0; i < taskCount; i++) {
    console.log(`处理任务${i + 1}`);
    // 处理任务...
  }
}

暂时性死区（Temporal Dead Zone）​

let和const声明的变量存在"暂时性死区"（TDZ）：从代码块开始到变量声明之前，变量处于无法访问的状态。

{
  // TDZ开始
  // console.log(tdz); // 报错：Cannot access 'tdz' before initialization
  
  let tdz = "现在可以访问了";
  console.log(tdz); // 输出: 现在可以访问了
}

这种机制有助于捕获变量在声明前被使用的错误，从而减少程序中的潜在问题。

总结​

ES6引入的let和const关键字为JavaScript的变量声明提供了更安全、更可预测的方式：

  • let：提供块级作用域，允许重新赋值，但不允许重复声明。
  • const：提供块级作用域，声明常量，初始化后不允许重新赋值。
  • 两者都没有变量提升，都存在暂时性死区。
  • 相比于var，它们提供了更好的代码可读性和更少的意外行为。

在现代JavaScript开发中，推荐采用"const by default, let when needed"（默认使用const，需要时使用let）的策略，并尽量避免使用var。

练习与进阶学习​

尝试完成以下练习来加深理解：

  1. 创建一个函数，在其中使用let定义一个循环计数器，并在循环内部修改它的值。
  2. 定义一个包含配置选项的对象，使用const确保它不会被重新赋值。
  3. 尝试修改上面对象中的某个属性，观察结果。
  4. 使用Object.freeze()创建一个完全不可变的对象。

进一步阅读资源​

  • MDN Web Docs上的let文档
  • MDN Web Docs上的const文档
  • 《深入理解ES6》（Understanding ECMAScript 6）- Nicholas C. Zakas著

通过掌握这些现代JavaScript特性，你将能够编写更安全、更可维护的代码！