剩余参数与扩展运算符使用教程

欢迎各位小伙伴来到golang学习网，相聚于此都是缘哈哈哈！今天我给大家带来《剩余参数与扩展运算符详解【教程】》，这篇文章主要讲到等等知识，如果你对文章相关的知识非常感兴趣或者正在自学，都可以关注我，我会持续更新相关文章！当然，有什么建议也欢迎在评论留言提出！一起学习！

剩余参数（...）用于函数形参末尾收集多余实参并生成真数组，扩展运算符（...）用于调用、赋值等场景展开可迭代对象；二者写法相同但位置与作用相反，混用将报错。

剩余参数（...）和扩展运算符（...）写法一样，但出现位置和作用完全不同——一个在函数形参里收尾，一个在调用或赋值时铺开；混用会直接报错或行为异常。

剩余参数：只出现在函数形参末尾，用来收集多余实参

它把调用时传入的、未被前面形参接收的参数，自动聚合成一个真数组。必须放在形参列表最后，且只能有一个。

• 常见错误现象：function fn(a, ...rest, b) {} 会语法报错，因为 ...rest 不能在其他形参之后
• 使用场景：封装可变参数函数，比如日志函数、求和函数、代理函数
• 和 arguments 的关键区别：...rest 是真正的 Array，能直接用 .map()、.filter()；arguments 是类数组，需转才能用

function sum(...nums) {
  return nums.reduce((a, b) => a + b, 0);
}
sum(1, 2, 3); // 6

扩展运算符：出现在函数调用、数组字面量、对象字面量中，用来“展开”可迭代值

它把一个数组、字符串、Map、Set 或其他可迭代对象，逐项“摊开”成独立元素。不能单独存在，必须有上下文接收这些展开项。

• 常见错误现象：const arr = ...[1,2,3]; 语法错误——缺少接收位置；正确写法是 const arr = [...[1,2,3]];
• 使用场景：
  • 合并数组：[...a, ...b]
  • 浅拷贝数组：[...arr]
  • 函数调用传参：Math.max(...numbers)
  • 构造新对象并覆盖属性：{...obj, name: 'new'}
• 性能注意：对大数组做 [...arr] 会新建数组并复制所有元素，不是引用；若只需遍历，优先用 for...of 或 arr.values()

为什么 ... 在不同位置语义翻转？

JavaScript 引擎靠上下文判断：... 左边是变量名（如 function f(...args)），就是“收”；... 右边是表达式（如 f(...arr)），就是“放”。这种设计让语法简洁，但也容易写反。

• 典型踩坑：想用剩余参数解构对象却写成 const {...rest} = obj; —— 这是非法语法；对象解构要用 const {a, b, ...rest} = obj;
• 参数差异：剩余参数只适用于函数定义；扩展运算符可用于函数调用、数组/对象构造、new 表达式（如 new Date(...args)）
• 兼容性：两者均需 ES2015+ 环境；IE 完全不支持，Node.js 从 v6.0.0 起支持

真正容易被忽略的是：剩余参数收集的是“传入时未被绑定的实参”，而扩展运算符展开的是“运行时已存在的可迭代值”——它们不是互逆操作，只是共用同一个符号。写代码时盯住 ... 左右两边是什么（变量声明？调用表达式？赋值目标？），比记概念更管用。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~