Verständnis und Anwendungsszenarien von ES6-Erweiterungsoperatoren

Der Spread-Operator, also der ...-Operator, ist eine neue Syntax, die zu es6 hinzugefügt wurde. Seine Hauptfunktion besteht darin, Arrays oder Objekte zu erweitern (diese Aussage ist möglicherweise nicht korrekt). Ich hoffe, die folgende Zusammenfassung hilft Ihnen dabei, seine Verwendung zu verstehen.

Mein persönliches Verständnis und meine Zusammenfassung der Anwendungsszenarien sind wie folgt:

1. Ersetzen Sie die Apply-Methode und verarbeiten Sie im Allgemeinen Parameter beim Aufrufen der Funktion

Nehmen wir an, dass unser Parameter ein Array ist (wir werden hier nicht auf einzelne Parameter eingehen, sondern sie einfach einzeln übergeben);

var args = [1, 2, 3];

Dann müssen wir die Summe aller Elemente in diesem Parameter-Array zurückgeben, daher ist der ES5-Ansatz wie folgt:

Funktion addFun(x, y, z) {
    gib x + y + z zurück;
}

var args = [1, 2, 3];

// Zwei aufrufende Methoden // 1. Diese Methode kann mit weniger Parametern verwendet werden, ist aber unzuverlässig, wenn zu viele Parameter vorhanden sind.
addFun(Argumente[0], Argumente[1], Argumente[2])

// 2. Verwenden Sie die Apply-Methode, um das Array addFun.apply(null, args); direkt zu übergeben.

Die Apply-Methode kann das Problem zu vieler Parameter sehr gut lösen, aber Voraussetzung ist, dass Sie klar zwischen den Apply- und Call-Methoden unterscheiden müssen. Es wird geschätzt, dass viele Schüler die Apply-Methode selten verwenden.

ES6 verwendet den Spread-Operator, der viel einfacher ist:

Funktion addFun(x, y, z) {
    gib x + y + z zurück;
}

var args = [1, 2, 3];

Füge den folgenden Code hinzu:

Hier zerlegt der ...-Operator das args-Array zur Berechnung in einzelne Elemente.

2. Restparameter (Restoperator), hauptsächlich für Funktionsparameter

Der Restoperator und der Spreadoperator haben beide denselben Namen, werden aber unterschiedlich verwendet. Man kann einfach verstehen, dass der Restoperator und der Spreadoperator Gegensätze sind. Der Spreadoperator erweitert ein Array oder Objekt, während der Restoperator mehrere Elemente „zusammenführt“.

Wird hauptsächlich für unbestimmte Parameter verwendet und kann als Ersatz für Argumente verstanden werden. Daher verwendet ES6 das Argumentobjekt nicht mehr.

lass demoFun = Funktion(...args) {
    für (let Element von Argumenten) {
        konsole.log(Element);
    }
}

demoFun(1, 2, 3) // 1, 2, 3

lass demoFun = Funktion(argA, ...args) {
    konsole.log(argA);
    console.log(Argumente)
}

demoFun(1, 2, 3);
// 1
// [dreiundzwanzig]

Betrachten Sie es bei Verwendung mit einer Struktur einfach als ein ganzes Element.

var [a, ...rest] = [1, 2, 3, 4];

// Hier wird ...rest als Element betrachtet. console.log(a) // 1
console.log(...rest) // [2, 3, 4]

3. Datenverbindung und -zusammenführung

Verketten Sie Arrays und verwenden Sie Push, um ein Array an das Ende eines anderen Arrays anzufügen

var arr1 = [1, 2, 3];
var arr2 = [4, 5, 6];

// ES5-Verarbeitungsmethode Array.prototype.push.apply(arr1, arr2);
console.log(arr1) // [1, 2, 3, 4, 5, 6]

// ES6-Verarbeitungsmethode arr1.push(...arr2);
console.log(arr1) // [1, 2, 3, 4, 5, 6]

Arrays zusammenführen (anstelle der Concat-Methode)

var arr1 = ['a', 'b', 'c'];
var arr2 = ['d', 'e', ​​​​'f'];

// ES5-Verkettung var es5Arr = arr1.concat(arr2);
konsole.log(es5Arr) // ['a', 'b', 'c', 'd', 'e', ​​​​'f']

// ES6-Zusammenführung var es6Arr = [...arr1, ...arr2];
console.log(es6Arr) // ['a', 'b', 'c', 'd', 'e', ​​​​'f']

4. Arrays und Objekte kopieren

Array-Kopie

var arr1 = [1, 2, 3];
var arr2 = [...arr1];

console.log(arr1 === arr2) // falsch

arr2.push(4); // Das Ändern von arr2 hat keine Auswirkungen auf den Wert von arr1 console.log(arr1); // [1, 2, 3]
console.log(arr2); // [1, 2, 3, 4]

Das Gleiche gilt für Objekte

var obj1 = {
    ein: 1,
    b: 2
};

var obj2 = {...obj1};

console.log(obj1 === obj2); // falsch

obj2.c = 3; // Das Ändern von obj2 wirkt sich nicht auf obj1 aus
console.log(obj1); // {a: 1, b: 2}
console.log(obj2); // {a: 1, b: 2, c: 3}

Hinweis: Der Erweiterungsoperator „copy“ ist eine oberflächliche Kopie und funktioniert nur auf der ersten Ebene des Arrays oder Objekts.

5. Konvertieren Sie den String in ein Array

var str = "hallo";

// ES5-Verarbeitungsmethode var es5Arr = str.split('');
console.log(es5Arr) // ["h", "e", "l", "l", "o"]

// ES6-Verarbeitungsmethode var es6Arr = [...str];
console.log(es6Arr) // ["h", "e", "l", "l", "o"]

6. Verwenden Sie beim Aufrufen einer Funktion den Erweiterungsoperator.

Wenn wir in der Vergangenheit Array-Elemente als Funktionsparameter iterieren wollten, haben wir im Allgemeinen Function.prototype.apply verwendet.

Funktion meineFunktion(x, y, z) { 
  konsole.log(x+""+y+""+z);
} 
var args = [0, 1, 2]; 
meineFunktion.apply(null, args);

Mit der Spread-Syntax können wir dies schreiben.

Funktion meineFunktion(x, y, z) { 
  konsole.log(x+""+y+""+z); 
} 

var args = [0, 1, 2]; 
meineFunktion(...args);

Tipp: …arr gibt kein Array zurück, sondern die Werte jedes Arrays. Nur [...arr] ist ein Array, daher kann ...arr verwendet werden, um Werte an Methoden zu übergeben.

Zusammenfassen

...Die allgemeinen Methoden und Szenarien des Operators sind wie oben beschrieben. Andere Verwendungsmethoden wie Map- und Pseudoarray-Konvertierung werden nicht im Detail vorgestellt. Interessierte Freunde können die Informationen selbst überprüfen. Tatsächlich ist die wesentliche Verwendung ähnlich. Zusammenfassend: Die drei Punkte werden beim Restoperator auf den formalen Parameter oder die linke Seite des Gleichheitszeichens gesetzt; beim Spreadoperator werden sie auf den tatsächlichen Parameter oder die rechte Seite des Gleichheitszeichens gesetzt, oder mit anderen Worten beim Restoperator auf die zugewiesene Seite und beim Spreadoperator auf die zugewiesene Seite.

Damit ist dieser Artikel zum Verständnis und zu den Verwendungsszenarien des ES6-Spread-Operators abgeschlossen. Weitere relevante Inhalte zum ES6-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!