不可变的JS -将值提取到数组

基础概念

不可变（Immutable）在JavaScript中指的是一旦某个值被创建，就不能再被改变。在函数式编程中，不可变性是一个核心概念，它有助于减少副作用和提高代码的可预测性。

类型

在JavaScript中，不可变数据结构可以通过以下几种方式实现：

原始值：如数字、字符串和布尔值，它们本身就是不可变的。
冻结对象：使用Object.freeze()方法可以冻结一个对象，使其属性不可修改。
库提供的不可变数据结构：如Immutable.js、Immer等。

应用场景

状态管理：在React等前端框架中，使用不可变数据结构可以更好地管理组件状态。
并发编程：在多线程或多进程环境中，不可变数据结构可以减少竞态条件和数据冲突。
函数式编程：不可变数据结构是函数式编程的基础，有助于编写纯函数和高阶函数。

示例代码

假设我们有一个对象，我们希望将其值提取到一个数组中，并且保持原始对象的不可变性。

// 原始对象
const originalObject = {
  name: 'Alice',
  age: 30,
  city: 'Wonderland'
};

// 使用Object.freeze()冻结对象
const frozenObject = Object.freeze(originalObject);

// 提取值到数组
const valuesArray = Object.values(frozenObject);

console.log(valuesArray); // 输出: ['Alice', 30, 'Wonderland']

遇到的问题及解决方法

问题：为什么使用Object.freeze()后，对象的属性仍然可以被修改？

原因：Object.freeze()只能冻结对象本身的属性，如果对象的属性是对象，那么这个嵌套的对象不会被冻结。

解决方法：递归地冻结对象的所有嵌套属性。

function deepFreeze(obj) {
  // 首先冻结当前对象
  Object.freeze(obj);
  // 遍历对象的每个属性
  Object.keys(obj).forEach((key) => {
    const value = obj[key];
    // 如果属性值是对象，递归冻结
    if (typeof value === 'object' && value !== null && !Object.isFrozen(value)) {
      deepFreeze(value);
    }
  });
}

const originalObject = {
  name: 'Alice',
  age: 30,
  address: {
    city: 'Wonderland',
    zip: '12345'
  }
};

const deeplyFrozenObject = deepFreeze(originalObject);

// 尝试修改嵌套对象的属性
deeplyFrozenObject.address.city = 'New Wonderland'; // 不会生效

console.log(deeplyFrozenObject.address.city); // 输出: 'Wonderland'