跳转到主内容
极星编程网:以代码为星,赴技术山海!

javascript中的剩余参数和扩展运算符是什么?_它们分别用在什么场合?【教程】

剩余参数(...)用于函数形参末尾收集多余实参并生成真数组,扩展运算符(...)用于调用、赋值等场景展开可迭代对象;二者写法相同但位置与作用相反,混用将报错。 剩余参数(
...
)和扩展运算符(
...
)写法一样,但出现位置和作用完全不同——一个在函数形参里收尾,一个在调用或赋值时铺开;混用会直接报错或行为异常。 剩余参数:只出现在函数形参末尾,用来收集多余实参 它把调用时传入的、未被前面形参接收的参数,自动聚合成一个真数组。必须放在形参列表最后,且只能有一个。 常见错误现象:
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)
),就是“放”。这种设计让语法简洁,但也容易写反。 Eclipse导入Android或其他的JAVA项目的正确方法 WORD版 本文档主要讲述的是Eclipse导入Android或其他的JAVA项目的正确方法;希望本文档会给有需要的朋友带来帮助;感兴趣的朋友可以过来看看 下载 立即学习 “ Java免费学习笔记(深入) ”; 典型踩坑:想用剩余参数解构对象却写成
const {...rest} = obj;
—— 这是非法语法;对象解构要用
const {a, b, ...rest} = obj;
参数差异:剩余参数只适用于函数定义;扩展运算符可用于函数调用、数组/对象构造、
new
表达式(如
new Date(...args)
) 兼容性:两者均需 ES2015+ 环境;IE 完全不支持,Node. js 从 v6.0.0 起支持 真正容易被忽略的是:剩余参数收集的是“传入时未被绑定的实参”,而扩展运算符展开的是“运行时已存在的可迭代值”——它们不是互逆操作,只是共用同一个符号。写代码时盯住
...
左右两边是什么(变量声明?调用表达式?赋值目标?),比记概念更管用。

相关文章