unklar auf ES6 Destrukturierung Funktionsparameter Standard

Question

So gibt es in der MDN-Dokumentation für das Destrukturieren von Funktionsvorgaben das folgende Beispiel.

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

Allerdings kann ich dieses Beispiel mit der ersten Zeile laufen als function drawES2015Chart({size = 'big', cords = {x: 0, y: 0}, radius = 25})

so die ={} Teil auszulassen. Ich bin nicht sicher, warum das funktioniert und welche Vorteile die Verwendung der längeren Form hätte, wenn die kürzere Form tatsächlich genauso korrekt wäre.

Answer 1

die Funktion Refactoring, wie Sie vorschlagen:

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

einen Fehler verursachen würde bei dem Versuch, es ohne Argumente zu nennen:

drawES2015Chart(); // throws TypeError 

Jedoch können Sie es nennen wie:

drawES2015Chart({}); 

Also, was die = {} ist am Ende tun macht Sie in der Lage aufzurufen

drawES2015Chart(); 

die zu

vorbelegt werden

die zu

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

Answer 2

Die letzte = {} das gesamte Argument Objekt säumige um sicherzustellen, dass Sie nicht versuchen, undefined denaturiert, wenn jemand Ihre Funktion ohne Argumente an alle genannt (drawES2015Chart({}) vs drawES2015Chart())

Wenn Sie diese Wache haben :

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

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

Answer 3

vorbelegt werden Versuchen = {} löschen und ausführen drawES2015Chart();

Es verhindert undefined destrukturiert werden.