JavaScript使用扩展运算符，由三个点 ( ...) 表示的 JavaScript 扩展运算符是在 ES6 中引入的。它可用于将集合和数组中的元素扩展为单个单独的元素。了解在 JavaScript 中使用扩展运算符的不同方式，以及扩展运算符和剩余运算符之间的主要区别。
由三个点 ( ...) 表示的 JavaScript 扩展运算符是在 ES6 中引入的。它可用于将集合和数组中的元素扩展为单个单独的元素。
展开运算符可用于创建和克隆数组和对象、将数组作为函数参数传递、从数组中删除重复项等。
句法
展开运算符只能用于可迭代对象。它必须在可迭代对象之前使用，没有任何分隔。例如：
|
1 |
console.log(...arr); |
函数参数
以Math.min()方法为例。此方法接受至少一个数字作为参数，并返回传递的参数中最小的数字。
如果你有一个数字数组并且你想找到这些数字中的最小值，没有扩展运算符你需要使用它们的索引一个一个地传递元素或者使用apply()方法传递元素数组作为参数。例如：
|
1 2 3 |
const numbers = [15, 13, 100, 20]; const minNumber = Math.min.apply(null, numbers); console.log(minNumber); // 13 |
请注意第一个参数是null，因为第一个参数用于更改this调用函数的值。
展开运算符是将数组元素作为参数传递给函数的更方便和可读的解决方案。例如：
|
1 2 3 |
const numbers = [15, 13, 100, 20]; const minNumber = Math.min(...numbers); console.log(numbers); // 13 |
创建数组
展开运算符可用于从现有数组或其他包含Symbol.iterator()方法的可迭代对象创建新数组。这些是可以使用for...of循环迭代的对象。
例如，它可用于克隆数组。如果您只是将现有数组的值分配给新数组，则对新数组进行更改将更新现有数组：
|
1 2 3 4 5 |
const numbers = [15, 13, 100, 20]; const clonedNumbers = numbers; clonedNumbers.push(24); console.log(clonedNumbers); // [15, 13, 100, 20, 24] console.log(numbers); // [15, 13, 100, 20, 24] |
通过使用扩展运算符，可以将现有数组克隆到一个新数组中，并且对新数组所做的任何更改都不会影响现有数组：
|
1 2 3 4 5 |
const numbers = [15, 13, 100, 20]; const clonedNumbers = [...numbers]; clonedNumbers.push(24); console.log(clonedNumbers); // [15, 13, 100, 20, 24] console.log(numbers); // [15, 13, 100, 20] |
应该注意的是，这只会克隆一维数组。它不适用于多维数组。
展开运算符也可用于将多个数组连接成一个。例如：
|
1 2 3 4 |
const evenNumbers = [2, 4, 6, 8]; const oddNumbers = [1, 3, 5, 7]; const allNumbers = [...evenNumbers, ...oddNumbers]; console.log(...allNumbers); //[2, 4, 6, 8, 1, 3, 5, 7] |
您还可以在字符串上使用扩展运算符来创建一个数组，其中每个项目都是字符串中的一个字符：
|
1 2 3 |
const str = 'Hello, World!'; const strArr = [...str]; console.log(strArr); // ['H', 'e', 'l', 'l', 'o', ',', ' ', 'W', 'o', 'r', 'l', 'd', '!'] |
创建对象
可以以不同的方式使用展开运算符来创建对象。
它可用于浅克隆另一个对象。例如：
|
1 2 3 |
const obj = { name: 'Mark', age: 20}; const clonedObj = { ...obj }; console.log(clonedObj); // {name: 'Mark', age: 20} |
它还可用于将多个对象合并为一个。例如：
|
1 2 3 4 |
const obj1 = { name: 'Mark', age: 20}; const obj2 = { occupation: 'Student' }; const clonedObj = { ...obj1, ...obj2 }; console.log(clonedObj); // {name: 'Mark', age: 20, occupation: 'Student'} |
需要注意的是，如果对象共享相同的属性名称，则将使用最后一个对象传播的值。例如：
|
1 2 3 4 |
const obj1 = { name: 'Mark', age: 20}; const obj2 = { age: 30 }; const clonedObj = { ...obj1, ...obj2 }; console.log(clonedObj); // {name: 'Mark', age: 30} |
展开运算符可用于从数组创建对象，其中数组中的索引成为属性，该索引处的值成为属性的值。例如：
|
1 2 3 |
const numbers = [15, 13, 100, 20]; const obj = { ...numbers }; console.log(obj); // {0: 15, 1: 13, 2: 100, 3: 20} |
它还可用于从字符串创建对象，其中，类似地，字符串中的索引成为属性，该索引处的字符成为属性的值。例如：
|
1 2 3 |
const str = 'Hello, World!'; const obj = { ...str }; console.log(obj); // {0: 'H', 1: 'e', 2: 'l', 3: 'l', 4: 'o', 5: ',', 6: ' ', 7: 'W', 8: 'o', 9: 'r', 10: 'l', 11: 'd', 12: '!'} |
将 NodeList 转换为数组
NodeList是节点的集合，节点是文档中的元素。元素是通过集合中的方法访问的，例如itemor entries，这与数组不同。
您可以使用扩展运算符将 NodeList 转换为数组。例如：
|
1 2 3 4 |
const nodeList = document.querySelectorAll('div'); console.log(nodeList.item(0)); // <div>...</div> const nodeArray = [...nodeList]; console.log(nodeList[0]); // <div>...</div> |
从数组中删除重复项
Set对象是仅存储唯一值的集合。与 NodeList 类似，可以使用展开运算符将 Set 转换为数组。
由于 Set 仅存储唯一值，因此它可以与扩展运算符配对以从数组中删除重复项。例如：
|
1 2 3 4 |
const duplicatesArr = [1, 2, 3, 2, 1, 3]; const uniqueArr = [...new Set(duplicatesArr)]; console.log(duplicatesArr); // [1, 2, 3, 2, 1, 3] console.log(uniqueArr); // [1, 2, 3] |
Spread运算符与Rest运算符
rest运算符也是一个三点运算符（…），但它的用途不同。rest运算符可以在函数的参数列表中使用，表示此函数接受未定义数量的参数。这些参数可以作为数组处理。
例如：
|
1 2 3 4 5 6 7 8 |
function calculateSum(...funcArgs) { let sum = 0; for (const arg of funcArgs) { sum += arg; } return sum; } |
在此示例中，rest 运算符用作calculateSum函数的参数。然后，循环遍历数组中的项目并将它们相加以计算它们的总和。
然后，您可以将变量calculateSum作为参数一个一个地传递给函数，或者使用展开运算符将数组元素作为参数传递：
|
1 2 3 |
console.log(calculateSum(1, 2, 3)); // 6 const numbers = [1, 2, 3]; console.log(calculateSum(...numbers)); // 6 |
结论
展开运算符允许您用更少的代码行做更多的事情，同时保持代码的可读性。它可用于可迭代对象以将参数传递给函数，或从其他可迭代对象创建数组和对象。
