ES6解构嵌套对象

Question

如何使用ES6的解构赋值为用户提供选项。不确定如何使用嵌套对象而不会被部分对象覆盖默认值。

以MDN上的这个简单例子为例：:

function drawES6Chart({size = 'big', cords = { x: 0, y: 0 }, radius = 25} = {})
{
  console.log(size, cords, radius);
  // do some chart drawing
}

drawES6Chart({
  cords: { x: 18},
  radius: 30
});

输出结果显示：

big {"x":18} 30

但是我希望它能够显示。

big {"x":18,"y": 0} 30

提供的 cords 对象是部分的并且删除了默认的 y 值。我希望保留任何没有明确覆盖的值。

- JeremyBYU

---

这与ES6的“类”无关。它与ES6的默认参数有关。 - T.J. Crowder

不确定您是否可以让解释器知道嵌套对象也应该被解构。;{let {x = 0, y = 0} = cords; cords = {x: x, y: y}};？ - Paul S.

Answer 1

您需要将coords解构为其x和y组件，并分别为它们提供默认值：

function drawES6Chart({size='big', cords: {x=0, y=0} = {}, radius=25} = {}) {
    const coords = {x, y}
    console.log(size, coords, radius);
}

如果没有提供对象，您之前的写法只会提供默认值。
对于完整的选项对象，您已经选择了正确的方法，它的默认值也是{} - 而不是编写

function drawES6Chart({size, cords, radius} = {size:'big', cords:{x:0, y:0}, radius:25}) {
    // not working

- Bergi

---

我以为我已经尝试过了！叹气 该睡觉了... 编辑: 啊，不是完全那样。但这比Object.assign方法更干净。 - T.J. Crowder

我真的很喜欢这个，除了它将初始化标识符_x_和_y_。这就是我试图避免使用奇怪的代码块“let”的原因。 - Paul S.

@PaulS.：是的，这与原始代码有所不同，但我认为没有任何问题。两个可能会被使用的变量并不会有什么害处，对吧？ - Bergi

Answer 2

您可以为整个选项对象（如您所做）提供默认值，但不能直接为其中的子对象提供默认值。

我喜欢 bergi's answer，但 正如Paul指出的那样，它确实在函数内定义了 x 和 y 符号。

如果您不想这样做，可以在函数内使用 Object.assign 来代替：

cords = Object.assign({}, {x: 0, y:0}, cords);

感觉有点像ES5，但是...

为了避免重复，您可以将默认值放在一个变量中：( Babel REPL 上的实时副本)

let cordsDefaults = {x: 0, y: 0};
function drawES6Chart(
  {size = 'big', cords = cordsDefaults, radius = 25} = {}
  )
{
  cords = Object.assign({}, cordsDefaults, cords);
  console.log(size, cords, radius);
  // do some chart drawing
}
drawES6Chart({cords: {x:18}});

输出：

big {"x":18,"y":0} 25

- T.J. Crowder

---

这个完美地运行了。Object assign 是关键，而默认对象使得事情变得更加简洁。谢谢！ - JeremyBYU

@JeremyBYU - 所以你不应该将答案标记为正确吗？ - Jonatas Walker