JavaScript如何给函数指定参数传值 其余参数使用默认值

需求：调用JavaScript函数时，仅向指定参数传入自定义值，其余未传值的可选参数自动使用预设默认值。
现有错误示例代码运行输出为b23，预期输出为1b3，错误代码如下：

function runThis() {
    test(b='b');
}

function test(a='1',b='2',c='3'){
    console.log(a+b+c);
}

尝试运行test({b:'b'})、test({b:='b'})两种写法均触发SyntaxError语法错误，需要正确实现方案。

• JavaScript默认是位置参数，按传参的先后顺序匹配形参，不支持直接写参数名=值的方式指定传参。你写的test(b='b')本质是先在当前作用域声明/赋值变量b='b'，再把'b'作为第一个参数传给形参a，因此a拿到值'b'，b、c走默认值，最终输出b23。
• test({b:='b'})触发语法错误是因为对象字面量的键值对分隔符是冒号:，不存在:=的合法写法。
• test({b:'b'})本身没有语法错误，但原有函数形参是按位置定义的，这种写法会把整个对象作为第一个参数传给a，无法触发其余参数的默认值逻辑，结果不符合预期。

方案1：位置参数传undefined占位 #

JavaScript的参数默认值触发规则是：对应位置传入值为undefined时，自动使用预设默认值。如果不想改原有函数的形参定义，只需要在不需要自定义值的参数位置传入undefined占位即可：

function runThis() {
    // a位置传undefined用默认值'1'，b传自定义值'b'，c位置传undefined用默认值'3'
    test(undefined, 'b');
}

function test(a='1',b='2',c='3'){
    console.log(a+b+c); // 输出 1b3，符合预期
}

runThis();

这个方案适合参数数量少的场景，缺点是参数多的时候需要写多个undefined占位，且必须记清楚参数的位置顺序。

方案2：对象解构传参（推荐，支持按名传参） #

如果参数较多、或者需要频繁跳过中间参数传值，推荐把函数形参改写成对象解构格式，直接支持按参数名传值，不需要记位置、也不需要占位：

function runThis() {
    // 只需要传入要自定义的参数即可，其余自动走默认值
    test({b:'b'});
}

/**
 * 形参定义说明：
 * 1. 外层= {}是兜底默认值，保证直接调用test()不传参时不会报错
 * 2. 解构内部每个属性单独配置默认值，对应属性没传时自动用默认值
 */
function test({a='1', b='2', c='3'} = {}){
    console.log(a+b+c); // 输出 1b3，符合预期
}

runThis();

这种写法没有顺序要求，比如要单独给c传自定义值，直接写test({c:'自定义c'})就能得到12自定义c的结果，维护成本更低。

内容的提问来源于stack exchange，提问作者8平民