Question

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

我在Mozilla开发人员网站的Destructuring assignment下找到了此代码段。
我正在学习ES6的销毁分配，但是在这里陷入了困境，我无法理解此函数如何接受参数并设置默认值？

Answer 1

考虑以下简单示例：

function foo({ bar }) {
  console.log(bar);
}

您可以像foo({ bar: 42 });这样调用，并在控制台中获取42。

但是说您想要一个默认参数，您想要bar和baz，但是将baz设为可选，默认值为true，您可以这样做所以：

function foo({ bar, baz = true }) {
  console.log(bar, baz);
}

用foo({ bar: 42 })呼叫那个会导致42, true。

现在说我们希望所有参数都是可选的：

function foo({ bar = 42, baz = true }) {
  console.log(bar, baz);
}

foo({}); // 42, true
// however
foo(); // TypeError: Cannot destructure property `bar` of 'undefined' or 'null'.

糟糕，您无法破坏未传递的值。因此，您还需要 that 参数也具有默认值：

function foo({ bar = 42, baz = true } = {}) {
  console.log(bar, baz);
}

foo(); // 42, true. Yey!

因此，对于您的特定示例：

function drawES2015Chart({size = 'big', cords = {x: 0, y: 0}, radius = 25} = {}) {
  ...
}

接受一个可选参数，该对象具有三个可选键：

size是一个可选键，默认值为big
cords是一个可选键，默认值为{x: 0, y: 0}
radius是一个可选键，默认值为25

并且由于所有键都是可选的，因此我们假定空输入等效于空对象，这将反过来使用键的所有默认值。

Answer 2

{size = 'big', cords = {x: 0, y: 0}, radius = 25}是optional object，大小，电线，半径是默认键{}设为可选时的值。
最后一个= {} defaulting entire argument object，以确保它不是destructure到undefined。

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

Answer 3

此函数接受带有某些键的对象。因此，您可以基于键解构对象。使用赋值运算符（=），此函数还为每个键（大小，和弦，半径）提供默认值

Answer 4

function drawES2015Chart({ size = 'big' }) {
  // do some chart drawing
}

//We invoke like this
let obj = { size: 'small'} 
drawES2015Chart(obj)

为了给您一个简单而清晰的图片，我们可以只看一个参数，然后查看浓缩前的步骤。原始代码如下：

V1：

function drawES2015Chart(parameter) {
  var size = parameter.size || 'big';
}

然后，由于我们仅在以下方法中使用size，因此接下来我们可以压缩一点点：

V2：

function drawES2015Chart({ size }) {
  var size = size || 'big';
}

然后最后我们再次浓缩以设置默认值，如下所示：

function drawES2015Chart({ size = 'big' }) {

}

ES6破坏性分配

4 个答案: