首页 > 文章 > 前端

JS中rest参数与展开运算符详解

时间：2025-09-27 15:52:27 163浏览收藏

掌握JavaScript中的`rest`参数与展开运算符，提升代码效率！本文深入解析JS中`rest`参数与展开运算符(...)的灵活应用。`rest`参数用于函数定义，可以将多个参数收集到一个数组中，简化函数参数处理，如`sum(...numbers)`。展开运算符则用于函数调用，能够将数组或对象拆解为单独的参数，方便地应用于`Math.max(...values)`等场景，还能轻松合并对象`{...user, age:26}`。理解并掌握`rest`参数与展开运算符，让你的JavaScript代码更简洁、更易读，但需要注意的是，它们只执行浅层复制或展开。

rest参数用于函数定义中收集剩余参数为数组，如sum(...numbers)；展开运算符用于函数调用时拆分数组或对象，如Math.max(...values)，以及合并对象{...user, age:26}，两者均只进行浅层操作。

JavaScript 的 rest 参数和展开运算符在函数定义和调用中有何灵活性？

JavaScript 的 rest 参数和展开运算符（spread operator）虽然写法相同，都是三个点 (...)，但用途不同，分别在函数定义和调用中提供了极大的灵活性。

函数定义中的 rest 参数：收集剩余参数

在函数定义中，rest 参数允许你将不确定数量的参数表示为一个数组。这让你可以轻松处理可变数量的传入参数。

例如：

function sum(...numbers) {
return numbers.reduce((total, num) => total + num, 0);
}

sum(1, 2, 3); // 返回 6
sum(4, 5); // 返回 9

这里 ...numbers 将所有传入的参数收集到一个名为 numbers 的数组中。rest 参数必须是函数参数列表中的最后一个。

函数调用中的展开运算符：拆分数组或对象

在函数调用时，展开运算符可以把数组“打散”成独立的参数，替代传统的 apply 方法。

例如：

const values = [1, 2, 3];
console.log(Math.max(...values)); // 输出 3

等价于 Math.max(1, 2, 3)。你也可以组合使用：

const moreValues = [0, ...values, 4]; // [0, 1, 2, 3, 4]

对象中的展开运算符：合并与复制

展开运算符也适用于对象，用于浅复制或合并对象。

const user = { name: 'Alice', age: 25 };
const updated = { ...user, age: 26, city: 'Beijing' };
// 结果：{ name: 'Alice', age: 26, city: 'Beijing' }

注意后面的属性会覆盖前面的同名属性。

基本上就这些。rest 参数让函数更灵活地接收参数，展开运算符让数据操作更简洁直观。两者结合使用，能大大提升代码的可读性和实用性。不复杂但容易忽略的是，它们只做一层浅展开，深层结构仍需手动处理。

今天关于《JS中rest参数与展开运算符详解》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！