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;
相关推荐
超哥--13 小时前
B站视频内容智能分析系统(九):React 前端与管理面板
前端·react.js·前端框架
Cutecat_16 小时前
视频字幕处理工具横向:提取模式 vs 编辑模式,该如何选择
android·前端·ios·语音识别
dsyyyyy110116 小时前
JavaScript变量
开发语言·javascript·ecmascript
qq_4221525717 小时前
PDF 加水印工具怎么选?2026 年文档版权保护方案对比
前端·pdf·github
kyriewen17 小时前
手写 Promise.all、race、any:不到 30 行代码,解决并发异步的所有姿势
前端·javascript·面试
brucelee18618 小时前
OpenClaw 浏览器控制(Chrome MCP)完整教程
前端·chrome
ct97818 小时前
React 状态管理方案深度对比
开发语言·前端·react
胡志辉的博客18 小时前
深入浅出理解浏览器事件循环:从一道输出题讲到 Chrome 源码
前端·javascript·chrome·chromium·event loop
代码不加糖18 小时前
js中不会冒泡的事件有哪些?
前端·javascript·vue.js
懂懂tty18 小时前
Vue2与Vue3之间API差异
前端·javascript·vue.js