## 扩展语法与其余参数：有什么区别以及它们如何工作？

理解 ES2015 / ES6 中的扩展语法和剩余参数

ES2015 的引入引入了两种新语法，扩展语法和剩余参数，促进 JavaScript 中灵活的数据处理。虽然两者表面上类似于省略号运算符，但它们具有不同的用途。

扩展语法

扩展语法，由三个点 (...var) 表示，扩展了一个可迭代 (例如数组）分解为各个元素。主要用于三种场景：

• 组合数组：将多个数组合并为一个数组：

  <code class="js">var abc = ['a', 'b', 'c'];
  var def = ['d', 'e', 'f'];
  var alpha = [ ...abc, ...def ];
  console.log(alpha); // alpha == ['a', 'b', 'c', 'd', 'e', 'f']</code>

• 将参数传递给函数：将参数数组传播到函数参数上：

  <code class="js">function sum(...args) {
  return args.reduce((total, val) => total + val, 0);
  }
  const values = [1, 2, 3, 4];
  console.log(sum(...values)); // 10</code>

• 创建浅对象副本：扩展对象键插入新对象：

  <code class="js">const person1 = { name: 'John', age: 30 };
  const person2 = { ...person1, city: 'New York' };</code>

剩余参数

与扩展语法不同，剩余参数仅在函数定义中使用。它们由三个点和一个变量名 (...var) 表示。其余参数将不定数量的参数收集到数组中。

<code class="js">function logRest(...args) {
  console.log(args); // args == [ 'a', 'b', 'c', 'd', 'e' ]
}
logRest('a', 'b', 'c', 'd', 'e');</code>

主要区别

• 用法：扩展语法扩展数组，而其余​​参数则收集参数。
• 上下文：扩展语法用于表达式中，而其余参数用于函数定义中。
• 输出 ：扩展语法生成单个元素，而剩余参数生成数组。

结论

扩展语法和剩余参数增强了 JavaScript 的数据操作能力，提供了便捷的方法创建新数组、传播参数以及收集函数中的参数。了解它们的不同用途使开发人员能够有效地利用这些语法来提高代码灵活性和简洁性。

以上是## 扩展语法与其余参数：有什么区别以及它们如何工作？的详细内容。更多信息请关注PHP中文网其他相关文章！