Javascript-Destrukturierung in ES6

Die heutige Javascript-Kolumne stellt die Javascript-Dekonstruktion in ES6 vor.

Die Destrukturierungsfunktion in ES6 macht es für uns bequemer, Werte von Objekten (Object) oder Arrays (Array) abzurufen, und der geschriebene Code ist auch besser lesbar. Freunde, die bereits mit der Python-Sprache vertraut waren, sollten damit vertraut sein. Diese Funktion wurde bereits in Python implementiert. In Python können wir den folgenden Code verwenden, um den Wert zu erhalten:

lst = [3, 5]
first, second = lst 
print(first, second)复制代码

Die beiden Variablen erste und zweite werden 3 bzw. 5 im Array zugewiesen. Ist das nicht sehr einfach und klar?

Wie haben wir also normalerweise Werte von Objekten oder Arrays erhalten, bevor diese Funktion verfügbar war? Schauen wir uns den folgenden Code an:

let list = [3, 5]let first = list[0]let second = list[1]复制代码

Bei dieser Methode müssen Sie manuell einen Array-Index angeben, um der von Ihnen angegebenen Variablen den entsprechenden Wert zuzuweisen. Wenn Sie die Destrukturierungsfunktion von ES6 verwenden, wird der Code einfacher und lesbarer:

let [first, second] = list;复制代码

Destrukturierung von Objekten

Grundlegende Objektdestrukturierung

Werfen wir zunächst einen Blick darauf, wie man eine grundlegende Objektdestrukturierung in ES6 schreibt:

const family = {	father: ''
	mother: ''}const { father, mother } = family;复制代码

Wir haben seine beiden Attribute Vater und Mutter aus dem Familienobjekt dekonstruiert und sie den separat definierten Vater- und Mutterobjekten zugeordnet. Danach können wir den Wert des entsprechenden Schlüssels in der Familie direkt über die Vater- und Muttervariablen ermitteln. Dieses Beispiel ist die einfachste Anwendung der Destrukturierung von Objekten. Schauen wir uns weitere interessante Objekte an.

Destrukturierung nicht deklarierter Objekte

Im obigen Beispiel deklarieren wir zuerst das Familienobjekt und erhalten dann den Wert durch Destrukturierungssyntax. Ist es also in Ordnung, wenn Sie es nicht deklarieren:

const { father, mother } =  {father: '',mother: ''}复制代码

In manchen Fällen müssen wir ein Objekt nicht deklarieren oder es einer Variablen zuweisen und es dann dekonstruieren. Oftmals können wir nicht deklarierte Objekte direkt dekonstruieren.

Dekonstruieren Sie das Objekt und benennen Sie die Variablen um.

Wir können auch die Attribute im Objekt dekonstruieren und umbenennen, wie zum Beispiel:

const { father: f, mother:m } =  {father: '1',mother: '2'}console.log(f); // '1'复制代码

Im obigen Code wird der Vater im Objekt nach der Dekonstruktion neu zugewiesen Die Variable Im Vergleich zum vorherigen Beispiel entspricht f dem Umbenennen der Vatervariablen in f. Dann können Sie f verwenden, um den Vorgang fortzusetzen.

Dekonstruktion des Standardwerts

Stellen Sie sich ein Szenario vor, in dem ein Familienobjekt im Hintergrund zurückgegeben wird. Das ursprüngliche Familienobjekt hat drei Attribute, nämlich Vater, Mutter und Kind. Sie erhalten die zurückgegebenen Daten und dekonstruieren diese drei Attribute:

const { father, mother, child } =  {father: '1',mother: '2', child: '3'}复制代码

Das scheint in Ordnung zu sein, aber die Realität ist immer unbefriedigend. Aufgrund eines Fehlers im Code im Hintergrund enthält das zurückgegebene Familienobjekt nur Mutter und Kind, der Vater fehlt jedoch. Zu diesem Zeitpunkt, nach der Dekonstruktion des obigen Codes, wird Vater undefiniert:

const { father, mother, child } =  {father: '1',mother: '2'}console.log(child) //undefined复制代码

Oft möchten wir einen Standardwert dekonstruieren, wenn ein bestimmtes Attribut im Hintergrund fehlt. Tatsächlich kann es so geschrieben werden:

const { father = '1', mother = '2', child = '3'} =  {father: '1',mother: '2'}console.log(child) //'3'复制代码

