pad a string in JavaScript

JavaScript数组的with()方法，不可变性与负索引的妙用

JavaScript 数组方法早已为 Web 开发者提供了丰富的工具库。诸如 map()、reduce()、filter()、some()、every() 等方法，已经在提升 JavaScript 逻辑和算法能力方面发挥了重要作用。而 with() 方法是 JavaScript 数组方法列表中相对较新的成员，其唯一目的是以“不可变”的方式更改数组中指定索引的值。

💡 请注意：不要将 JavaScript 数组的 with() 方法与 JavaScript 语言中的 with 语句混淆。with 语句已被弃用，而 with() 方法是该语言的新成员。

传统方式的查找与更改

让我们考虑一个数字数组：

const numbers = [1, 2, 3, 4, 5]; // 初始化一个包含数字的数组

如何更改数组中指定索引的元素？假设您需要将索引 2 处的元素（即数字 3，记住 JavaScript 数组索引从 0 开始）更改为新元素，例如 6。通常的本能反应是这样做：

numbers[2] = 6; // 直接通过索引赋值修改数组元素
console.log(numbers); // 输出: [1, 2, 6, 4, 5]

这确实有效！然而，这里存在一个问题：我们改变（或者说永久性更改）了原始数组。当您在应用程序中处理数据时，像数组这样的数据结构应该保持原始（未更改）数据作为“单一可信源”。您不会希望它被任何函数和逻辑修改，以实现代码更好的可预测性。

不可变性是一种强大的工具

不可变性是一种确保我们不能更改某些内容（数组、对象等）的机制。然而，如果我们需要它的修改版本，我们需要首先创建原始数据的副本，然后对复制的版本进行修改。这确保了原始数据不会被应用程序中的任何内容有意或无意地更改。

那么，如何以不可变的方式更改数组中指定索引的元素呢？这意味着每次我们更改数组中的元素时，我们不会改变原始数组，而是获得应用了更改的原始数组的新副本。

with() 方法与不可变性

ECMAScript 2023 引入了一个名为 with() 的新方法，以解决这种可变性问题，并在更改数组元素时实现不可变性。因此，现在我们可以使用 with() 方法来更改元素值，而不是直接在数组上使用给定索引。

with() 方法接受两个参数：

  • index - 索引值，可以从 0 开始，也可以是负数。负索引从数组末尾开始倒数。
  • value - 在给定索引处要更改的值。

现在让我们在同一个数组上应用 with() 方法来更改给定索引处的元素：

const numbers = [1, 2, 3, 4, 5]; // 原始数组
const newArray = numbers.with(2, 6); // 使用with()方法创建修改后的新数组

console.log(numbers); // 原始数组未改变 => [1, 2, 3, 4, 5]
console.log(newArray); // 已更改的新副本 => [1, 2, 6, 4, 5]

如您所见，with() 方法生成了应用了更改的原始数组的新副本。原始数组保持不变。

with() 方法与负索引

直接基于索引的元素查找的另一个缺点是，您不能使用负数作为索引值。尝试以下代码片段，您将得到 undefined：

numbers[-2]; // 输出: undefined

此外，尝试在负索引上设置值会产生意外结果：

const numbers = [1, 2, 3, 4, 5];
numbers[-2] = 8; // 在负索引上赋值

console.log(numbers); // 输出: [1, 2, 3, 4, 5, -2: 8]

您看到了吗？您最终添加了与预期完全不同的内容。但是，使用 with() 方法，您可以在负索引处更改数组的元素。负索引从数组末尾开始，索引值为 -1，并向后移动。

const numbers = [1, 2, 3, 4, 5];
const anotherArray = numbers.with(-2, 8); // 使用负索引-2（即倒数第二个元素）

console.log(anotherArray); // 输出: [1, 2, 3, 8, 5]

在上面的代码中，我们更改了数组中从末尾开始的第二个元素。因此，数组中的元素 4 被元素 8 替换。

您可以使用 JavaScript 数组的 at() 方法通过负索引读取元素：

anotherArray.at(-2); // 输出: 8

方法链式调用

由于 with() 方法返回一个数组，您可以将 with() 方法的输出与其他数组方法（如 map()、filter()、reduce() 等）链式调用。

