发布于 由admin

JS `const` 声明对象/数组：理解引用不可变性与内容可变性

各位，调试器拿好了吗？今天咱们来聊聊 JavaScript 里 const 这个磨人的小妖精，特别是它跟对象和数组搅和在一起的时候。别怕，咱们不整那些枯燥的定义，就用大白话，外加几个小例子，保证你听完之后，腰不酸了，腿不疼了，一口气能写十个 Bug… 哦不，是十个功能！

开场白：const 到底是个啥玩意儿？

const，顾名思义，就是 constant 的缩写，意思是“常量”。在 JavaScript 里，const 用来声明一个常量，这意味着一旦你用 const 给一个变量赋值，这个变量就不能再被重新赋值了。听起来很简单，对吧？但问题就出在“赋值”这两个字上。

别急，先看几个简单的例子：

const PI = 3.14159;
// PI = 3.14; // 错误！ Assignment to constant variable.

const MESSAGE = "Hello, world!";
// MESSAGE = "Goodbye, world!"; // 错误！ Assignment to constant variable.

上面这两个例子很直观，PI 和 MESSAGE 一旦被赋值，你就不能再改变它们的值了。如果你非要改，浏览器会毫不留情地给你抛出一个错误。

重点来了：对象和数组的特殊性

但是，当 const 遇到对象和数组，事情就变得有点微妙了。很多人会误以为，用 const 声明的对象或数组就完全不能修改了。这其实是一个常见的误解。

const myObject = {
  name: "Alice",
  age: 30
};

myObject.age = 31; // 这是允许的！
console.log(myObject); // 输出: { name: 'Alice', age: 31 }

const myArray = [1, 2, 3];
myArray.push(4); // 这是允许的！
console.log(myArray); // 输出: [ 1, 2, 3, 4 ]

看到没？我们用 const 声明了 myObject 和 myArray，但是我们仍然可以修改它们的属性和元素。这是怎么回事呢？

引用不可变性 vs. 内容可变性：两个概念要分清

这里的关键在于理解“引用不可变性”和“内容可变性”这两个概念。

  • 引用不可变性 (Reference Immutability): const 保证的是变量的 引用 不可变。也就是说，const 声明的变量所指向的内存地址不能改变。
  • 内容可变性 (Content Mutability): 对象和数组本身是 可变的。即使它们的引用是常量，我们仍然可以修改它们内部的属性和元素。

换句话说，const 就像给你的房子（对象/数组）贴了一张“禁止搬家”的标签。你可以随便装修房子内部，但你不能把房子搬到另一个地址。

更形象的比喻：

想象一下，你有一只宠物狗，你给它起了个名字叫 "旺财"，并且用 const 来声明它：

const myDog = {
  name: "旺财",
  breed: "金毛"
};

const myDog 意味着你不能再把 myDog 指向另一只狗，比如：

// myDog = { name: "来福", breed: "中华田园犬" }; // 错误！Assignment to constant variable.

但是，你可以给 "旺财" 剪毛，或者给它买新衣服：

myDog.breed = "剃了毛的金毛"; // 这是允许的！
console.log(myDog); // 输出: { name: '旺财', breed: '剃了毛的金毛' }

"旺财" 还是那只 "旺财"，只不过它的毛型变了。myDog 变量仍然指向同一只狗，只是这只狗的内容发生了变化。

深入理解：内存中的运作方式

为了更好地理解这一点，我们需要稍微了解一下 JavaScript 在内存中是如何存储对象和数组的。

当你在 JavaScript 中创建一个对象或数组时，计算机会在内存中分配一块空间来存储这个对象或数组的数据。然后，变量会存储这个内存空间的 地址，而不是对象或数组本身。这个地址就是我们所说的“引用”。

用 const 声明变量时，const 保证的是这个变量存储的 地址 不会改变。但是，只要地址不变，我们就可以通过这个地址去修改内存空间中的数据。

常见误区与陷阱

  • 误区一：const 声明的对象/数组完全不能修改。
    这是最常见的误解。记住，const 只是限制了引用不可变，而不是内容不可变。
  • 误区二：认为 const 可以防止对象/数组被修改。
    const 并不能保证对象/数组的内容不被修改。如果你需要完全的不可变性，你需要使用其他技术，比如 Object.freeze() 或 Immutable.js 等。

Object.freeze()：让对象真正“冻结”

如果你真的想让一个对象完全不可变，你可以使用 Object.freeze() 方法。这个方法会“冻结”一个对象，使其属性既不能被修改，也不能被添加或删除。

const myFrozenObject = {
  name: "Elsa",
  age: 25
};

Object.freeze(myFrozenObject);

