JavaScript 剩余参数怎么用

JavaScript大师 1 次阅读 2026-11-02 13:37 JavaScript

大家在写JavaScript代码的时候，肯定会遇到需要处理多个参数的情况，比如做一个计算“随便多少个数相加”的小工具，要是用传统的参数写法，就得提前把参数都列出来，不够灵活。这时候，JavaScript里的“剩余参数”就能帮上大忙了，它可以把任意数量的参数都收集到一个数组里，让代码更简洁好用。

先举个生活化的例子：你去奶茶店点单，说“我要奶茶”，店员给你1杯；要是说“我要奶茶、加珍珠、加椰果、加布丁”，店员就会把你要的所有加料都归到“额外配料”这个篮子里。剩余参数就像这个“配料篮子”，它会把函数调用时传的所有额外参数，都装进一个真正的数组里，方便你统一处理。

JavaScript 剩余参数怎么用

用代码来说的话，剩余参数的语法就是在参数名前面加三个点...，比如function add(...numbers)，这里的numbers就是装所有传进来的参数的数组，就算传1个、5个甚至10个数字，它都能接住。

最常见的用法就是处理“数量不定的参数”，比如刚才说的多个数相加，用传统写法的话，你得写function add(a, b, c) { return a + b + c }，但最多只能传3个，传多了就会被忽略，传少了会得到NaN，很不方便。

用剩余参数就不一样了：

`javascript

function add(...numbers) {

// numbers是数组，用数组的reduce方法把所有数加起来

return numbers.reduce((total, num) => total + num, 0)

}

// 试一下，传1个参数

console.log(add(5)) // 输出5

// 传3个参数

console.log(add(1, 2, 3)) // 输出6

// 传10个参数

console.log(add(10, 20, 30, 40, 50, 60, 70, 80, 90, 100)) // 输出550

不管传多少个数字，都能正确相加，完全不用提前定参数数量，是不是很方便？

还有一个用法：配合固定参数用，比如你想先处理几个固定的必填参数，再用剩余参数收额外的。比如做一个“学生成绩统计”函数，要求必须传姓名、班级，剩下的考试分数用剩余参数收：

`javascript

function showStudentInfo(name, class, ...scores) {

console.log(学生：${name}，班级：${class})

console.log(所有考试分数：${scores})

const avg = scores.reduce((total, s) => total + s, 0) / scores.length

console.log(平均成绩：${avg.toFixed(1)})

}

// 调用时，传姓名、班级，再加3个分数

showStudentInfo('小明', '三年级1班', 90, 95, 88)

// 输出：

// 学生：小明，班级：三年级1班

// 所有考试分数：90,95,88

// 平均成绩：91.0

这里的name和class是固定的两个参数，必须传，后面不管加几个分数，都会被收到scores数组里，不会和固定参数冲突。

虽然剩余参数好用，但有几个细节要注意，不然容易踩坑：

第一，剩余参数必须写在参数列表的最后，不能放在前面或者中间。比如function sum(...numbers, a)是错的，因为JS不知道哪些参数要放进剩余数组，哪些是单独的参数，就像奶茶店不能先给你配料，再告诉你要几杯奶茶，顺序不能乱。

第二，一个函数里只能有一个剩余参数，不然也会报错。就像一个篮子不能同时装两批不同的配料，参数列表里只能有一个...开头的参数。

掌握了剩余参数，以后写需要处理不定数量参数的函数时，就不用再写一堆arguments或者判断参数长度的代码了，代码会更简洁易读，还能避免很多因为参数数量不对导致的bug。

分类： JavaScript