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

小伙伴们对文章编程感兴趣吗？是否正在学习相关知识点？如果是，那么本文《剩余参数与扩展运算符详解【教程】》，就很适合你，本篇文章讲解的知识点主要包括。在之后的文章中也会多多分享相关知识点，希望对大家的知识积累有所帮助！

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

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

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

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

• 常见错误现象：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学习网公众号！