快速提示：如何在JavaScript中使用传播操作员

本教程将讲解JavaScript中扩展运算符的多种用法，以及扩展运算符和剩余运算符的主要区别。

JavaScript扩展运算符用三个点(...)表示，在ES6中引入。它可以将集合和数组中的元素展开成单个元素。

扩展运算符可以用于创建和克隆数组和对象、将数组作为函数参数传递、删除数组中的重复项等等。

关键要点

• JavaScript扩展运算符用三个点(...)表示，在ES6中引入，可以将集合和数组中的元素展开成单个元素。它可以用于创建和克隆数组和对象、将数组作为函数参数传递、删除数组中的重复项等等。
• 扩展运算符可以用于克隆数组和对象、连接数组、将NodeList转换为数组以及删除数组中的重复项。但是，需要注意的是，它只执行浅拷贝，这意味着它只复制顶层元素或属性。如果数组或对象包含其他数组或对象，则这些数组或对象是通过引用复制的，而不是通过值复制的。
• 扩展运算符与剩余运算符不同，尽管两者都使用三个点(...)相同的语法。剩余运算符可以在函数的参数列表中使用，表示该函数接受未定义数量的参数，这些参数可以作为数组处理。

语法

扩展运算符只能用于可迭代对象。它必须紧接在可迭代对象之前，没有任何分隔。例如：

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

您可以在此在线示例中看到：

查看CodePen上的示例

创建数组

扩展运算符可以用于从现有数组或其他包含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中的缺失数学方法
• 快速提示：如何在JavaScript中排序对象数组
• 如何在JavaScript中使用for循环
• 快速提示：测试字符串是否与JavaScript中的正则表达式匹配
• 《JavaScript：从新手到忍者》

JavaScript扩展运算符常见问题解答 (FAQs)

(此处应补充与原文FAQ内容相似的，但措辞不同的常见问题解答，保持内容一致性，并避免直接照搬原文)

以上是快速提示：如何在JavaScript中使用传播操作员的详细内容。更多信息请关注PHP中文网其他相关文章！