// myFrozenObject.age = 26; // 严格模式下会报错，非严格模式下会静默失败
// myFrozenObject.gender = "Female"; // 严格模式下会报错，非严格模式下会静默失败
// delete myFrozenObject.name; // 严格模式下会报错，非严格模式下会静默失败

console.log(myFrozenObject); // 输出: { name: 'Elsa', age: 25 }

需要注意的是，Object.freeze() 只能提供 浅冻结。也就是说，如果对象包含其他对象作为属性，那么这些嵌套对象仍然是可变的。

const myNestedObject = {
  name: "Anna",
  details: {
    age: 28,
    city: "Arendelle"
  }
};

Object.freeze(myNestedObject);

myNestedObject.details.age = 29; // 这是允许的！
console.log(myNestedObject); // 输出: { name: 'Anna', details: { age: 29, city: 'Arendelle' } }

如果想要实现深冻结，你需要递归地冻结所有嵌套对象。

总结：const 的正确用法

  • 使用 const 来声明那些不应该被重新赋值的变量。 这可以帮助你避免一些意外的错误，并提高代码的可读性。
  • 记住，const 只是限制了引用不可变，而不是内容不可变。 对于对象和数组，你仍然可以修改它们的属性和元素。
  • 如果你需要完全的不可变性，请使用 Object.freeze() 或其他不可变数据结构库。

一些实用建议：

建议 理由
尽可能多地使用 const。 提高代码可读性，明确哪些变量不应该被修改。
优先使用 const，其次是 let，最后是 var。 这是现代 JavaScript 的最佳实践。const 和 let 具有块级作用域，可以避免 var 带来的变量提升和作用域问题。
了解 Object.freeze() 的局限性。 它只能提供浅冻结。如果需要深冻结，你需要递归地冻结所有嵌套对象。
考虑使用不可变数据结构库。 例如 Immutable.js，它提供了更强大的不可变数据结构，可以简化复杂应用中的状态管理。
编写测试用例。 确保你的代码按照预期的方式工作，特别是在处理对象和数组时。测试用例可以帮助你发现潜在的 Bug，并提高代码的可靠性。

代码示例：深入理解 const 和对象/数组的交互

// 示例 1：修改对象属性
const person = {
  name: "Bob",
  age: 40
};

person.age = 41; // 合法，修改对象属性
console.log(person); // 输出: { name: 'Bob', age: 41 }

// person = { name: "Charlie", age: 50 }; // 错误！ Assignment to constant variable.

// 示例 2：修改数组元素
const numbers = [1, 2, 3];

numbers[0] = 10; // 合法，修改数组元素
numbers.push(4); // 合法，向数组添加元素
console.log(numbers); // 输出: [ 10, 2, 3, 4 ]

// numbers = [5, 6, 7]; // 错误！ Assignment to constant variable.

// 示例 3：使用 Object.freeze()
const config = {
  apiUrl: "https://example.com/api",
  timeout: 5000
};

Object.freeze(config);

// config.timeout = 10000; // 严格模式下报错，非严格模式下静默失败
console.log(config); // 输出: { apiUrl: 'https://example.com/api', timeout: 5000 }

// 示例 4：浅冻结与深冻结
const company = {
  name: "Acme Corp",
  address: {
    street: "Main St",
    city: "Anytown"
  }
};

Object.freeze(company);

// company.address.city = "Newtown"; // 合法，因为 address 对象没有被冻结
console.log(company); // 输出: { name: 'Acme Corp', address: { street: 'Main St', city: 'Newtown' } }

// 深冻结的实现
function deepFreeze(obj) {
  // 如果 obj 不是对象，则直接返回
  if (typeof obj !== "object" || obj === null) {
    return obj;
  }

  // 冻结 obj
  Object.freeze(obj);

  // 递归地冻结 obj 的所有属性
  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      deepFreeze(obj[key]);
    }
  }

  return obj;
}

const anotherCompany = {
  name: "Beta Inc",
  address: {
    street: "Oak Ave",
    city: "Somewhere"
  }
};

deepFreeze(anotherCompany);

// anotherCompany.address.city = "Elsewhere"; // 严格模式下报错，非严格模式下静默失败
console.log(anotherCompany); // 输出: { name: 'Beta Inc', address: { street: 'Oak Ave', city: 'Somewhere' } }

总结的总结：

const 是一个很有用的关键字，但要真正理解它的含义，你需要区分引用不可变性和内容可变性。掌握了这一点，你才能正确地使用 const，避免一些常见的错误，并编写出更健壮、更易于维护的 JavaScript 代码。

好了，今天的讲座就到这里。希望你们都能成为 const 的 master，写出优雅的代码！别忘了，实践是检验真理的唯一标准，多写代码，多调试，才能真正掌握这些知识。下课！

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注