ES6 деструктурирующего

Question

Привета Я шел через примеры использования деструктурирующего объекта в проходящих параметрах функции здесь Object Destructuring Demo

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

// In Firefox, default values for destructuring assignments are not yet 
implemented (as described below). 
// The workaround is to write the parameters in the following way: 
    // ({size: size = 'big', cords: cords = { x: 0, y: 0 }, radius: radius = 
     25} = **{}**) 

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

Может кто-нибудь, дайте мне знать, что является причиной использования пустого назначения объекта в конце параметра функции, который я выделил полужирным шрифтом (встроенным в двойные звезды) выше?

Answer 1

Если вы используете его, и вызов функции без параметров, она работает:

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

 
drawES6Chart();

если нет, возникает ошибка:

TypeError: can't convert undefined to object

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

 
drawES6Chart();

Answer 2

У вас есть объект с вашими значениями по умолчанию, но этот объект тоже является аргументом, поэтому для первого объекта аргумент , который представляет собой объект с заполненными значениями, необходим пустой объект.

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

Это, в псевдокоде, будет:

function drawES6Chart({**first argument**} = {**default value for first argument**}) { 
} 

Answer 3

деструктурирующий с невыполнением только делает свое дело, когда вы передаете объект, который не имеет соответствующих свойств. Параметр = {} по умолчанию для всего параметра позволяет вообще не пропускать (пустой) объект.

Это drawES6Chart() эквивалент drawES6Chart({}).

Answer 4

Это значение по умолчанию для параметра функции. Без использования = {} JavaScript-интерпретатор выдает ошибку, когда объект не передается функции, поскольку он не может разрушить значение undefined.