JavaScript如何区分语法相同的扩展运算符与剩余运算符？

虽然两者语法都是...，但JS完全是根据使用场景来区分的，和操作变量的数据类型无关，具体分两种核心场景：

• 剩余运算符（Rest）：用在赋值或参数定义的接收端，作用是把多个分散的值打包成一个数组（或对象）

  • 函数参数中：比如function fn(a, ...rest) {}，...rest会把除第一个参数外的所有入参收集成数组
  • 解构赋值中：数组解构const [first, ...restArr] = [1,2,3,4]，...restArr将剩余元素打包为数组；对象解构const { name, ...restObj } = user，则把除name外的键值对打包为对象

• 扩展运算符（Spread）：用在值的输出/展开端，作用是把数组（或类数组、可迭代对象、对象）拆成单个独立值

  • 数组构建/拼接：const newArr = [1, ...oldArr, 5]，把oldArr的元素逐个插入新数组
  • 函数调用传参：fn(...[1,2,3])，将数组元素作为单独参数传递给函数
  • 对象合并：const newObj = { ...oldObj, age: 20 }，把oldObj的键值对逐个展开到新对象中

举个直观对比的代码示例：

// 剩余运算符：收集剩余值成数组
const [a, ...rest] = [1,2,3];
console.log(rest); // 输出 [2,3]

// 扩展运算符：展开数组元素
const newArr = [...rest, 4];
console.log(newArr); // 输出 [2,3,4]

总结来说：判断...是剩余还是扩展，只看它是在做“打包收集”还是“拆包展开”——处于接收端做打包就是剩余，处于输出端做拆包就是扩展，和操作的变量类型没有直接关系。

内容的提问来源于stack exchange，提问作者Jennifer