JavaScript内核与高级编程之：`JavaScript`的`Array.prototype.with()`：其在不可变数组中的新特性。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位朋友，大家好！今天咱们来聊聊JavaScript里一个相对较新的家伙，Array.prototype.with()。它看起来平平无奇，但背后蕴含着不可变数组的理念，能让咱们的代码更安全、更可控。

开场白：数组的变与不变

咱们JavaScript里的数组啊，默认情况下是个“百变星君”，想怎么改就怎么改，push、pop、splice，一顿操作猛如虎，数组内容早就面目全非了。这在某些情况下很方便，但同时也埋下了隐患。比如，在并发编程或者需要追踪数据变化的时候，这种直接修改数组的方式就容易出问题，导致程序行为不可预测。

所以，就有了“不可变数据结构”的概念。简单来说，就是一旦创建，就不能修改。想改？没问题，创建一个新的，旧的保持原样。这就像你玩游戏，存档之后再浪，死了读档，之前的进度还在。Array.prototype.with()就是为了方便咱们在JavaScript里操作不可变数组而生的。

with()：不可变数组的救星

with()方法允许你创建一个数组的副本，并在副本的指定索引处修改值，而原始数组保持不变。它的语法很简单：

const newArray = array.with(index, value);

array: 要操作的原始数组。
index: 要修改的元素的索引（从0开始）。
value: 要设置的新值。
newArray: 返回一个新的数组，其中指定索引的元素已被修改。

简单示例，一睹芳容

const myArray = [1, 2, 3, 4, 5];
const newArray = myArray.with(2, 10);

console.log("原始数组:", myArray);   // 输出: 原始数组: [1, 2, 3, 4, 5]
console.log("新数组:", newArray);    // 输出: 新数组: [1, 2, 10, 4, 5]

看到了吧？原始数组myArray 毫发无损，newArray才是修改后的版本。这就是不可变的魅力！

with()的优势：

避免副作用： 由于原始数组不会被修改，因此可以避免因修改数组而导致的意外副作用。这在大型项目中，尤其是在多个函数共享同一个数组时，非常重要。
易于调试： 当数据发生变化时，可以更容易地追踪数据的来源和变化过程，因为每个版本的数组都是独立的。
并发安全： 在多线程或并发环境中，由于数组不会被修改，因此可以避免竞态条件和数据损坏。
React 和 Redux 的好伙伴： 在 React 和 Redux 等框架中，不可变数据结构是最佳实践。with() 方法可以方便地创建新的 state 对象，而不会直接修改现有的 state。

深入剖析，细节决定成败

索引越界： 如果 index 小于 0 或大于等于数组的长度，with() 方法会抛出一个 RangeError 异常。这就像你试图访问数组里不存在的房间，JavaScript会毫不客气地告诉你：“没这个房间！”

const myArray = [1, 2, 3];
try {
  const newArray = myArray.with(5, 10); // 索引越界
  console.log(newArray);
} catch (error) {
  console.error("出错了:", error); // 输出: 出错了: RangeError: Index out of range
}

稀疏数组： 如果原始数组是稀疏数组（即数组中存在空洞），那么 with() 方法会保留空洞。

const myArray = [1, , 3]; // 注意：中间有一个空位
const newArray = myArray.with(1, 2);

console.log("原始数组:", myArray);   // 输出: 原始数组: [1, empty, 3]
console.log("新数组:", newArray);    // 输出: 新数组: [1, 2, 3]

类型转换： value 可以是任何类型的值，with() 方法会将其赋值给新数组的指定索引。

const myArray = [1, 2, 3];
const newArray = myArray.with(1, "hello");

console.log("新数组:", newArray);    // 输出: 新数组: [1, 'hello', 3]

与解构赋值结合： with() 可以与解构赋值一起使用，使得代码更加简洁。

const myArray = [1, 2, 3, 4, 5];
const { 2: oldValue, ...rest } = myArray; // 获取索引为2的值，并解构剩余部分
const newArray = myArray.with(2, oldValue * 2); // 将索引为2的值乘以2

console.log("原始数组:", myArray); // 输出: 原始数组: [1, 2, 3, 4, 5]
console.log("新数组:", newArray); // 输出: 新数组: [1, 2, 6, 4, 5]

with() vs. 其他方法：splice()、map()

你可能会想，既然都能修改数组，为什么还要用 with() 呢？ splice() 和 map() 也能实现类似的功能啊！别急，咱们来比较一下：

