JavaScript Rest 参数:新手也能轻松掌握的进阶技巧!

一、Rest参数核心语法与特性

1. 基础定义规则

javascript 复制代码
function sum(num1, num2, ...restParams) {
  console.log(restParams); // [3,4,5]
}
sum(1,2,3,4,5);

必须末位声明 :Rest参数必须是最后一个形参,否则触发SyntaxError

自动数组转换 :未匹配的剩余参数自动转为数组,无参数时返回空数组

单函数唯一性:每个函数仅允许一个Rest参数


二、实战应用场景

1. 可变参数处理(替代arguments)

javascript 复制代码
// 传统方式
function legacySum() {
  return Array.from(arguments).reduce((a,b) => a+b);
}

// Rest参数方案
function modernSum(...nums) {
  return nums.reduce((a,b) => a+b); 
}

优势:无需手动转换数组,支持map/filter等链式操作

2. 函数参数转发

javascript 复制代码
function proxyFunc(...args) {
  targetFunc(...args); // 透传所有参数
}

3. 解构黑科技

javascript 复制代码
// 数组解构
const [head, ...tail] = [1,2,3,4]; // head=1, tail=[2,3,4]

// 对象解构
const {name, ...address} = userProfile;
相关推荐
做前端的娜娜子4 小时前
什么是浅拷贝(Shallow Copy)和深拷贝(Deep Copy)?如何手动实现一个深拷贝函数
javascript·面试·掘金·金石计划
xcLeigh4 小时前
编程语言的 AI 友好度排名:Python、JavaScript、TypeScript 谁更适合 AI 辅助
javascript·人工智能·python·ai·typescript·ai编程
码上成长4 小时前
微前端 Invalid hook call?先把「window 注入 + externals」整明白
前端·react.js·前端框架
宿6744 小时前
vue3-DOM树
前端·javascript·vue.js
谷哥的小弟4 小时前
TypeScript中的any
javascript·typescript
白狐_7985 小时前
408数据结构:中缀转后缀与操作符栈容量——真题精讲
前端·javascript·数据结构
谷哥的小弟5 小时前
TypeScript在Vue3中的常见写法
前端·javascript·typescript
人间凡尔赛5 小时前
2026 前端全栈新范式:Server Actions + Edge Runtime,告别传统 API 路由
前端·全栈·next.js
mONESY6 小时前
用 useRef 管理 Worker 线程,让你的页面不再卡顿
javascript
码林鼠8 小时前
2026前端面试题(二)
前端