ES6系列 (九）默认参数和rest操作符

有时候语言的新特性提供了某种更简洁和可读的方式来实现以前不可能或者几乎不能实现的事情，但这并不代表着代码的可读性很强，这正是默认参数和 rest 参数所做的事情

目标

• 如何使用默认参数
• 如何使用 rest 操作符来收集参数
• 如何使用 rest 在函数之间传递参数

默认参数

假设我们要画一个 800*400 的图标

function mapAreaChart(width, height) {
  if (!width) {
    width = 800;
  }
  if (!height) {
    height = width / 2;
  }
  //其他操作
  console.log(`宽度：${width} 高度：${height}`);
}
mapAreaChart(); //宽度：800 高度：400
mapAreaChart(200, 300); // 宽度：200 高度：300

接下来我们使用默认参数完成同样的事情

//对于默认参数的赋值，可以使用任意的表达式，计算函数的同时也计算了表达式
function mapAreaChart(width = 800, height = width / 2) {
  //some code
}

可以使用作用域内的任何变量，表达式的上下文和其一起调用的函数上下文相同

const obj = {
  normalName: "bili",
  sayName(myName = this.normalName + "bili") {
    console.log(myName);
  }
};

obj.sayName(); //bilibili

obj.normalName = "cili";

obj.sayName(); //cilibili

必选参数必须优先于可选参数

function sum(num1 = 0, num2) {
  console.log(num1 + num2);
}

sum(9, 1); //10
sum(1); // 1 + undefined  =  NaN

rest 收集参数

之前学习了 Array.from 并利用 arguments 对象创建数组，现在我们可以使用 rest

//方式一 数组是调用slice创建一个真实数组副本
function svg() {
  const args = [].slice.call(arguments);
  const sum = args.reduce(function(a, b) {
    return a + b;
  });
  return sum / args.length;
}
console.log(svg(1, 2, 3, 4)); //2.5

//方式二 Array.from
function svg() {
  const args = Array.from(arguments);
  const sum = args.reduce(function(a, b) {
    return a + b;
  });
  return sum / args.length;
}
console.log(svg(1, 2, 3, 4)); //2.5

//方式三 rest收集arguments放在args数组里
function svg(...args) {
  const sum = args.reduce(function(a, b) {
    return a + b;
  });
  return sum / args.length;
  console.log(svg(1, 2, 3, 4)); //2.5
}

rest 参数必须是最后一个，否则会抛出语法错误

如下我有一个工具函数，没写注释

function util(object) {
  const props = Array.from(arguments).slice(1);
  return props.map(function(property) {
    return object[property];
  });
}

rest 改写后一目了然

function util(object, ...props) {
  return props.map(function(property) {
    return object[property];
  });
}

案例:打印 bootstrap 的 css 类

function cssClass(primary, ...args) {
  const names = args.reduce(
    (list, other) => {
      return list.concat(`${primary}-${other}`);
    },
    [primary]
  );
  return names.join(" ");
}

console.log(cssClass("button", "info", "danger", "success"));
//button button-info button-danger button-success