方法	功能	是否修改原始数组	返回值	适用场景
`splice()`	从数组中添加/删除元素。	是	被删除的元素组成的数组（没有删除则为空数组）	需要直接修改原始数组，并且可能需要删除或添加多个元素。
`map()`	创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后的返回值。	否	新数组	需要对数组中的每个元素进行转换，生成一个全新的数组。
`with()`	创建一个数组的副本，并在副本的指定索引处修改值。	否	新数组	需要修改数组中的单个元素，并且保持原始数组不变。特别适合于状态管理和并发编程。

splice() 确实可以修改数组，但它是直接修改原始数组，这与不可变数据结构的理念背道而驰。

map() 可以创建一个新数组，但它的目的是对数组中的每个元素进行转换，而不是简单地修改某个特定索引的值。

所以，with() 在需要修改数组中的单个元素，同时保持原始数组不变的场景下，是最佳选择。

真实场景，代码说话

假设我们有一个用户列表，每个用户都是一个对象：

const users = [
  { id: 1, name: "张三", age: 20 },
  { id: 2, name: "李四", age: 25 },
  { id: 3, name: "王五", age: 30 }
];

现在，我们要修改ID为2的用户的年龄，将其改为28岁。使用 with() 可以这样实现：

const userIdToUpdate = 2;
const newUsers = users.with(
  users.findIndex(user => user.id === userIdToUpdate),
  { ...users.find(user => user.id === userIdToUpdate), age: 28 }
);

console.log("原始用户列表:", users);
console.log("修改后的用户列表:", newUsers);

这里用到了findIndex()找到需要修改的元素的索引，然后用with()创建一个新的数组，并将新年龄赋值给指定的用户。注意这里使用了扩展运算符 (...)，创建了一个新的用户对象，而不是直接修改原始对象，保证了数据的不可变性。

进阶用法：结合 Immer 库

虽然 with() 方法已经很方便了，但在处理嵌套对象或复杂数据结构时，代码可能会变得冗长。这时候，可以考虑使用 Immer 库。Immer 允许你以可变的方式操作数据，但最终会生成一个不可变的数据结构。它就像一个魔法师，让你感觉在直接修改数据，但实际上是在创建新的副本。

首先，你需要安装 Immer：

npm install immer

然后，你可以这样使用：

import { produce } from "immer";

const users = [
  { id: 1, name: "张三", age: 20, address: { city: "北京", street: "长安街" } },
  { id: 2, name: "李四", age: 25, address: { city: "上海", street: "南京路" } },
  { id: 3, name: "王五", age: 30, address: { city: "广州", street: "珠江新城" } }
];

const userIdToUpdate = 2;
const newUsers = produce(users, draft => {
  const userIndex = draft.findIndex(user => user.id === userIdToUpdate);
  draft[userIndex].age = 28;
  draft[userIndex].address.city = "深圳"; // 嵌套修改
});

console.log("原始用户列表:", users);
console.log("修改后的用户列表:", newUsers);

可以看到，使用 Immer 后，代码变得更加简洁易懂。你可以像直接修改数据一样，修改 draft 对象，Immer 会自动帮你创建不可变的副本。

兼容性考虑：polyfill

Array.prototype.with() 是一个相对较新的特性，一些老旧的浏览器可能不支持。如果需要兼容这些浏览器，可以使用 polyfill。polyfill 是一段代码，用于在旧环境中提供新特性。

你可以使用 core-js 库来提供 with() 的 polyfill：

npm install core-js

然后在你的代码中引入 polyfill：

import 'core-js/features/array/with';

// 现在你可以安全地使用 Array.prototype.with() 了

总结：不可变，更可靠

Array.prototype.with() 是一个简单而强大的工具，它可以帮助我们更好地处理不可变数组。掌握它，可以使我们的代码更安全、更易于维护，尤其是在 React、Redux 等框架中，更是如虎添翼。

记住，不可变数据结构是现代前端开发的最佳实践之一。拥抱不可变性，让你的代码更上一层楼！

练习题：

给定一个包含学生分数的数组 scores = [85, 92, 78, 95, 88]，使用 with() 方法将索引为 2 的分数修改为 80，并输出修改后的数组。
给定一个包含商品信息的数组 products = [{ id: 1, name: "手机", price: 1000 }, { id: 2, name: "电脑", price: 5000 }, { id: 3, name: "平板", price: 3000 }]，使用 with() 方法将ID为2的商品的价格修改为 4500，并输出修改后的数组。
尝试使用 Immer 库，将上述商品信息数组中ID为2的商品价格修改为4500，同时将名称修改为 "笔记本电脑"，并输出修改后的数组。

希望今天的讲解对大家有所帮助！咱们下期再见！

发表回复 取消回复

发表回复取消回复