Beispiele für die Verwendung des ES6-Spread-Operators

Was sind Spread- und Rest-Operatoren?

In ES6 werden die Spread- und Rest-Operatoren beide durch (...) dargestellt, wobei Spread der Expansionsoperator und Rest der verbleibende (Sammlungs-)Operator ist. Die Verwendung dieses Operators an verschiedenen Stellen hat unterschiedliche Auswirkungen, die aus der Perspektive des Lesens und Schreibens betrachtet werden können. Der Schreibvorgang hat eine Sammelfunktion und der Lesevorgang hat eine Erweiterungsfunktion. In ES6 funktionierte der Operator (...) nur auf Arrays und ES7 fügte eine Erweiterung für Objekte hinzu.

Array-Spread-Operator

Restoperator (Sammlungsfunktion)

Wenn der Operator (...) nicht verwendet wird, wird eine Summenfunktion implementiert. Die übergebenen Parameter sind unsicher und es können nur Argumente verwendet werden. Zum Beispiel:

Funktion Summe(){
	sei SummeZahl=0;
    für (lass i = 0; i < Argumente. Länge; i ++) {
        SummeZahl += Argumente[i];
    }
    gib Summenzahl zurück;
}
konsole.log(Summe(1,2,3)); //6
konsole.log(Summe(4,5,6,7,8)); //30

Wenn wir den Rest-Operator verwenden, kann unser Code viel einfacher sein:

Funktion Summe(...arg){
	sei SummeZahl=0;
   	arg.forEach(Funktion(Element){
        SummeZahl+=Element;
    })
    gib Summenzahl zurück;
}
konsole.log(Summe(1,2,3)); //6
konsole.log(Summe(4,5,6,7,8)); //30

Zu diesem Zeitpunkt werden die übergebenen Parameter in arg geschrieben und bilden ein Array. Wir können arg drucken:

Funktion Summe(...arg){
    konsole.log(arg);
}
konsole.log(Summe(1,2,3)); // (3) [1, 2, 3]
console.log(Summe(4,5,6,7,8)); //(5) [4, 5, 6, 7, 8]

Wenn die von uns übergebenen Parameter Elemente enthalten, die übergeben werden müssen, können wir den Restoperator an der letzten Position des Parameters verwenden:

Funktionstest(a, b, ...arg) {
	konsole.log(a,b,arg);
}
test(1,2,3,4,5,6,7,8); //1 2 (6) [3, 4, 5, 6, 7, 8]

Es ist ersichtlich, dass die Ausgabe a und b die ersten beiden Elemente der tatsächlichen Parameter sind und die später übergebenen Parameter in Arrays konvertiert und in arg gespeichert werden.

Spread-Operator

sei arr = [1,2,3,4,5];
console.log(arr); //(5) [1, 2, 3, 4, 5]
konsole.log(...arr); // 1 2 3 4 5

Wie Sie sehen, wird das Array erweitert und ausgegeben, wenn der Operator (...) verwendet wird.

Wenn wir Arrays zusammenführen möchten, ist der traditionelle Ansatz:

sei arr1=[1,2,3];
sei arr2=[5,6,7,8];
let arr3=[].arr3.concat(arr1,arr2); //entspricht let arr3=new Array();arr3.concat(arr1,arr2);
console.log(arr3); //(7) [1, 2, 3, 5, 6, 7, 8]

So verwenden Sie den Operator (...):

sei arr1=[1,2,3];
sei arr2=[5,6,7,8];
sei arr3=[...arr1,...arr2];
console.log(arr3); //(7) [1, 2, 3, 5, 6, 7, 8]

Schauen wir uns an, wie es implementiert wird. Wir können Babel verwenden, um die ES6-Syntax in ES5 zu konvertieren:

"streng verwenden";

var arr1 = [1, 2, 3];
var arr2 = [5, 6, 7, 8];
var arr3 = [].concat(arr1, arr2);

Es ist ersichtlich, dass sein Implementierungsprinzip auch die Concat-Methode des Arrays ist. Daher ist der (...)-Operator eine syntaktische Vereinfachung und beeinträchtigt die ursprüngliche Funktionalität nicht.

Objektverteilungsoperator

Flacher Klon

In ES7 unterstützt der Operator (...) die Erweiterung von Objekten.

lass die Schule={	
    Name: „xxx Universität“,
    Geschichte:'50'
};
lass Lehrer={
    Führer:{
        Name:'Schulleiter xx',
        Alter:'40',
    },
    personNum:60
};

Wenn wir das obige Objekt in ein anderes Objekt klonen möchten, besteht der traditionelle Ansatz darin, selbst eine Klonfunktion zu schreiben oder die Extend-Methode in jQuery zu verwenden. Jetzt müssen wir es nur noch mit dem Operator (...) vervollständigen.

