什么是 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>
它将产生以下结果 -
您还可以更改数组的串联顺序。
用于克隆数组的 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,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,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>
它将产生以下结果 -
{"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 运算符。
