JavaScript - 数组 with() 方法

在 JavaScript 中，Array.with() 方法用于更新数组中的特定元素。它接受两个参数:"index"，即待更新元素的索引;以及"value"，即要赋给给定 index 的新值。此方法不会更改原始数组;而是返回一个包含更新后元素的新数组。

Array.with() 方法是 ES2023 新增的，它是一种安全可靠的方法，可以在不更改原始数组的情况下修改数组元素。

语法

以下是 JavaScript Array.with() 方法的语法 -

arrayInstance.with(index, value)

参数

此方法接受两个参数。具体说明如下 -

• index - 将替换 value 的索引位置。
  • 如果提供的索引为负数，则从数组末尾开始计数。
  • 如果提供的索引超出范围，则会抛出 RangeError。
• value − 指定索引处要赋的值。

返回值

此方法返回一个新数组，其中索引处的元素被替换为值。

示例

示例 1

在下面的示例中，我们使用 JavaScript Array.with() 方法将索引 2 处的元素替换为提供的值"Tutorialspoint"。

<html>
<body>
   <script>
      let numbers = [11, 22, 44, 55];
      let result = numbers.with(2, "Tutorialspoint");
      document.write(result);
   </script>
</body>
</html>

输出

11,22,Tutorialspoint,55

示例 2

在此示例中，我们首先使用元素"6"更新索引 2 处的值，然后将更新后的数组中的每个元素乘以"2"。

<html>
<body>
   <script>
      let numbers = [2, 3, 4, 5];
      let result = numbers.with(2, 6).map((x) => x*2);
      document.write(result);
   </script>
</body>
</html>

输出

4,6,12,10

示例 3

在下面的示例中，我们在稀疏数组上使用 with() 方法。

<html>
<body>
   <script>
      let numbers = [2, , 4, , 6];
      let result = numbers.with(3, "Tutorix"); // [2, undefined, 4, Tutorix, 6]
      document.write(result);
   </script>
</body>
</html>

输出

正如我们在输出中看到的，索引 3 中的空值被替换为"Tutorix"。

2,,4,Tutorix,6

示例 4

如果 (索引) 大于或等于数组的长度，或者 (索引) 小于数组的负长度，则会抛出"RangeError"。

<html>
<body>
   <script>
      let numbers = [2, 3, 4, 5, 6];
      try {
         numbers.with(10, "Tutorix");
      } catch (error) {
         document.write(error);
      }
   </script>
</body>
</html>

如果我们执行上述程序，它将给出"RangeError"，因为我们提供的索引号大于数组长度。

输出

RangeError: Invalid index : 10