JavaScript函数默认参数调用出现意外输出的原因及替代方案

先看你给出的代码：

function add(x=1, y=2){
    return x + y;
}
console.log(add(y=4));

一、输出6的原因及运行机制 #

你写的add(y=4)里，y=4是个赋值表达式，它的执行结果就是赋值后的值4。而JavaScript函数参数是按位置传递的，不是按名称匹配——这个4会被当成第一个参数x的值传入，y则使用默认值2，所以最终计算的是4 + 2 = 6。

顺带说一句：这里的y=4还会给当前作用域（如果没声明过y就是全局作用域）创建/赋值变量y，这其实是个额外的副作用。

二、不用add(undefined, 4)的替代实现方法 #

如果想直接指定y参数的值，同时让x用默认值，推荐以下几种简洁方案：

1. 改为接收对象参数（最常用） #

重构函数，通过对象解构赋值设置默认值，调用时只需传需要修改的参数：

function add({x=1, y=2} = {}){
    return x + y;
}
console.log(add({y:4})); // 输出5

这里= {}是为了兼容无参数调用（比如add()也能正常返回3）。

2. 单独解构参数对象 #

如果参数较多，这种写法可读性更好：

function add(options = {}){
    const {x=1, y=2} = options;
    return x + y;
}
console.log(add({y:4})); // 输出5

3. 调用时手动匹配参数 #

如果不想修改原函数结构，可以在调用时明确处理参数：

function add(x=1, y=2) {
  return x + y;
}
// 手动指定y参数，x沿用默认值
console.log(add(1, 4)); // 输出5

这种写法虽然直接，但如果参数默认值后续有改动，调用处也需要同步修改，灵活性不如对象传参。

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