在下面的代码片段中，我们将 ages 数组的第二个元素替换为新元素，然后将输出数组映射为每个元素乘以四：

const ages = [12, 23, 56]; // 原始数组
const mappedAges = ages.with(1, 32) // 将索引1处的元素替换为32
                      .map(x => x * 4); // 对每个元素乘以4

console.log(mappedAges); // 输出: [48, 128, 224]

案例

假设您正在开发一个任务管理应用程序，其中有一个任务数组，每个任务有一个状态。您需要更新特定任务的状态，但不希望改变原始任务数组，以保持历史记录的完整性。

const tasks = [
  { id: 1, title: '完成报告', status: '待处理' },
  { id: 2, title: '准备会议', status: '进行中' },
  { id: 3, title: '发送邮件', status: '待处理' }
];

// 使用with()方法更新索引1处的任务状态
const updatedTasks = tasks.with(1, { ...tasks[1], status: '已完成' });

console.log(tasks); // 原始数组保持不变
console.log(updatedTasks); // 新数组包含更新后的任务

在这个例子中，我们使用 with() 方法创建了一个新数组，其中特定任务的状态被更新，而原始任务数组保持不变。这对于实现撤销/重做功能或保持数据历史记录非常有用。

性能考虑

虽然不可变性带来了许多好处，但也需要考虑性能影响。每次使用 with() 方法都会创建一个新数组，这对于大型数组可能会导致内存使用增加。然而，在现代 JavaScript 引擎中，这种开销通常被优化得相当好，特别是在使用结构共享技术时。

// 性能测试示例
const largeArray = Array.from({ length: 10000 }, (_, i) => i); // 创建包含10000个元素的数组

console.time('with()方法性能');
const updatedLargeArray = largeArray.with(5000, 9999); // 修改中间元素
console.timeEnd('with()方法性能');

在实际应用中，您应该根据具体需求权衡不可变性的好处和性能成本。

浏览器兼容性和 polyfill

with() 方法是 ECMAScript 2023 的新特性，因此可能需要考虑浏览器兼容性。目前，所有现代浏览器都支持此方法，但对于旧版浏览器，您可能需要使用 polyfill。

// 简单的polyfill示例（不完全符合规范，但提供基本功能）
if (!Array.prototype.with) {
  Array.prototype.with = function(index, value) {
    const newArray = [...this]; // 创建数组副本
    newArray[index] = value; // 修改指定索引的值
    return newArray; // 返回新数组
  };
}

请注意，这只是一个基本实现，可能不处理负索引等边缘情况。在生产环境中，建议使用完整的 polyfill 库。

与其他不可变库的比较

JavaScript 生态系统中有几个著名的不可变数据库，如 Immutable.js 和 Immer。虽然 with() 方法提供了基本的不可变数组操作，但这些库提供了更全面的不可变数据结构和功能。

// 使用Immer库的示例
import { produce } from 'immer';

const originalArray = [1, 2, 3, 4, 5];
const newArray = produce(originalArray, draft => {
  draft[2] = 6; // 直接修改draft，但原始数组保持不变
});

console.log(originalArray); // [1, 2, 3, 4, 5]
console.log(newArray); // [1, 2, 6, 4, 5]

with() 方法的优势在于它是原生 JavaScript 功能，不需要额外依赖，并且与现有代码库集成更加无缝。

总结

JavaScript 数组的 with() 方法确实是一个瑰宝，它为我们提供了不可变性和负索引访问的能力。通过本文的深入探讨，我们了解了：

  • with() 方法允许以不可变的方式更改数组元素，保持原始数据的完整性
  • 支持负索引，从数组末尾开始访问元素
  • 可以与其他数组方法链式调用，创建强大的数据转换管道
  • 在实际应用中有多种用途，如状态管理和数据历史记录
  • 需要考虑性能影响和浏览器兼容性

不可变性是 JavaScript 开发中的重要概念，with() 方法为此提供了原生支持，使代码更加 predictable 和 maintainable。随着 JavaScript 语言的不断发展，我们可以期待更多这样有用的功能被添加进来。

最后更新: