深入理解JavaScript函数参数的实用技巧

ref="/tag/145/" style="color:#E3A3CF;font-weight:bold;">函数参数不只是传值那么简单

在写网页交互功能时，经常会用到函数。比如点击按钮弹出提示，或者提交表单前做数据校验。这些函数往往需要接收一些数据才能工作，这时候就轮到函数参数出场了。

最常见的写法是定义函数时列出参数名，调用时传入对应的值。比如写一个计算折扣后价格的函数：

function calculatePrice(price, discount) {
    return price - (price * discount / 100);
}

console.log(calculatePrice(100, 20)); // 输出 80

这里的 price 和 discount 就是函数的形参，调用时传入的 100 和 20 是实参。这种一对一传值的方式很直观，适合大多数场景。

参数可以有默认值

有时候某些参数不是每次都要传。比如用户注册时，默认城市是“北京”，只有特殊情况下才改。ES6 提供了默认参数语法，让这事变得简单：

function registerUser(name, city = '北京') {
    console.log(`${name} 来自 ${city}`);
}

registerUser('小明'); // 小明 来自 北京
registerUser('小红', '上海'); // 小红 来自 上海

这样既减少了调用时的重复代码，又提升了函数的容错能力。

处理不确定数量的参数

有些函数你根本不知道会传几个参数进来。比如要算一组数字的总和，可能是两个，也可能是五个。以前常用 arguments 对象，但现在更推荐使用扩展运算符（...）：

function sum(...numbers) {
    return numbers.reduce((total, num) => total + num, 0);
}

console.log(sum(1, 2));       // 3
console.log(sum(1, 2, 3, 4)); // 10

...numbers 把所有传入的参数收集成一个数组，处理起来更灵活。

传对象作为参数更清晰

当函数需要多个相关参数时，直接按顺序传容易搞混。比如设置一个定时提醒，涉及时间、内容、是否重复等。如果写成 setAlarm(time, msg, repeat, sound)，调用时得反复查文档确认顺序。

更好的方式是传一个配置对象：

function setAlarm(options) {
    const { time, msg, repeat = false, sound = 'beep' } = options;
    console.log(`时间：${time}, 内容：${msg}, 重复：${repeat}, 铃声：${sound}`);
}

setAlarm({
    time: '08:00',
    msg: '起床啦',
    repeat: true
});

这样不仅调用时更直观，还能利用解构赋值设置默认值，维护起来也轻松。

参数也能是函数

JavaScript 的函数可以当参数传。这在处理回调逻辑时特别有用。比如你发了个网络请求，成功后再执行下一步操作：

function fetchData(callback) {
    setTimeout(() => {
        const data = { user: 'tom', age: 25 };
        callback(data);
    }, 1000);
}

fetchData(function(userData) {
    console.log('获取到用户信息：', userData);
});

这种模式在事件处理、异步操作中非常常见，也是理解 Promise 和 async/await 的基础。

函数参数看似基础，但用得好能让代码更简洁、更易读。从简单的值传递到复杂的对象和函数传递，掌握这些技巧后，写出来的函数会更贴近实际需求，也不容易出错。