Beispielcode des Spread-Operators und seiner Anwendung in JavaScript

Der Spread-Operator ermöglicht die Erweiterung eines Ausdrucks an einer bestimmten Stelle. Der Spread-Operator kann verwendet werden, wenn mehrere Parameter (für Funktionsaufrufe) oder mehrere Elemente (für Array-Literale) oder mehrere Variablen (für Destrukturierungszuweisungen) vorhanden sind.

lass obj1 = {
 Wert1: 1,
 Wert2: 2
};
lass obj2 = {...obj1
};
console.log(obj2); // {Wert1: 1, Wert2: 2}

Die obige Verwendung entspricht eigentlich

obj2 = {Wert1: 1, Wert2: 2}

Der Unterschied zwischen dem Schreiben des Spread-Operators und dem Schreiben der direkten Zuweisung von obj2 = obj1 besteht darin, dass die direkte Zuweisung des Werts für引用類型dem Zuweisen der Speicherplatzadresse von obj1 entspricht. Wenn sich obj2 ändert, ändert sich auch obj1 entsprechend. Wenn Sie展開運算符verwenden, ist dies gleichbedeutend mit der Neuerstellung eines Objekts, da die Attributtypen im Objekt obj1 alle基本類型sind. Wenn sich zu diesem Zeitpunkt obj2 ändert, wirkt sich dies nicht auf das Objekt obj1 aus. Dies ist jedoch nur auf den Fall beschränkt, in dem alle Eigenschaften vom Basistyp sind (oder anders ausgedrückt, es wird nur eine Ebene einer tiefen Kopie ausgeführt). Wenn die Eigenschaft im Objekt vom Referenztyp ist und der Wert des Referenztyps in der Eigenschaft geändert wird, werden die Eigenschaftswerte beider Objekte geändert.

lass obj1 = {
 attri1: [3, 6, 0],
 attri2: 4,
 attri4: 5
};
lass obj2 = {...obj1
};

obj2.attri2 = 888;
obj2.attri1[0] = 7;

console.log('obj1:', obj1);
console.log('obj2:', obj2);

Anwendung des Spread-Operators

1. Verwenden des Spread-Operators in einer Funktion

Funktionstest(a, b, c){};

sei arr = [1, 2, 3];
Test(...arr);

2. Verwenden des Spread-Operators in Array-Literalen

sei arr1 = [1, 2];
lass arr2 = [...arr1, 3, 4]; // [1, 2, 3, 4]

// Push-Methode verwenden let arr1 = [1, 2];
sei arr2 = [3.4];
arr1.push(...arr2); // [1, 2, 3, 4]

3. Wird für die Dekonstruktionszuweisung verwendet. Der Erweiterungsoperator kann nur am Ende der Dekonstruktionszuweisung verwendet werden, andernfalls wird ein Fehler gemeldet.

// Der Spread-Operator kann nur am Ende einer Destrukturierungszuweisung verwendet werden.
sei [a, b, ...c] = [1, ,2, 3, 4]
console.log(a, b, c) // 1, 2, [3, 4]

4. Aus der Klasse Array wird Array

let oLis = document.getElementsByTagName("li");
sei liArr = [...oLis];

5. Verwenden Sie den Spread-Operator in Objekten
Der Object Spread Operator in ES7 ermöglicht uns, Objekte schneller zu manipulieren:

sei {x,y,...z}={x:1,y:2,a:3,b:4};
x; // 1
ja; // 2
z; // {a:3,b:4}

Ein Objekt in ein anderes Objekt einfügen:

sei z={a:3,b:4};
sei n={x:1,y:2,...z};
console.log(n); //{x:1,y:2,a:3,b:4}

Zwei Objekte zusammenführen:

sei a={x:1,y:2};
sei b={z:3};
sei ab={...a,...b};
console.log(ab); // {x:1,y:2,z:3}

Dies ist das Ende dieses Artikels über den Spread-Operator in JavaScript und seinen Anwendungsbeispielcode. Weitere relevante Inhalte zum JS-Spread-Operator finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!