JavaScript默认参数

今天，我想我要带你看看我的es6研讨会中的一个例子。

考虑一下下面的代码:

function getCandy(kind, size, upperKind, callback) {
  if (!kind) {
    requiredParam('kind')
  }
  if (!size) {
    requiredParam('size')
  }
  upperKind = upperKind || kind.toUpperCase()
  callback = callback || function noop() {}

  const result = {kind, size, upperKind}
  callback(result)
  return result
}

function requiredParam(argName) {
  throw new Error(`${argName} is required`)
}

这是相当简单的，但也有潜在的错误（在MDN上阅读关于Falsy 在MDN上）和一些恼人的模板。幸运的是，ES6为JavaScript引入了新的语法，我们可以用它来简化一些事情。特别是：默认参数。 让我们来看看使用这个功能时，上面会是什么样子。

function getCandy(
  kind = requiredParam('kind'),
  size = requiredParam('size'),
  upperKind = kind.toUpperCase(),
  callback = function noop() {},
) {
  const result = {kind, size, upperKind}
  callback(result)
  return result
}

function requiredParam(argName) {
  throw new Error(`${argName} is required`)
}

注意，我们可以把每个表达式放在等号的右边。如果参数是undefined，那么右边的表达式将被评估。这允许我们只在kind 或size 是undefined 的情况下调用requiredParam 函数。还可以在我们的表达式中使用其他参数的值，就像我们在upperKind 的默认参数中所做的那样，我发现这是一个非常酷的功能，我在一些工具的选项配置中一直使用这个功能（例如）。

我想补充的是，同样的语义也适用于对象的重构（无论是否作为参数）。例如，如果我们把参数改成一个选项对象:

function getCandy(options = {}) {
  const {
    kind = requiredParam('kind'),
    size = requiredParam('size'),
    upperKind = kind.toUpperCase(),
    callback = function noop() {},
  } = options
  // etc...
}

或者，如果我们想在参数列表中直接对选项对象进行重构:

function getCandy({
  kind = requiredParam('kind'),
  size = requiredParam('size'),
  upperKind = kind.toUpperCase(),
  callback = function noop() {},
} = {}) {
  // etc...
}

有趣的东西!

结语

我希望你觉得这对你有帮助!如果你想看我谈论这个问题，你可以看看我不久前在PayPal举办的ES6研讨会的这一部分：ES6和超越研讨会第一部分在PayPal（2017年1月）。 祝你好运