不清楚 ES6 解构函数参数默认值

Question

因此在解构函数默认值的 MDN 文档中给出了以下示例。

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

但是我可以运行这个例子，第一行是function drawES2015Chart({size = 'big', cords = {x: 0, y: 0}, radius = 25})

所以省略了 ={} 部分。我不确定为什么会这样，如果较短的形式实际上同样正确，那么使用较长的形式会有什么好处。

Answer 1

最后的 = {} 默认整个参数对象，以确保您不会在有人调用您的函数时根本没有任何参数的情况下尝试解构 undefined（drawES2015Chart({}) vs drawES2015Chart())

如果你没有这个守卫：

function foo({x = 10}) {
  return x;
}

foo(); // TypeError: can't convert undefined to object
foo({}); // 10

Answer 2

按照您的建议重构函数：

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

尝试不带参数调用它时会导致错误：

drawES2015Chart(); // throws TypeError

但是，您可以将其命名为：

drawES2015Chart({});

所以，= {} 最后所做的是让您能够调用

drawES2015Chart();

默认为

drawES2015Chart({});

默认为

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

Answer 3

尝试删除 = {} 并执行 drawES2015Chart();

它防止undefined被解构。

不清楚 ES6 解构函数参数默认值

unclear on ES6 destructuring function parameter defaults

javascript

destructuring

ecmascript-6