Heim > Web-Frontend > js-Tutorial > Hauptteil

ES6-Spread-Operator

大家讲道理
Freigeben: 2017-08-19 10:22:07
Original
2697 Leute haben es durchsucht

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])
Nach dem Login kopieren

Ergebnis:

3 4 5
Nach dem Login kopieren

Der Aufruf lautet eigentlich:

console.log(3, 4, 5)
Nach dem Login kopieren

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])
Nach dem Login kopieren

Ergebnis:

[ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]
Nach dem Login kopieren

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)
}
Nach dem Login kopieren

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])
Nach dem Login kopieren

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)
Nach dem Login kopieren

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

fun1(...arr4)
Nach dem Login kopieren

Ergebnis:

arg1 arg2 arg3 arg4
Nach dem Login kopieren

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)
Nach dem Login kopieren

Ergebnis:

1[ 2, 3, 4, 5, 6 ]
Nach dem Login kopieren

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)
Nach dem Login kopieren

Ergebnis:

1 2 3
Nach dem Login kopieren

Erweiterte Karte.

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

Ergebnis:

[ 'k1', 1 ] [ 'k2', 2 ] [ 'k3', 3 ]
Nach dem Login kopieren

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)
Nach dem Login kopieren

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

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage