ES6 函数传参

《深入理解ES6》阅读随笔

在 ES5 中，函数的形参使用是很灵活的，没有数量限制的，可以任意传入多于或者少于函数定义时的参数。如果传多了，那么可以在函数体内通过 arguments 数组来获取；如果传少了，需要在函数体内进行自定义约束，避免出现异常调用的情况。下面是一个简单的说明案例：

// 自定义函数
function readme(name) {
  let result = "I am ";
  if (name !== undefined) {
    // 正常情况
  } else {
    // 形参少的情况
    name = "default";
  }
  result += name;
  // 形参多的情况
  if (arguments.length > 1) {
    for (let i = 1; i < arguments.length; i++) {
      result += arguments[i] + " ";
    }
  }
  console.log(result);
}
// 正常情况
readme("bug"); // 输出：I am bug
// 形参多的情况，new bug 参数可以在函数体内通过 arguments[1] 获取
readme("bug", "new bug"); // 输出：I am bug
// // 形参少的情况，需要判断 name 是否为 undefined，如果是，给一个默认值，如果不是，正常输出
readme(); // 输出：I am default

事实上，上面两种方案虽然解决了问题，但是不够安全，也不够简洁。在 ES6 中，有了更好的解决方案。在形参少的的情况下，可以通过在形参中设置默认参数的方式来处理，更加简洁易懂。在形参多的情况下，可以使用新的不定参数符号 … 来代表多出来的参数。下面是一个简单的说明案例：

// 自定义函数
function readme(name = "default", ...list) {
  let result = "I am ";
  result += name;
  // 形参多的情况
  for (let i = 0; i < list.length; i++) {
    result += list[i] + " ";
  }
  console.log(result);
}
// 正常情况
readme("bug"); // 输出：I am bug
// 形参多的情况
readme("bug", "new bug"); // 输出：I am bug
// 形参少的情况
readme(); // 输出：I am default

另外，不定参数符号 … 还可以用于对象字面量的展开，就像下面这个例子，如果改为使用 … 会方便很多：

// 数学内建函数中获取最值，默认只支持元组数据，如果是两个还好
let result = 0;
result = Math.max(1, 2);
console.log(result); // 输出 2
// 如果数据一多， 比如要处理数组数组
const moreData = [1, 2, 3, 4, 5];
// 那么就需要进行一些干预手段，才能获取
result = Math.max.apply(Math, moreData);
console.log(result); // 输出 5
// 使用 ...
result = Math.max(...moreData);
console.log(result); // 输出 5

很显然，虽然借助 apply 的方式也可以实现数组最值的获取，但是使用 … 以后代码结构更清晰易懂。另外，在 ES6 中，绝大多数之前使用 apply 实现的功能，几乎都可以通过 … 的方式来优化实现（ES6 中依然保留 apply 的用法）。