JavaScript 中的 Spread vs Rest 运算符

Source: Dev.to

最近，我写了很多后端代码，却一直对何时使用 展开运算符（spread operator）和何时使用 剩余运算符（rest operator）感到困惑。许多开发者也遇到同样的问题，所以在本文中，我将拆解它们的区别，展示常见的使用场景，并指出需要避免的典型错误。

需要讨论的主题

• rest 运算符的作用
• spread 运算符的作用
• spread 与 rest 的区别
• 何时使用每个运算符

剩余运算符

剩余运算符用于收集未显式列出的其余值。它常用于解构赋值和函数参数中。

示例（对象解构）

const user = {
  id: 1,
  name: "Kunal",
  email: "kunal@gmail.com",
  role: "admin",
  password: "secret"
};

// REST → extract password, collect the rest
const { password, ...safeUser } = user;

console.log(safeUser);

输出

// Password is extracted
{ id: 1, name: "Kunal", email: "kunal@gmail.com", role: "admin" }

剩余运算符出现在赋值的左侧，将其余属性收集到一个新对象（或在数组中使用时收集到新数组）中。

函数参数中的剩余运算符

function sum(first, ...rest) {
  return rest.reduce((total, n) => total + n, first);
}

console.log(sum(1, 2, 3, 4)); // 9

这里 ...rest 会把第一个参数之后的所有实参收集到一个数组中。

扩展运算符

扩展运算符会将可迭代对象（数组或对象）的元素“展开”（或“扩散”）到新的上下文中。它常用于复制或合并数据结构。

示例（对象合并）

const user = {
  id: 1,
  name: "Kunal",
  email: "kunal@gmail.com",
  role: "admin",
  password: "secret"
};

// SPREAD → 合并 / 更新对象
const updatedUser = {
  ...user,
  role: "user"
};

console.log(updatedUser);

输出

{
  id: 1,
  name: "Kunal",
  email: "kunal@gmail.com",
  role: "user",
  password: "secret"
}

扩展运算符放在赋值的右侧，展开已有数据，从而可以添加或覆盖属性。

与数组一起使用

const numbers = [1, 2, 3];
const moreNumbers = [...numbers, 4, 5];
console.log(moreNumbers); // [1, 2, 3, 4, 5]

Differences Between Spread and Rest

何时使用每个运算符

• Rest Operator – 当你需要将剩余项收集到数组或对象中时使用，例如：

  • 函数参数列表 (function fn(a, b, ...rest) {})
  • 解构赋值 (const { a, ...rest } = obj)

• Spread Operator – 当你想要复制或合并数据结构时使用，例如：

  • 创建数组/对象的浅拷贝 (const copy = [...original])
  • 合并多个数组或对象 (const merged = { ...obj1, ...obj2 })
  • 在函数调用中展开元素 (myFunc(...args))

感谢阅读！ 如果你喜欢这篇文章，欢迎探索更多相关主题的文章。