1. 首页
  2. JavaScript 菜鸟教程
  3. JavaScript - Array.with() 方法

JavaScript - Array.with() 方法

在 JavaScript 中，Array.with（） 方法用于更新数组中的特定元素。它需要两个参数：“index”，这是要更新的元素的索引，“value”，这是要在给定索引处分配的新值。此方法不会更改原始数组;相反，它会返回一个包含更新元素的新数组。

ES2023 添加了 Array.with（） 方法，作为一种在不更改原始数组的情况下修改数组元素的安全方法。

语法

以下是 JavaScript Array.with（） 方法的语法 -

 arrayInstance.with(index, value)

参数

此方法接受两个参数。下面描述相同 -

  • index − 将替换该值的索引位置。 如果我们提供负索引，则从数组的末尾开始计数。 如果提供的索引超出范围，将引发 RangeError。
  • value - 要在给定索引处分配的值。

返回值

此方法返回一个新数组，其中 element at index 替换为 value。

示例 1

在以下示例中，我们使用 JavaScript Array.with（） 方法将索引 2 处的元素替换为提供的值“qikepu”。

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

输出

11,22,qikepu,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, "qikepu"); // [2, undefined, 4, qikepu, 6]
	 	 	 document.write(result);
	 	</script>
</body>
</html>

输出

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

2,,4,qikepu,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
<< JavaScript - Array.values() 方法 JavaScript - Array includes() 方法 >>