javascript - 解构 ES6 嵌套对象

Question

如何将 ES6 与解构结合使用来为用户提供选项。不确定如何在不让部分对象覆盖默认值的情况下使用嵌套对象。

Take this simple example from 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 值。我想保留任何未明确覆盖的值。

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

如果根本没有提供 cords 对象，您编写它的方式只会提供默认值。
您已经为完整的选项对象选择了正确的方法，它也将 {} 作为其默认值 - 而不是编写

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