Neue Funktionen von JS ES: Einführung in Erweiterungsoperatoren

1. Spread-Operator

Der Spread-Operator besteht aus drei Punkten ..., mit denen ein Ausdruck an Ort und Stelle erweitert und in eine durch Kommas getrennte Folge von Argumenten umgewandelt werden kann, wenn mehrere Argumente erforderlich sind (z. B. bei einem Funktionsaufruf) oder mehrere Werte (z. B. bei einem Array).

Der Beispielcode lautet wie folgt:

//Definiere ein Array let arr = [1, 2, 3, 4, 5, 6]
// Erweitern mit dem ... Spread-Operator console.log(...arr); // 1 2 3 4 5 6

// Definieren Sie eine Funktion function fun(...item) {
  Konsole.log(...Element);
}
// Rufe die Funktion fun(1, 2, 3, 4, 5, 6) auf // 1 2 3 4 5 6

//Verwenden mit Ausdrücken let x = 10
arr = [
  ...(x > 0 ? ['a'] : []),
  'B',
];
console.log(...arr); //ab

2. Alternative apply()-Methode

Da der Spread-Operator Arrays erweitern kann, besteht für die apply Methode keine Notwendigkeit, Arrays in Funktionsparameter umzuwandeln.

Der Beispielcode lautet wie folgt:

// definiere eine Funktion function fun(a, b, c, d, e) {
  konsole.log(a, b, c, d, e);
}
//Definiere ein Array let arr = [1, 2, 3, 4, 5]
// ES5-Aufrufmethode fun.apply(null, arr) //1 2 3 4 5
// ES6 ruft Methode fun(...arr) auf // 1 2 3 4 5

Wenn wir in der tatsächlichen Entwicklung den Maximalwert im Array herausnehmen, ist die verwendete Methode wie folgt:

sei arr = [1, 20, 30, 50, 3, 88, ]
// ES5 let max = Math.max.apply(null, arr)
konsole.log(max); // 88

E wird wie folgt geschrieben:

sei arr = [1, 20, 30, 50, 3, 88, ]
// ES6 lass max = Math.max(...arr)
konsole.log(max); // 88

3. Anwendung des Erweiterungsoperators

Die Anwendung erweiterter Arrays spiegelt sich hauptsächlich in den folgenden Aspekten wider

1. Array kopieren

Vor ECMAScript 2015 : Wenn Sie arr1 einfach arr2 zuweisen, ändert sich arr1 auch, wenn Sie arr2 ändern. Dies wird als flache Kopie bezeichnet.

Der Beispielcode lautet wie folgt:

Lassen Sie uns zunächst das Konzept der tiefen und flachen Kopie verstehen:

• Deep Copy : Kopiert den Inhalt der Elemente im Array.
• Flache Kopie : Kopiert die Speicheradresse des Array-Element-Inhalts

sei arr1 = [1, 2, 3, 4, 5]
sei arr2 = arr1
console.log(arr2); // [ 1, 2, 3, 4, 5 ]
// Ändere den Dateninhalt von arr2 arr2[2] = 6;
// Beides wird sich ändern console.log(arr1, arr2); // [ 1, 2, 6, 4, 5 ] [ 1, 2, 6, 4, 5 ]

Wenn Sie eine vollständige Kopie erstellen möchten, lautet der Beispielcode wie folgt:

sei arr1 = [1, 2, 3, 4, 5]
lass arr2 = []
// ES5 für (let i = 0; i < arr1.length; i++) {
  arr2[i] = arr1[i];
}
arr2[2] = 6;
// Nur arr2 ändert sich console.log(arr1, arr2); // [ 1, 2, 3, 4, 5 ] [ 1, 2, 6, 4, 5 ]

// ES6 arr2 = [...arr1]
arr2[2] = 6;
// Nur arr2 ändert sich console.log(arr1, arr2); // [ 1, 2, 3, 4, 5 ] [ 1, 2, 6, 4, 5 ]

2. Arrays zusammenführen

Der Spread-Operator bietet eine neue Möglichkeit zum Schreiben von Array-Zusammenführungen. Der Beispielcode lautet wie folgt:

const arr1 = ['a', 'b'];
const arr2 = ['c'];
const arr3 = ['d', 'e'];

// ES5-Array zusammengeführt console.log(arr1.concat(arr2, arr3)); // [ 'a', 'b', 'c', 'd', 'e' ]


// ES6-Array zusammengeführt console.log([...arr1, ...arr2, ...arr3]); // [ 'a', 'b', 'c', 'd', 'e' ]

Es ist erwähnenswert, dass es sich bei beiden Methoden um oberflächliche Kopien handelt.

3. Verwendung mit entkoppelter Zuweisung

Der Spread-Operator kann mit einer Destrukturierungszuweisung kombiniert werden, um Arrays zu generieren (zum Aufnehmen der verbleibenden Daten).

Hinweis: Der Spread-Operator kann nur ans Ende gesetzt werden.

Der Beispielcode lautet wie folgt:

// Szenarioanalyse: Holen Sie sich den ersten und letzten Wert im Array let arr = [1, 2, 3, 4, 5]
lass zuerst ruhen;
// ES5-Schreiben: Ausleihe Array.slice()-Funktion first = arr[0]
rest = arr.slice(1)
console.log(erste, rest); // 1 [ 2, 3, 4, 5 ]
// ES6-Schreibweise [first, ...rest] = arr
console.log(erster, rest); // 1 [ 2, 3, 4, 5 ]

4. Teilen Sie einen String in ein Array auf

Der Spread-Operator kann auch Zeichenfolgen in echte Arrays umwandeln. Der Beispielcode lautet wie folgt:

let str = 'Fuchsdämon, kleiner Heiratsvermittler'
console.log([...str]); // [ 'Fuchs', 'Dämon', 'klein', 'rot', 'Mutter' ]

Dies ist das Ende dieses Artikels über die Einführung der neuen Funktion des JS ES-Erweiterungsoperators. Weitere Informationen zur Einführung des ES-Erweiterungsoperators finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!