本教程将讲解JavaScript中扩展运算符的多种用法，以及扩展运算符和剩余运算符的主要区别。
JavaScript扩展运算符用三个点(...)表示，在ES6中引入。它可以将集合和数组中的元素展开成单个元素。
扩展运算符可以用于创建和克隆数组和对象、将数组作为函数参数传递、删除数组中的重复项等等。
关键要点
语法
扩展运算符只能用于可迭代对象。它必须紧接在可迭代对象之前，没有任何分隔。例如：
console.log(...arr);
函数参数
以Math.min()方法为例。此方法至少接受一个数字作为参数，并返回传递的参数中最小的数字。
如果您有一个数字数组，并且想要找到这些数字的最小值，如果没有扩展运算符，您需要使用索引逐个传递元素，或者使用apply()方法将数组的元素作为参数传递。例如：
const numbers = [15, 13, 100, 20]; const minNumber = Math.min.apply(null, numbers); console.log(minNumber); // 13
请注意，第一个参数为null，因为第一个参数用于更改调用函数的this的值。
扩展运算符是将数组的元素作为参数传递给函数的一种更方便、更易读的解决方案。例如：
const numbers = [15, 13, 100, 20]; const minNumber = Math.min(...numbers); console.log(minNumber); // 13
您可以在此在线示例中看到：
创建数组
扩展运算符可以用于从现有数组或其他包含Symbol.iterator()方法的可迭代对象创建新数组。这些是可以使用for...of循环迭代的对象。
例如，它可以用于克隆数组。如果您只是将现有数组的值赋给一个新数组，那么对新数组进行更改将更新现有数组：
console.log(...arr);
通过使用扩展运算符，可以将现有数组克隆到一个新数组中，对新数组进行的任何更改都不会影响现有数组：
const numbers = [15, 13, 100, 20]; const minNumber = Math.min.apply(null, numbers); console.log(minNumber); // 13
需要注意的是，这只会克隆一维数组。它不适用于多维数组。
扩展运算符还可以用于将多个数组连接成一个数组。例如：
const numbers = [15, 13, 100, 20]; const minNumber = Math.min(...numbers); console.log(minNumber); // 13
您还可以将扩展运算符用于字符串，以创建一个数组，其中每个项目都是字符串中的一个字符：
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]
创建对象
扩展运算符可以以不同的方式用于创建对象。
它可以用于浅克隆另一个对象。例如：
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]
它还可以用于将多个对象合并成一个对象。例如：
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]
需要注意的是，如果对象共享相同的属性名称，则将使用最后一个扩展对象的属性值。例如：
const str = 'Hello, World!'; const strArr = [...str]; console.log(strArr); // ['H', 'e', 'l', 'l', 'o', ',', ' ', 'W', 'o', 'r', 'l', 'd', '!']
扩展运算符可以用于从数组创建对象，其中数组中的索引成为属性，该索引处的数值成为属性的值。例如：
const obj = { name: 'Mark', age: 20};
const clonedObj = { ...obj };
console.log(clonedObj); // {name: 'Mark', age: 20}它还可以用于从字符串创建对象，类似地，字符串中的索引成为属性，该索引处的字符成为属性的值。例如：
const obj1 = { name: 'Mark', age: 20};
const obj2 = { occupation: 'Student' };
const clonedObj = { ...obj1, ...obj2 };
console.log(clonedObj); // {name: 'Mark', age: 20, occupation: 'Student'}将NodeList转换为数组
NodeList是节点的集合，这些节点是文档中的元素。与数组不同，这些元素是通过集合中的方法（例如item或entries）访问的。
您可以使用扩展运算符将NodeList转换为数组。例如：
const obj1 = { name: 'Mark', age: 20};
const obj2 = { age: 30 };
const clonedObj = { ...obj1, ...obj2 };
console.log(clonedObj); // {name: 'Mark', age: 30}删除数组中的重复项
Set对象是一个只存储唯一值的集合。与NodeList类似，可以使用扩展运算符将Set转换为数组。
由于Set只存储唯一值，因此它可以与扩展运算符配对以删除数组中的重复项。例如：
const numbers = [15, 13, 100, 20];
const obj = { ...numbers };
console.log(obj); // {0: 15, 1: 13, 2: 100, 3: 20}扩展运算符与剩余运算符
剩余运算符也是一个三点运算符(...)，但它用于不同的目的。剩余运算符可以在函数的参数列表中使用，表示该函数接受未定义数量的参数。这些参数可以作为数组处理。
例如：
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: '!'}在此示例中，剩余运算符用作calculateSum函数的参数。然后，您遍历数组中的项目并将它们加起来以计算它们的总和。
然后，您可以将变量逐个作为参数传递给calculateSum函数，或者使用扩展运算符将数组的元素作为参数传递：
const nodeList = document.querySelectorAll('div');
console.log(nodeList.item(0)); // <div>...</div>
const nodeArray = [...nodeList];
console.log(nodeArray[0]); // <div>...</div>结论
扩展运算符允许您使用更少的代码行完成更多操作，同时保持代码的可读性。它可以用于可迭代对象，将参数传递给函数，或从其他可迭代对象创建数组和对象。
相关阅读:
JavaScript扩展运算符常见问题解答 (FAQs)
(此处应补充与原文FAQ内容相似的，但措辞不同的常见问题解答，保持内容一致性，并避免直接照搬原文)
以上是快速提示：如何在JavaScript中使用传播操作员的详细内容。更多信息请关注PHP中文网其他相关文章！
