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;
相关推荐
Asort1 分钟前
JavaScript 从零开始(七):函数编程入门——从定义到可重用代码的完整指南
前端·javascript
Johnny_FEer2 分钟前
什么是 React 中的远程组件?
前端·react.js
真夜2 分钟前
关于rngh手势与Slider组件手势与事件冲突解决问题记录
android·javascript·app
我是日安4 分钟前
从零到一打造 Vue3 响应式系统 Day 10 - 为何 Effect 会被指数级触发?
前端·vue.js
知了一笑4 分钟前
「AI」网站模版,效果如何?
前端·后端·产品
艾小码8 分钟前
用了这么久React,你真的搞懂useEffect了吗?
前端·javascript·react.js
知觉8 分钟前
实现@imput支持用户输入最多三位整数,最多一位小数的数值
前端
RoyLin9 分钟前
TypeScript设计模式:状态模式
前端·后端·typescript
RoyLin11 分钟前
TypeScript设计模式:观察者模式
前端·后端·typescript
干就完了113 分钟前
js对象常用方法都在这,使用时想不到?不存在的
前端·javascript