JavaScript - Array.with() 方法

在 JavaScript 中，Array.with() 方法用於更新陣列中的特定元素。它接受兩個引數：“index”，即要更新的元素的索引，以及“value”，即要在給定index處分配的新值。此方法不會更改原始陣列；相反，它返回一個包含已更新元素的新陣列。

Array.with() 方法由 ES2023 新增，作為一種安全可靠的方式來修改陣列元素，而不會更改原始陣列。

語法

以下是 JavaScript Array.with() 方法的語法：

arrayInstance.with(index, value)

引數

此方法接受兩個引數。下面描述了相同的內容：

index - 將替換value的索引位置。
- 如果我們提供負索引，它將從陣列末尾開始計數。
- 如果提供的索引超出範圍，將丟擲RangeError。
value - 要在給定索引處分配的值。

返回值

此方法返回一個新陣列，其中索引處的元素被替換為 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

在此示例中，我們首先將索引 2 處的值更新為元素“6”，然後我們將更新後的陣列中的每個元素乘以“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

列印頁面