了解 JavaScript 中的扩展运算符(...)
由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！
在今天的 JavaScript 强大功能介绍中，我们将重点介绍扩展运算符 ( ...) 或扩展语法。本文末尾附有我之前撰写的其他 JavaScript 概念和功能文章的链接列表。现在，让我们先来了解一下扩展运算符 ( ...)，看看它的作用以及如何使用它来编写更优秀的 JavaScript 代码。
扩展运算符（Spread syntax）是 JavaScript 的一项特性，它允许对对象和可迭代对象（例如数组和字符串）进行解包或展开，从而可以创建数据结构的浅拷贝，提高数据操作的便捷性。它通常与解构赋值结合使用。
Spread 运算符是用来做什么的？
该运算符可用于轻松执行许多常规任务。扩展运算符可用于执行以下操作：
-
复制数组
-
连接或合并数组
-
使用数学函数
-
使用数组作为参数
-
向列表中添加项目
-
组合物体
让我们来看每个用例的例子。
复制数组
使用扩展运算符可以方便地复制数组或合并数组，甚至可以添加新项。
const animals = ['🦁','🐘','🐈','🐕🦺','🐇']
const moreAnimals = [...animals];
console.log(moreAnimals) // Array(5) ['🦁','🐘','🐈','🐕🦺','🐇']
合并或连接数组
扩展运算符可用于快速合并两个数组。
const myArray = [1,2,3];
const yourArray = [4,5];
const ourArray = [...myArray,...yourArray];
console.log(ourArray); // Array(5) [ 1, 2, 3, 4, 5 ]
使用Math函数
我认为，理解扩展运算符的最佳方法是查看内置函数`Math.min()`和`Math.max()`，这两个函数都接受参数列表，而不是数组。假设你有一个数字数组，想要获取数组中的最小值或最大值，你需要使用 ` Math.min()`或`Math.max()`，但将数组传递给这些函数会返回 `None` NaN，这并非你想要的结果。正确的做法是使用 `( ...)` 运算符将数组展开为函数的参数列表，Math如下例所示：
const numbers = [28, -6, 19, 0]
console.log(Math.min(numbers)) // NaN
console.log(Math.min(...numbers)) // -6
console.log(Math.max(...numbers)) // 28
使用数组作为参数
您可以使用扩展运算符将数组转换为参数列表。请参见以下示例：
function sandwich(a, b, c) {
console.log(a); // '🍞'
console.log(b); // '🥬'
console.log(c); // '🥓'
}
const food = ['🍞', '🥬', '🥓'];
// Old way
sandwich.apply(null, food);
// ✅ ES6 way
sandwich(...food);
向列表中添加项目
扩展运算符可以使用自然、易于理解的语法将一个元素添加到另一个数组中：
const numbers = [1, 2, 3, 4]
const moreNumbers = [...numbers, 5, 6, 7, 8]
console.log(moreNumbers) // Array(8) [1, 2, 3, 4, 5, 6, 7, 8]
组合物体
注意看扩展运算符是如何将这两个对象组合在一起的：
const myVehicle = {
brand: 'Ford',
model: 'Mustang',
color: 'red'
}
const updateMyVehicle = {
type: 'car',
year: 2021,
color: 'yellow'
}
const myUpdatedVehicle = {...myVehicle, ...updateMyVehicle}
注意，不匹配的属性被合并了，但匹配的属性被
color传递的最后一个对象覆盖了updateMyVehicle。最终颜色现在是黄色。
结论
ES6 的出现不仅提高了 JavaScript 的效率，还引入了扩展运算符等诸多炫酷特性，让 JavaScript 开发变得更加有趣。以下是我在文章开头承诺的文章列表。
文章来源：https://dev.to/brandondamue/understanding-the-spread-operator-in-javascript-4pg6