当前位置：首页 > 文章列表 > 文章 > 前端 > JS剩余参数与展开运算符详解

JS剩余参数与展开运算符详解

2025-12-20 21:23:47 0浏览收藏

推广推荐

支持 PC / 移动端，安全直达

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

剩余参数将多个参数收集成数组，简化可变参处理；展开运算符则用于展开数组或对象，两者结合提升JS函数与数据操作灵活性。

JS函数如何定义剩余参数_JS函数剩余参数定义与展开运算符使用

在JavaScript中，剩余参数（Rest Parameters）是一种将多个参数收集到一个数组中的方式，让函数可以更灵活地处理不确定数量的参数。它使用三个点 (...) 语法来定义，与展开运算符（Spread Operator）形式相同，但用途不同。

剩余参数的定义方式

剩余参数允许你将函数最后的若干个参数表示为一个数组。语法是在函数参数名前加上 ...：

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

sum(1, 2, 3, 4); // 返回 10
sum(5, 10); // 返回 15

在这个例子中，...numbers 将所有传入的参数收集为一个数组，因此可以用数组方法如 reduce、map 等进行操作。

注意：函数中只能有一个剩余参数，且必须放在参数列表的末尾。

剩余参数与 arguments 的区别

在ES6之前，常用 arguments 对象获取函数的所有参数。但它不是真正的数组，不能直接调用数组方法。

function oldSum() {
const args = Array.from(arguments);
return args.reduce((a, b) => a + b, 0);
}

而剩余参数直接提供数组，无需转换，使用更方便、语义更清晰。

展开运算符的使用场景

虽然剩余参数用于“收拢”参数，展开运算符则是“展开”数组或对象元素。常用于函数调用时传参：

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

也可以用于合并数组或对象：

const arr1 = [1, 2];
const arr2 = [...arr1, 3, 4]; // [1, 2, 3, 4]

const obj = { a: 1 };
const newObj = { ...obj, b: 2 }; // { a: 1, b: 2 }

结合使用：剩余参数与展开运算符

在实际开发中，两者经常配合使用。例如，封装一个日志函数，保留前几个参数，其余作为数据数组处理：

function log(level, ...messages) {
console.log(`[${level}]`, ...messages);
}

log('ERROR', 'File not found', 'Retry failed');
// 输出: [ERROR] File not found Retry failed

这里，...messages 收集参数，而 ...messages 在 console.log 中又被展开传递。

基本上就这些。剩余参数简化了可变参数的处理，展开运算符提升了数组和对象的操作效率，两者都是现代JS开发中不可或缺的特性。

本篇关于《JS剩余参数与展开运算符详解》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！

JS函数如何定义

美团外卖换支付方式步骤详解

上一篇: 美团外卖换支付方式步骤详解

下一篇: 无需编码，AI工具Make.com打造智能代理

查看更多