在JavaScript编程中，函数是封装可复用逻辑的核心载体，而参数传递是函数与外部交互的重要方式。当业务逻辑需要接收多个输入值时，就需要定义带有多个参数的函数，同时还需要处理参数数量不匹配、参数默认值设置等常见场景。
JS函数多参数的基础定义方式
JS函数定义多个参数时，只需要在函数声明的括号内用逗号分隔各个参数名即可，参数在函数内部可以直接作为变量使用。
// 定义接收三个参数的函数，计算三个数的和
function calculateSum(a, b, c) {
return a + b + c;
}
// 调用函数时传入三个参数
const result = calculateSum(10, 20, 30);
console.log(result); // 输出 60
如果使用函数表达式或者箭头函数定义多参数函数，语法也是一致的：
// 箭头函数定义多参数
const multiply = (x, y, z) => {
return x * y * z;
};
console.log(multiply(2, 3, 4)); // 输出 24
// 函数表达式定义多参数
const concatString = function(str1, str2, str3) {
return str1 + str2 + str3;
};
console.log(concatString("hello", " ", "world")); // 输出 hello world
多参数场景下的默认参数处理
当调用函数时传入的参数数量少于定义的参数数量，未传入的参数默认值为undefined，很多时候我们需要给参数设置默认值，避免逻辑出错。
ES5及之前的默认值处理方式
早期JS版本中，通常需要在函数内部判断参数是否为undefined，再手动赋值默认值：
function getUserInfo(name, age, city) {
// 如果name未传入，默认值为"匿名用户"
name = name !== undefined ? name : "匿名用户";
// 如果age未传入，默认值为0
age = age !== undefined ? age : 0;
// 如果city未传入，默认值为"未知城市"
city = city !== undefined ? city : "未知城市";
return {
name: name,
age: age,
city: city
};
}
console.log(getUserInfo()); // 输出 {name: "匿名用户", age: 0, city: "未知城市"}
console.log(getUserInfo("张三", 25)); // 输出 {name: "张三", age: 25, city: "未知城市"}
ES6默认参数语法
ES6引入了参数默认值的简洁语法，只需要在定义参数时直接赋值默认值即可，当参数未传入或者传入undefined时，会自动使用默认值：
function getUserInfo(name = "匿名用户", age = 0, city = "未知城市") {
return {
name: name,
age: age,
city: city
};
}
console.log(getUserInfo()); // 输出 {name: "匿名用户", age: 0, city: "未知城市"}
console.log(getUserInfo("李四")); // 输出 {name: "李四", age: 0, city: "未知城市"}
console.log(getUserInfo(undefined, 30, "北京")); // 输出 {name: "匿名用户", age: 30, city: "北京"}
处理多余参数的方法
当调用函数时传入的参数数量多于定义的参数数量，多余的部分不会自动被接收，这时候可以使用剩余参数语法或者arguments对象来处理。
剩余参数语法（ES6推荐）
剩余参数使用...前缀定义，会将多余的所有参数收集到一个数组中，剩余参数必须放在参数列表的最后一位。
// 定义函数，前两个参数为固定参数，剩余参数收集到extra数组中
function processData(base1, base2, ...extra) {
console.log("固定参数1:", base1);
console.log("固定参数2:", base2);
console.log("多余参数数组:", extra);
// 可以对多余参数做遍历处理
extra.forEach((item, index) => {
console.log(`多余参数${index}:`, item);
});
}
processData("start", "end", 1, 2, 3, "test");
// 输出：
// 固定参数1: start
// 固定参数2: end
// 多余参数数组: [1, 2, 3, "test"]
// 多余参数0: 1
// 多余参数1: 2
// 多余参数2: 3
// 多余参数3: test
arguments对象（兼容旧环境）
在ES5及之前的版本中，函数内部可以通过arguments对象获取所有传入的参数，它是一个类数组对象，包含所有调用函数时传入的参数，但是arguments不是真正的数组，无法直接调用数组的方法。
function sumAll() {
let total = 0;
// 遍历arguments对象，累加所有参数
for (let i = 0; i < arguments.length; i++) {
total += arguments[i];
}
return total;
}
console.log(sumAll(1, 2, 3, 4, 5)); // 输出 15
console.log(sumAll(10, 20)); // 输出 30
多参数的解构赋值使用
如果函数的参数是一个对象或者数组，还可以使用解构赋值的方式定义参数，这样不需要记住参数的顺序，只需要知道参数对应的属性名即可。
对象参数解构
// 定义函数，直接解构传入的对象参数，还可以给解构的属性设置默认值
function createUser({name = "默认名称", age = 0, gender = "未知"} = {}) {
return {
name: name,
age: age,
gender: gender
};
}
// 调用时传入对象，属性顺序不影响结果
console.log(createUser({age: 28, name: "王五"})); // 输出 {name: "王五", age: 28, gender: "未知"}
// 不传入参数也不会报错，因为设置了空对象默认值
console.log(createUser()); // 输出 {name: "默认名称", age: 0, gender: "未知"}
数组参数解构
// 解构数组参数，按顺序获取对应位置的值
function handleArray([first, second, third = 0]) {
return first + second + third;
}
console.log(handleArray([5, 10])); // 输出 15，third使用默认值0
console.log(handleArray([1, 2, 3])); // 输出 6
多参数定义的注意事项
- 参数名不要使用JS的关键字，比如
let、const、function等，避免语法错误。 - 剩余参数只能有一个，并且必须放在参数列表的最后，否则会报错。
- 默认参数可以是任意合法的表达式，比如可以是一个函数调用，但是这个默认值表达式只有在参数未传入时才会执行。
arguments对象只在非箭头函数中存在，箭头函数没有自己的arguments对象，如果需要处理箭头函数的多余参数，只能使用剩余参数语法。
掌握JS函数多参数的定义和处理方法，可以让函数更灵活地适配不同的调用场景，减少不必要的参数判断逻辑，写出更简洁易维护的代码。在实际开发中，可以根据需求的复杂程度选择对应的参数处理方式，简单的多参数场景直接使用基础定义即可，复杂的参数场景可以结合默认值、解构、剩余参数等特性实现。