函数的 JavaScript 默认参数

Question

我完全可以理解 ECMAScript 6 创造了许多潜在的函数处理方式，例如箭头函数。

由于我对新东西不是很熟悉，所以在谈论函数的默认参数时。如何解释以下定义函数的方式之间的差异:

函数一:

function m1({x = 0, y = 0} = {}) {
  return [x, y];
}

功能二:

function m2({x, y} = { x: 0, y: 0 }) {
  return [x, y];
}

Answer 1

当您尝试将某些内容传递给您的函数时，区别就很明显了:

m1({}) // [0, 0]
m1({z: 1}) // [0, 0]
m1({x: 1}) // [1, 0]

m2({}) // [undefined, undefined]
m2({z: 1}) // [undefined, undefined]
m2({x: 1}) // [1, undefined]

你的第一个语法 (m1({x = 0, y = 0} = {})) 做了三件事:

• 首先，它为函数提供了一个默认的第一个参数，它是一个空对象。如果没有给出第一个参数 (m1())，则使用默认的空对象(即它变为 m1({}))
• 其次，您的代码从该对象中提取 x 和 y 属性。
• 如果其中一个是undefined，它会被赋予一个默认值0。

m2({x, y} = { x: 0, y: 0 }) 做了一些完全不同的事情:

• 首先它为函数提供了一个默认的第一个参数，即对象{x: 0, y: 0}。如果没有传递第一个参数，则使用该对象。如果传递了 undefined 以外的任何参数，则使用该值。
• 其次，代码从该对象中提取 x 和 y 属性。如果它们是 undefined，这就是您将得到的结果。

第一个选项(具有默认值的参数被解构为更多默认值)几乎可以肯定是您想要的。第二个选项意味着如果传递参数，您的代码没有合理/有用的属性默认值。