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];
}

- lsqleakey

---

我认为用JavaScript，你可以用另一种方法实现它。 就像这样：function m1(x) { x || (x=0); } - Husamuddin

@lsqleakey 你是在问如何在ES6中创建带有默认变量的箭头函数吗？ - Z-Bone

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，那么就会得到这个值。

第一个选项 (具有默认值的参数，其中包含更多的默认值解构) 几乎肯定是你想要的。第二个选项意味着如果传递了参数，则你的代码没有合理/有用的属性默认值。

- lonesomeday

---

m2() will produce [0,0]. m2({}) would be [undefined, undefined] - CodingIntrigue

@CodingIntrigue 谢谢：当然是我想表达的意思。 - lonesomeday

假设如此，解释得非常好，分解得很好 - CodingIntrigue

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 即使缺少这两个属性，也会为它们提供默认值。如果整个对象都缺失，它仍将提供这些默认值。

- Sebastian Simon