ES6函数中能否在rest运算符前设置默认参数？

问题本质 #

你写的默认参数语法本身是合法的，ES6 允许在剩余参数（rest operator）之前的参数设置默认值，之所以出现不符合预期的结果，是因为默认参数是按位置匹配的：只有对应位置传入的参数值为undefined时，才会触发默认值，否则就会用你传入的参数值覆盖默认值。

你调用sayHi('Ahsan', 'Awais', 'Haseeb')时，第一个位置的参数是'Ahsan'，所以会直接赋值给greetings，剩余的两个参数才会被放入names数组。

可行实现方案 #

方案1：调用时对应位置传undefined触发默认值 #

如果不想修改现有函数定义，可以在不需要自定义问候语时，第一个参数传入undefined：

const sayHi = (greetings = 'Hi', ...names) => {
  names.forEach(item => {
    console.log(`${greetings} ${item}`);
  });
}
// 第一个参数传undefined触发默认值
sayHi(undefined, 'Ahsan', 'Awais', 'Haseeb');

运行后会输出你预期的结果：

Hi Ahsan
Hi Awais
Hi Haseeb

方案2：函数内部做参数识别，支持两种调用方式 #

如果想要支持直接传名字就自动用默认问候语，不需要额外传undefined，可以把默认值判断逻辑移到函数体内：

const sayHi = (...args) => {
  let greetings = 'Hi';
  let names = args;
  // 判断第一个参数是否为自定义问候语，可根据业务场景调整判断规则
  if (args.length && typeof args[0] === 'string' && ['Hi','Hello','Good Morning'].includes(args[0])) {
    greetings = args[0];
    names = args.slice(1);
  }
  names.forEach(item => {
    console.log(`${greetings} ${item}`);
  });
}

// 调用方式1：传自定义问候语
sayHi('Hello', 'Ahsan', 'Awais', 'Haseeb');
// 调用方式2：用默认问候语，直接传名字
sayHi('Ahsan', 'Awais', 'Haseeb');

方案3：用对象解构传参（更清晰，适合参数多的场景） #

如果后续需要配置项多，更推荐用对象参数承载可配置参数，调用时语义更清晰，不会混淆参数位置：

const sayHi = (options = {}, ...names) => {
  const { greetings = 'Hi' } = options;
  names.forEach(item => {
    console.log(`${greetings} ${item}`);
  });
}

// 传自定义问候语
sayHi({ greetings: 'Hello' }, 'Ahsan', 'Awais', 'Haseeb');
// 用默认问候语
sayHi({}, 'Ahsan', 'Awais', 'Haseeb');

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