In Kombination mit dem vorherigen Beispiel können Sie den Variablennamen ändern und einen Standardwert zuweisen:

const { father: f = '1', mother: m = '2', child: c = '3'} =  {father: '1',mother: '2'}复制代码

Destrukturierung in den Funktionsparametern

const family = {	father: ''
	mother: ''}function log({father}){	console.log(father)
}
log(family)复制代码

In den Parametern der Funktion verwenden Mit der Destrukturierungsmethode können Sie den Attributwert des eingehenden und ausgehenden Objekts direkt abrufen. Es ist nicht erforderlich, ihn wie zuvor mit „family.father“ zu übergeben.

Verschachtelte Objekte dekonstruieren

Im obigen Beispiel haben die Attribute der Familie nur eine Ebene. Wenn der Wert einiger Attribute der Familie auch ein Objekt oder Array ist, wie können die Attributwerte dieser verschachtelten Objekte dekonstruiert werden? Schauen wir uns den folgenden Code an:

const family = {	father: 'mike'
	mother: [{		name: 'mary'
	}]
}const { father, mother: [{	name:motherName
}]} = family;console.log(father); //'mike'console.log(motherName) //'mary'复制代码

Destrukturierung von Arrays

Die Destrukturierungsmethode von Arrays ist der von Objekten tatsächlich sehr ähnlich. Sie wurde auch am Anfang des Artikels kurz erwähnt, aber schauen wir uns einige an Typische Szenarien der Array-Destrukturierung.

Grundlegende Objektdekonstruktion

const car = ['AUDI', 'BMW'];const [audi, bmw] = car;console.log(audi); // "AUDI"console.log(bmw); // "BMW"复制代码

Solange es der Position des Arrays entspricht, kann der entsprechende Wert korrekt dekonstruiert werden.

Destrukturieren des Standardwerts

Dasselbe wie das Standardwertszenario der Objektdestrukturierung. Oft müssen wir beim Destrukturieren von Arrays auch Standardwerte hinzufügen, um den Geschäftsanforderungen gerecht zu werden.

const car = ['AUDI', 'BMW'];const [audi, bmw, benz = 'BENZ'] = car;console.log(benz); // "BENZ"复制代码

Austausch von Variablen bei der Dekonstruktion

Angenommen, wir haben die folgenden zwei Variablen:

let car1 = 'bmw';let car2 = 'audi'复制代码

Wenn wir diese beiden Variablen austauschen möchten, lautet der bisherige Ansatz:

let temp = car1;
car1 = car2;
car2 = temp;复制代码

Wir müssen eine Zwischenvariable verwenden, um dies zu erreichen. Viel einfacher ist es, die Array-Dekonstruktion zu verwenden:

let car1 = 'bmw';let car2 = 'audi'[car2, car1] = [car1, car2]console.log(car1); // 'audi'console.log(car2); // 'bmw'复制代码

Wenn Sie den Austausch von Elementpositionen innerhalb eines Arrays abschließen möchten, tauschen Sie beispielsweise [1,2,3] gegen [1,3,2] aus Sie können es so erreichen:

const arr = [1,2,3];
[arr[2], arr[1]] = [arr[1], arr[2]];console.log(arr); // [1,3,2]复制代码

Dekonstruieren Sie das Array aus der Rückgabe der Funktion

Viele Funktionen geben Ergebnisse vom Typ Array zurück, und die Werte können direkt durch Array-Destrukturierung erhalten werden:

functin fun(){	return [1,2,3]
}let a, b, c; 
[a, b, c] = fun();复制代码

Natürlich, wenn wir Ich möchte nur, dass die Funktion einige der Werte im Array zurückgibt. Das ist auch möglich. Ignorieren Sie sie.

functin fun(){	return [1,2,3]
}let a, c; 
[a, , c] = fun();复制代码

Sie können sehen, dass die Destrukturierungsfunktion von ES6 in vielen Szenarien sehr nützlich ist. Ich hoffe, dass jeder mehr Dekonstruktion auf Projekte anwenden kann, um den Code einfacher, klarer und verständlicher zu machen.

Verwandte kostenlose Lernempfehlungen: Javascript(Video)

Das obige ist der detaillierte Inhalt vonJavascript-Destrukturierung in ES6. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!