在 javascript 的箭头函数中，使用剩余参数（rest parameters）的方法是在最后一个形参前添加三个点 `...`，该参数会自动收集所有剩余的实参为一个数组。例如定义 (a, b, ...rest) 后，调用时传入的多余值都会存入 rest 数组中，从而允许函数处理不定数量的输入。
如何定义包含剩余参数的箭头函数
要定义一个包含剩余参数的箭头函数，只需在参数列表的末尾放置 ... 符号并跟上参数名即可。这个参数名必须是一个合法的标识符，且必须是函数的最后一个参数。当调用该函数时，所有未匹配到前面命名参数的实参都会被打包成一个真实的 Array 对象赋值给这个剩余参数。
const sum = (...numbers) => {
return numbers.reduce((total, num) => total + num, 0);
};
console.log(sum(1, 2, 3)); // 输出: 6
console.log(sum(10, 20, 30, 40)); // 输出: 100
上述代码展示了 sum 函数接收任意数量的数字参数。在第一次调用中，numbers 为 [1, 2, 3]；第二次调用中，numbers 为 [10, 20, 30, 40]。这种机制避免了手动操作 arguments 对象的复杂性，直接提供了类型安全的数组。
立即学习“Java免费学习笔记（深入）”；
你是 TypeScript 项目架构专家，专注于脚手架搭建生产就绪的 Node.js 和前端应用。生成包含现代工具链（pnpm、Vite、Next.js）、类型
剩余参数与解构赋值的结合用法
剩余参数可以与数组或对象解构语法结合使用，以便从传入的参数中提取特定部分，同时将剩余部分收集起来。这在处理配置对象或复杂数据结构时非常有用。通过解构，可以明确指定需要提取的字段，而将其他所有字段放入剩余参数中。
const processConfig = ({ title, ...options }) => {
console.log('Title:', title);
console.log('Options:', options);
};
processConfig({
title: 'Report',
format: 'PDF',
pageSize: 'A4'
});
在这个例子中，title 被单独解构出来，而 format 和 pageSize 则被收集到 options 对象中。调用 processConfig 时，传入的对象属性会被自动分配。如果传入的属性多于解构声明的属性，多出的属性会进入剩余参数对象。这种方法使得函数签名更加清晰，减少了手动检查 arguments 或过滤对象属性的代码量。
剩余参数在混合参数场景下的行为
当箭头函数同时包含命名参数、默认参数和剩余参数时，JavaScript 引擎会按照从左到右的顺序进行匹配。命名参数和默认参数优先消耗前面的实参，剩余参数只收集最后剩下的部分。如果剩余参数之前没有命名参数，它将收集所有实参。理解这一顺序对于避免参数错位至关重要。
const handleEvent = (type, count = 1, ...args) => {
console.log(`Type: ${type}, Count: ${count}`);
console.log(`Extra Args:`, args);
};
handleEvent('click'); // Type: click, Count: 1, Extra Args: []
handleEvent('click', 5); // Type: click, Count: 5, Extra Args: []
handleEvent('click', 5, 'data', true); // Type: click, Count: 5, Extra Args: ['data', true]
在第一个调用中，count 使用默认值 1，因为没有提供第二个实参，所以 args 为空数组。在第三个调用中，type 为 'click'，count 为 5，剩余的 'data' 和 true 被收集到 args 中。这种严格的匹配顺序确保了即使参数数量变化，核心逻辑所需的参数也能被正确获取。
