JavaScript - 展开运算符
什么是展开运算符？
JavaScript 的 spread 运算符（...）允许我们展开可迭代对象（如 array）的元素。展开运算符用三个点（...）表示。该运算符在 ES6 中引入。展开运算符的主要用例包括复制 array 元素、连接 arrays 或 objects 与 rest parameters 等。
让我们通过一个例子来展开 array 的元素
let x = ["Tutorials", "Point"]; console.log(x); // [ 'Tutorials', 'Point' ] console.log(...x); // Tutorials Point
使用展开运算符连接 Arrays
JavaScript 展开运算符可用于连接 arrays。
示例
在下面的示例中，我们定义了两个不同的 arrays。然后，我们使用展开运算符来连接这些 arrays。
<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
您也可以更改 array 的连接顺序。
使用展开运算符克隆 Array
在 JavaScript 中，当我们将一个 array（object）赋值给另一个 array 时，它赋值的是引用而不是克隆 array。因此，每当您更新原始 array 时，克隆的 array 也会更新。赋值运算符创建 array 的 deep copy。
示例：不使用展开运算符
在这个示例中，我们定义了一个名为 nums1 的 array。我们定义了另一个名为 nums2 的 array，并将 array nums1 赋值给 array 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
示例：使用展开运算符克隆 Arrays
使用展开运算符克隆 array 会创建一个实际的 array 副本，当您对原始 array 进行更改时，克隆的 array 不会改变。这里，您可以看到即使更改 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
使用扩展运算符连接对象
你可以使用扩展运算符将对象属性复制到另一个对象中。这里，将 'car' 对象视为父对象，它包含所有汽车的相似属性。然后，创建 '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 parameter。
这里，你可以看到我们传递了多个数字作为函数参数，并使用扩展运算符将除第一个参数外的所有参数收集到 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>
它将产生以下结果 −
46
你还可以使用扩展运算符将字符串展开为字符数组、克隆字符串或连接字符串。此外，set、map 等也是 JavaScript 中的可迭代对象。因此，你可以与它们一起使用扩展运算符。