JavaScript中空数组作为函数默认参数的调用异常解惑

问题场景 #

你定义了这样的函数：

function calculateTotal(prices = [], tip = 0, tax = 0) {
    return prices.reduce((a, b) => a + b, 0) + tip + tax
}

调用console.log(calculateTotal(tip = 4))时，本以为会输出4，结果却抛出Uncaught TypeError: prices.reduce is not a function，而调用console.log(calculateTotal([], tip = 4))就能正常输出4。

核心原因 #

JavaScript不支持直接按参数名传递参数，你写的tip = 4其实是一个赋值表达式，它的执行结果是4，这个值会被传递给函数的第一个参数prices，而非你以为的第二个参数tip。

这就导致prices被赋值为4（不是默认的空数组），而4是数字类型，没有reduce方法，所以触发了类型错误；同时tip和tax会使用各自的默认值0，最终计算结果自然是NaN。

解决方法 #

如果你想实现类似“命名传参”的效果，有两种常用方式：

• 严格按参数顺序传递：如果只想传tip，前面的参数需要显式传入默认值，比如calculateTotal([], 4)（不需要写tip=）
• 使用对象解构作为参数，这样可以通过键名来传参，不受顺序限制：

function calculateTotal({ prices = [], tip = 0, tax = 0 } = {}) {
    return prices.reduce((a, b) => a + b, 0) + tip + tax
}
// 调用时可以只传需要的参数
console.log(calculateTotal({ tip: 4 })) // 输出4

内容的提问来源于stack exchange，提问作者Szplugz