首页 > 文章 > 前端

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

时间：2025-10-21 20:17:01 203浏览收藏

掌握 JavaScript 中 rest 参数与展开运算符，让你的代码更简洁高效！本文深入解析 JS 中 `...` 的妙用：**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学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！