Unterschied zwischen Destructing und ... in JavaScript verbreitet

Question

Ich versuche, den Unterschied zwischen Destruct zu verstehen und ... im folgende Szenario Spread:

Beispiel für die Verwendung ... Verbreiten

function do2(a,b,c){ 
    alert (a+b+c);  
} 

do2(...[5,3,5]); 

Beispiels mit Zerstören:

function do3({a , b , c}){ 
    alert (a+b+c); 
} 
do3([5,3,5]); 

Wann verwende ich in jeder Richtung? Kann jemand den Unterschied zwischen beiden Weisen unterscheiden und welche in diesem Szenario zu verwenden? Ich bin noch ein Anfänger, also wäre jede Hilfe gut.

Answer 1

Operator Verbreiten

Spread-Beispiel:

const add = (a, b) => a + b; 
let args = [3, 5]; 
add(...args); // same as `add(args[0], args[1])`, or `add.apply(null, args)` 

Funktionen nicht der einzige Ort in JavaScript, die Verwendung von Komma macht Listen getrennt - Arrays jetzt mit Leichtigkeit verkettet werden können:

let cde = ['c', 'd', 'e']; 
let scale = ['a', 'b', ...cde, 'f', 'g']; // ['a', 'b', 'c', 'd', 'e', 'f', 'g'] 

Destrukturierung

Durch die Strukturierung können Sie schnell Daten aus {} oder [] extrahieren, ohne viel Code schreiben zu müssen.

let foo = ['one', 'two', 'three']; 

let one = foo[0]; 
let two = foo[1]; 
let three = foo[2]; 
into 

let foo = ['one', 'two', 'three']; 
let [one, two, three] = foo; 
console.log(one); // 'one' 

ES6 unterstützt auch Objekt Destrukturierung, die Verwendungen offensichtlicher machen könnte:

let myModule = { 
    drawSquare: function drawSquare(length) { /* implementation */ }, 
    drawCircle: function drawCircle(radius) { /* implementation */ }, 
    drawText: function drawText(text) { /* implementation */ }, 
}; 

let {drawSquare, drawText} = myModule; 

drawSquare(5); 
drawText('hello'); 

Answer 2

Das erste Beispiel a zuordnet, bc zu den Elementen von hindurchgegangenen Array an Indizes 0, 1, 2, entsprechend zur Anzahl der Elemente im Array

function do2(a, b, c){ 
    alert (a + b + c);  
} 

do2(...[5, 3, 5]); 

Das zweite Beispiel erwartet, dass für die Funktion ein Objekt als Parameter, {a , b , c} destructures das übergebene Objekt a Zuordnung b, c als lokale Variablen innerhalb der Funktion

function do3({a , b , c}){ 
    alert (a + b + c); 
} 
do3({a:5, b:3, c:5}); 

Siehe auch What is SpreadElement in ECMAScript documentation? Is it the same as Spread operator at MDN?