JavaScript函数的默认参数

Question

我完全理解ECMAScript 6已经创建了许多使用箭头函数等函数处理的潜在方法。

因为我不太熟悉新东西，所以在谈论函数的默认参数时。 如何解释以下定义函数的方式之间的差异：

功能1：

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

功能2：

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 ，那就是你将得到的。

第一个选项（具有默认值的参数，使用更多默认值进行解构）几乎可以肯定您想要的。 第二个选项意味着如果传递参数，则代码对属性没有合理/有用的默认值。

Answer 2

m1提供x和y默认值，而m2仅从提供的对象中解析x和y ，并且仅在未提供对象本身时提供默认值：

• m1({})将返回[0, 0]
• m2({})将返回[undefined, undefined]
• m1()和m2()都将返回[0, 0]

---

• m1({x: 10})将返回[10, 0]
• m2({x: 10})将返回[10, undefined]

因此，如果m2收到一个对象，它会将可用值解构为变量x和y 。 如果它们中的任何一个丢失，那么它是undefined 。 只有当整个对象丢失时，它才会提供一个默认对象（ { x: 0, y: 0 } ），从中获取值。

但是， m1为两个属性提供了默认值，即使它们已丢失。 如果整个对象丢失，它仍将提供这些默认值。