JavaScript 不断更新，不断完善，ES6+ 也带来了强大的工具，让编码更简单。展开运算符和剩余运算符看起来可能相同...，但它们的工作方式不同。展开运算符用于扩展数组和对象，而剩余运算符则用于将多个值集中到一个地方。对于初学者来说，学习这些运算符将使代码更易于理解和清晰。
您将学到什么
扩展运算符和剩余运算符之间的区别。
如何扩展数组和对象。
rest 如何将多个值收集到数组中。
项目中使用的真实示例。
JavaScript 中的扩展运算符
扩展运算符将数组或对象内的项目“展开”。
数组示例：
const num = [1, 2, 3]; const newNum = [...num, 4, 5]; console.log(newNum); // [1, 2, 3, 4, 5]
这使得复制数组或合并数组变得容易。
真实示例：
假设您有一个购物车，并在其中包含其他产品。
const cart = ["apple", "banana"]; const newItems = ["orange", "mango"]; const updatedCart = [...cart, ...newItems]; console.log(updatedCart); // ["apple", "banana", "orange", "mango"]
扩展运算符可帮助您快速将旧购物车与新商品组合。
JavaScript 中的 Rest 运算符
剩余运算符则相反。它接受多个值并将它们分组到一个数组中。
函数示例：
function sum(...numbers) {
return numbers.reduce((total, num) => total + num, 0);
}
console.log(sum(1, 2, 3, 4));
// 10在这个例子中，rest 将所有数字组合成一个数组，这使得对它们进行求和变得简单。
真实示例：
想象一下，您正在构建一个需要跟踪分数的游戏。
function logScores(player, ...scores) {
console.log(`${player}'s scores:`, scores);
}
logScores("Wisdom", 10, 20, 30, 40);
// Wisdom's scores: [10, 20, 30, 40]其余运算符将所有分数收集到一个数组中，使其更易于使用。
Spread 和 Rest 如何协同工作
尽管展开和休息都使用三个点 ( ...)，但它们的工作方式相反。展开用于展开元素，而休息用于收集元素。它们结合起来，使得处理数组、对象和函数参数更加灵活和强大。
关键要点
Spread( ...) 将数组或对象分解为单独的项目。
Rest( ...) 收集几个值并将它们放入一个数组中。
Spread 对于复制和合并数据很有用。
Rest 对于处理多个函数参数很有用。
这两个运算符都可以提高 JavaScript 代码的可读性和结构。
结论
展开运算符和余数运算符是 JavaScript 中简单却强大的功能。展开运算符可用于复制或合并数据，而余数运算符可用于将多个值合并到一个变量中。在实际应用中，例如将商品添加到购物车或收集游戏分数，这些工具可以使您的代码更简洁、更快速、更易于维护。
通过经常练习，您将能够更轻松地编写看起来专业且易于理解的现代 JavaScript。