JavaScript 数组 with() 方法

JavaScript with() 语法

with() 是 JavaScript 数组的一个方法，它用于将 “数组指定下标处的元素” 替换成 “另一个值”，然后返回一个新数组。

语法：

arr.with(index, value)

说明：

with() 方法可以接收 2 个参数。

• index（必选）：表示你想要替换元素的下标。
  • 如果 index 是负数，则表示从数组末尾开始计算索引。例如，-1 表示倒数第一个元素，-2 表示倒数第二个元素，以此类推。
  • 如果 index 超出数组的有效范围（即 index >= arr.length 或 index < -arr.length），则会抛出 RangeError 错误。
• value（必选）：被替换成的新值。

with() 方法会返回被替换后的数组。

JavaScript with() 摘要

JavaScript with() 示例

接下来，我们通过几个简单的例子来讲解一下 JavaScript with() 方法是如何使用的。

示例 1：with() 基本用法

const arr = ["红", "橙", "黄", "绿", "蓝"];
const result = arr.with(0, "red");

console.log(arr);
console.log(result);

运行结果如下。

[ '红', '橙', '黄', '绿', '蓝' ]
[ 'red', '橙', '黄', '绿', '蓝' ]

分析：

从结果可以看出，with() 方法不会修改原数组，而是返回被替换后的数组。arr.with(0, "red") 表示将下标 0 处的元素替换成 "red"。

示例 2：with() 链式调用其他数组方法

const arr = [1, 2, 3, 4, 5];
const result = arr.with(0, 10).map(x => x * x);
console.log(result);

运行结果如下。

[ 100, 4, 9, 16, 25 ]

分析：

由于 with() 方法本身会返回替换后的数组，我们可以链式使用其他数组方法。

“破坏性” 方法 vs “非破坏性” 方法

在 JavaScript 中，数组的 “破坏性” 方法以及它们对应的 “非破坏性” 方法，总结如下表所示。