JavaScript - Spread 运算符

什么是 Spread 运算符？

JavaScript 展开（Spread）运算符（...） 允许我们展开可迭代对象的元素，例如数组。展开运算符用三个点（...）表示。这是在 ES6 中引入的运算符。spread 运算符的主要用例是复制数组元素、使用 rest 参数连接数组或对象等。

让我们举个例子来扩展数组的元素 –


let x = ["qikepu", "com"];
console.log(x); // [ 'qikepu', 'com' ]
console.log(...x); // qikepu com

用于连接数组的 Spread 运算符

JavaScript Spread 运算符可用于连接数组。

例

在下面的示例中，我们定义了两个不同的数组。之后，我们使用 spread 运算符来连接这些数组。


<html>
<body>
	 	<div id = "output"></div>
	 	<script>
	 	 	 const nums1 = [10, 20, 30];
	 	 	 const nums2 = [40, 50, 60];
	 	 	 const res = [...nums1, ...nums2];
	 	 	 document.getElementById("output").innerHTML = res;
	 	</script>
</body>
</html>

它将产生以下结果 -

10,20,30,40,50,60

您还可以更改数组的串联顺序。

用于克隆数组的 Spread 运算符

在 JavaScript 中，当我们将一个数组（对象）分配给另一个数组时，它会分配引用而不是克隆数组。因此，无论何时更新原始数组，它也会更新克隆的数组。assignement 运算符创建数组的深层副本。

示例：不使用 Spread 运算符

在此示例中，我们定义了一个名为 nums1 的数组。我们定义另一个名为 nums2 的数组，并将数组 nums1 分配给数组 nums2。在这里，你可以看到，当你更改 nums1 时，它也会更新 nums2。


<html>
<body>
	 	<div id = "result1"></div>
	 	<div id = "result2"></div>
	 	<script>
	 	 	 const nums1 = [10, 20, 30];
	 	 	 const nums2 = nums1;
	 	 	 document.getElementById("result1").innerHTML = nums2;
	 	 	 nums1.push(40);
	 	 	 document.getElementById("result2").innerHTML = nums2;
	 	</script>
</body>
</html>

它将产生以下结果 -

10,20,30
10,20,30,40

示例：使用 Spread 运算符克隆数组

使用展开运算符克隆数组会创建数组的实际副本，并且当您更改原始数组时，克隆的数组不会更改。在这里，您可以看到即使您更改 nums1 也不会更新 nums3。


<html>
<body>
	 	<div id = "result1"></div>
	 	<div id = "result2"></div>
	 	<script>
	 	 	 const nums1 = [10, 20, 30];
	 	 	 const nums3 = [...nums1];
	 	 	 document.getElementById("result1").innerHTML = nums3;
	 	 	 nums1.push(50);
	 	 	 document.getElementById("result2").innerHTML = nums1 + "<br>";
	 	 	 document.getElementById("result2").innerHTML += nums3;
	 	</script>
</body>
</html>

它将产生以下结果 -

10,20,30
10,20,30,50
10,20,30

用于连接对象的 Spread 运算符

您可以使用展开运算符将对象属性复制到另一个对象中。在这里，将 'car' 对象视为包含与所有 cars 相似属性的父对象。之后，创建表示特定汽车的 'BMW' 对象，并将 'car' 对象的所有属性与 'BMW' 对象的属性连接起来。


<html>
<body>
	 	<div id = "result1"></div>
	 	<div id = "result2"></div>
	 	<script>
	 	 	 const car = {
	 	 	 	 	gears: 6,
	 	 	 	 	color: "Black"
	 	 	 }
	 	 	 document.getElementById("result1").innerHTML = JSON.stringify(car);
	 		
	 	 	 const BMW = {
	 	 	 	 	model: "X5",
	 	 	 	 	year: 2019,
	 	 	 	 	...car,
	 	 	 }
	 	 	 document.getElementById("result2").innerHTML = JSON.stringify(BMW);
	 	</script>
</body>
</html>

它将产生以下结果 -

{"gears":6,"color":"Black"}
{"model":"X5","year":2019,"gears":6,"color":"Black"}

函数 Rest 参数

当您需要向函数传递未知数量的参数时，可以将扩展运算符与函数参数一起使用，称为 rest 参数。

在这里，你可以看到我们传递了多个数字作为函数参数，并使用展开运算符收集了 nums[] 数组中除第一个参数之外的所有参数。


<html>
<body>
	 	<div id = "result"></div>
	 	<script>
		
	 	 	 function sum(a, ...nums) {
	 	 	 	 	let sum = a;
	 	 	 	 	for (let i = 0; i < nums.length; i++) {
	 	 	 	 	 	 sum += nums[i];
	 	 	 	 	}
	 	 	 	 	document.getElementById("result").innerHTML = sum;
	 	 	 }

	 	 	 sum(3, 6, 9, 8, 6, 5, 3, 3, 2, 1);

	 	</script>
</body>
</html>

它将产生以下结果 -

您还可以使用 spread 运算符将字符串扩展为字符数组、克隆字符串或连接字符串。此外，set、map 等是 JavaScript 中的可迭代对象。因此，您可以对它们使用 spread 运算符。

打印本页