JavaScript 的扩展运算符 (…) 允许我们将可迭代对象（如数组）的元素展开。扩展运算符用三个点 (…) 表示。此运算符是在 ES6 中引入的。扩展运算符的主要用途包括复制数组元素、拼接数组或对象以及处理剩余参数等。
让我们来看一个展开数组元素的例子：
let x = ["Tutorials", "Point"];
console.log(x);
console.log(...x);
使用扩展运算符拼接数组
JavaScript 的扩展运算符可以用来拼接数组。
示例
在下面的例子中，我们定义了两个不同的数组。之后，我们使用扩展运算符来拼接这些数组。
<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
你也可以改变数组拼接的顺序。
使用扩展运算符克隆数组
在 JavaScript 中，当我们把一个数组（对象）赋值给另一个数组时，默认情况下赋值的是引用而不是克隆数组。所以当你更新原数组时，也会更新克隆后的数组。赋值运算符会创建一个数组的深拷贝。
示例：不使用扩展运算符
在这个例子中，我们定义了一个名为 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
示例：使用扩展运算符克隆数组
使用扩展运算符来克隆数组会创建一个真正的数组副本，这样当你修改原数组时，克隆后的数组不会受到影响。你可以看到，即使改变了 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"}
函数剩余参数
当你需要传递未知数量的参数到函数中时，可以使用扩展运算符与函数参数一起，这种参数称为剩余参数。
这里你可以看到我们传递了多个数字作为函数参数，并且除了第一个参数外，使用扩展运算符收集了所有的参数到 nums[] 数组中。
<html>
<body>
<div id = "result"></div>
<script>
function sum(a, ...nums) {
let total = a;
for (let i = 0; i < nums.length; i++) {
total += nums[i];
}
document.getElementById("result").innerHTML = total;
}
sum(3, 6, 9, 8, 6, 5, 3, 3, 2, 1);
</script>
</body>
</html>
这将产生以下结果：
46
你也可以使用扩展运算符来展开字符串成字符数组、克隆字符串或拼接字符串。此外，在 JavaScript 中，集合（set）、映射（map）等也是可迭代对象，因此也可以使用扩展运算符。