Question

如何将ES6与Destructuring一起使用以向用户提供选项。不确定如何使用嵌套对象而不会使部分对象覆盖默认值。

＆＃13;

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

＆＃13;

输出显示

big {"x":18} 30

但我希望它显示

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

提供的绳索对象是部分对象并删除默认的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

Answer 2

您可以为整个选项对象（按原样）提供默认值，但不能（直接）为其中的下级对象提供默认值。

我喜欢bergi's answer，但是as Paul pointed out，它确实定义了函数中的x和y符号。

如果您不想这样，可以在函数中使用Object.assign：

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

感觉ES5-ish，但......

为避免重复自己，您可以将默认值放在变量中：（live copy on Babel's 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

解构ES6嵌套对象

2 个答案: