ES6-Spread-Operator

Man kann sagen, dass der Spread-Operator von ES6 sehr nützlich ist und großen Komfort beim Übergeben von Parametern an Funktionen mit mehreren Parametern, beim Ersetzen von Apply, beim Zusammenführen von Arrays sowie beim Zerstören und Zuweisen von Werten bietet.

Der Spread-Operator besteht aus drei Punkten „…“, was bedeutet, dass jedes Element im Objekt, das die Iterator-Schnittstelle implementiert, einzeln iteriert und zur individuellen Verwendung herausgenommen wird.

Sehen Sie sich dieses Beispiel an:

console.log(...[3, 4, 5])

Ergebnis:

3 4 5

Der Aufruf lautet eigentlich:

console.log(3, 4, 5)

Merge arrays

Sie können den Spread verwenden Operator zum Kombinieren mehrerer Arrays. Arrays werden zusammengeführt.

let arr1 = [1, 2, 3]
let arr2 = [4, 5, 6]
let arr3 = [7, 8, 9]
console.log([...arr1, ...arr2, ...arr3])

Ergebnis:

[ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]

Funktion Multiparameterübergabe, Ersatz Anwenden

Definieren Sie zunächst die Parameter als Array und die Funktion ist definiert.

let arr4 = ['arg1', 'arg2', 'arg3', 'arg4']
let fun1 = (a1, a2, a3, a4) => {
  console.log( a1, a2, a3, a4)
}

Vor ES6 mussten Sie Array-Parameter an die Funktion übergeben oder auf die Array-Elemente entsprechend dem Index zugreifen, um die Funktion aufzurufen. Der Nachteil ist, dass die Anzahl der Arrays und die Anzahl der Funktionsparameter vollständig begrenzt sind. Wenn sich eine Zahl ändert, muss sie geändert werden.

fun1(arr4[0], arr4[1], arr4[2], arr4[3])

Oder verwenden Sie einfach Apply, um es aufzurufen. Das Ergebnis ist natürlich kein Problem und wurde vor ES6 am häufigsten verwendet.

fun1.apply(null, arr4)

Es ist praktisch, wenn Sie den Spread-Operator verwenden.

fun1(...arr4)

Ergebnis:

arg1 arg2 arg3 arg4

Der Anruf ist einfach und erfrischend .

wird in Verbindung mit Destrukturierung und Zuweisung

verwendet, um alle Elemente nach dem ersten aus dem Array in ein anderes Array zu extrahieren.

let [var1, ...arr5] = [1, 2, 3, 4, 5, 6]
console.log(var1)
console.log(arr5)

Ergebnis:

1[ 2, 3, 4, 5, 6 ]

Aber Vorsicht, beim Rückbau Beim Abgleich kann der Spread-Operator nur für den letzten verwendet werden, andernfalls wird ein Fehler gemeldet.

Sie können Objekte erweitern, die die Iterator-Schnittstelle implementieren

Zum Beispiel werden Map, Set und Array über die Iterator-Schnittstelle implementiert, aber Das Objekt ist nicht vorhanden, daher meldet Extending Object einen Fehler.

Set erweitern.

let set1 = new Set()
set1.add(1)
set1.add(2)
set1.add(3)
console.log(...set1)

Ergebnis:

1 2 3

Erweiterte Karte.

let map1 = new Map();
map1.set('k1', 1);
map1.set('k2', 2);
map1.set('k3', 3);
console.log(...map1)

Ergebnis:

[ 'k1', 1 ] [ 'k2', 2 ] [ 'k3', 3 ]

Hinweis: Die erweiterten Arrays Gemäß der Schlüssel-Wert-Paarstruktur der Karte besteht jedes Array aus zwei Elementen, eines ist der Schlüssel und das andere ist der Wert.

Wenn Sie Object erweitern, wird ein Fehler gemeldet.

let obj1 = {
   p1: 1,
   p2: 2,
   p3: 3}
console.log(...obj1)

Das obige ist der detaillierte Inhalt vonES6-Spread-Operator. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!