lass obj = {
    ...Schule,
    ...Lehrer
}
console.log(obj); /* Objekt
					Geschichte: "50"
					Leiter: {Name: "Direktor xx", Alter: "40"}
					Name: „xxx Universität“
					personNum: 60
					__proto__: Objekt*/

Wie Sie sehen, ist das Klonen mit dem Operator (...) problemlos möglich, dieser Klon ist jedoch ein oberflächlicher Klon. Zum Beispiel:

obj.leader.name="xxx";
console.log(obj); /*Verlauf: "50"
					Leiter: {Name: "xxx", Alter: "40"}
					Name: „xxx Universität“
					personNum: 60
					__proto__: Objekt */
console.log(Lehrer); /*Leiter: {Name: "xxx", Alter: "40"}
						personNum: 60
						__proto__: Objekt */

Es gibt auch eine oberflächliche Klonmethode in ES6: Object.assign({ },obj1,obj2,...)

Dadurch wird das letztere Objekt in das erste geklont.

lass die Schule={	
    Name: „xxx Universität“,
    Geschichte:'50'
};
lass Lehrer={
    Führer:{
        Name:'Schulleiter xx',
        Alter:'40',
    },
    personNum:60
};
lass obj={};
Object.assign(Objekt,Schule,Lehrer);
console.log(obj); /*Verlauf: "50"
					Leiter: {Name: "Direktor xx", Alter: "40"}
					Name: „xxx Universität“
					personNum: 60
					__proto__: Objekt*/

Sie können sehen, dass das Klonen ebenfalls abgeschlossen ist.

Tiefer Klon

Wenn wir den Namenswert des Leiters im Objekt ändern, ändert sich auch der entsprechende Wert im ursprünglichen Lehrerobjekt. Wenn wir ein tiefes Klonen erreichen möchten, können wir den obigen Code ändern:

lass die Schule={	
    Name: „xxx Universität“,
    Geschichte:'50'
};
lass Führer={
     Name:'Schulleiter xx',
       Alter:'40',
}
lass Lehrer={
    Führer:{
        ...Führer
    }
    personNum:60
};
lass obj = {
    ...Schule,
    ...Lehrer,
    Führer:{
        ...Führer
    }
}

console.log(obj); /*Verlauf: "50"
					Leiter: {Name: "Direktor xx", Alter: "40"}
					Name: „xxx Universität“
            		personNum: 60
					__proto__: Objekt*/

obj.leader.name="xxx";

cosnole.log(obj); /*Verlauf: "50"
					Leiter: {Name: "xxx", Alter: "40"}
					Name: „xxx Universität“
					personNum: 60
					__proto__: Objekt*/
console.log(leader);. /*Alter: "40"
						Name: „Schulleiter xx“
						__proto__: Objekt*/
console.log(Lehrer); /*Leiter: {Name: "Direktor xx", Alter: "40"}
						personNum: 60
						__proto__: Objekt*/

Wie Sie sehen, haben wir den Namenswert des Leiters in obj geändert, aber nur das obj-Objekt wurde geändert, während sich das Lehrerobjekt und das Leiterobjekt nicht geändert haben.
Wenn viele Ebenen von Referenzwerten vorhanden sind, wird diese Methode nicht empfohlen. Sie können selbst eine Methode zum tiefen Klonen schreiben. Natürlich gibt es auch eine andere Methode, die unkonventioneller ist. Mit JSON können Sie das zu klonende Objekt zunächst in eine Zeichenfolge und dann in ein Objekt umwandeln, sodass das neue Objekt nichts mit dem ursprünglichen Objekt zu tun hat.

lass Lehrer={
    Führer:{
        Name:'Schulleiter xx',
       	Alter:'40',
    }
    personNum:60
};
let obj = JSON.parse(JSON.stringify(Lehrer));
console.log(obj); /*Leiter: {Name: "Direktor xx", Alter: "40"}
					personNum: 60
					__proto__: Objekt*/

obj.leader.name="xxx";

Konsole.log(Objekt.Leader.Name); //"xxx"
console.log(lehrer.leiter.name); //"Schulleiter xx"

Wenn diese Methode jedoch Objekte klont, die Funktionen (function()), reguläre Ausdrücke (reg) und spezielle Objekte (new Data()) enthalten, gehen die oben genannten Eigenschaften verloren. Wenn Sie über die oben genannten Eigenschaften nicht verfügen, können Sie diese Methode verwenden.

Zusammenfassen

Dies ist das Ende dieses Artikels über ES6-Spread-Operatoren. Weitere Informationen zu ES6-Spread-Operatoren finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!