Verständnis und Anwendung des Destrukturierungsoperators von JavaScript ES6

Vorwort

Ich habe vor Kurzem JavaScript gelernt und das Dekonstruktionssymbol in ES6 gesehen. Ich denke, dies hat die Vereinfachung unseres Codes erheblich verbessert und wurde in der Unternehmensentwicklung verwendet. Wenn andere es in Zukunft bei der Arbeit verwenden, Sie aber ihren Code nicht verstehen, wird dies enorme Auswirkungen haben. Also, lerne fleißig.

Man kann es verwenden, aber man kann es nicht nicht verstehen✔

In JavaScript ES6 gibt es viele Funktionen, die den Code vereinfachen und Programmierern das Schreiben erleichtern sollen. Der Dekonstruktionsoperator ist eine der besten Funktionen. Er kann den Code prägnanter machen und seine Lesbarkeit verbessern, indem er die Verwendung von Zuweisungsanweisungen oder den Zugriff auf Datenindizes und Objekteigenschaften reduziert.

Die Rolle von Dekonstruktionssymbolen

Die Destrukturierungszuweisung ist eine Erweiterung des Zuweisungsoperators. Es handelt sich um eine Methode zum Mustervergleich für Arrays oder Objekte und zur anschließenden Zuweisung von Werten zu den darin enthaltenen Variablen.

ES6 ermöglicht es, Werte aus Arrays und Objekten zu extrahieren und Variablen nach einem bestimmten Muster Werte zuzuweisen, was als Destrukturierung bezeichnet wird.

Anwendung

Grundlegende Verwendung

sei [a,b,c] = [1,2,3];
// sei a = 1, b = 2, c = 3;

Verschachtelte Verwendung

// Array let [a, [[b], c]] = [1, [[2], 3]];
	konsole.log(a); // 1
	console.log(b); // 2
	console.log(c); // 3
// Objekt let obj = { x: ['hallo', {y: 'welt'}] };
 sei { x: [x,{ y }] } = obj;
	console.log(x); // hallo
	console.log(y); // Welt

Vernachlässigung

// Array let [a, , b] = [1, 2, 3];
	konsole.log(a); // 1
	console.log(b); // 3

// Objekt let obj = { x: ['hallo', { y: 'welt' }] };
 lass { x: [x, { }] } = Objekt;
	console.log(x); // hallo

Unvollständige Dekonstruktion

// Array let [a = 1, b] = [];
	konsole.log(a); // 1
	console.log(b); // undefiniert

// Objekt let obj = { x: [{ y: 'world' }] };
 lass { x: [{ y }, x] } = obj;
	console.log(x); // undefiniert
	console.log(y); // Welt

Rest-Operator

// Array let [a, ...b] = [1, 2, 3];
	konsole.log(a); // 1
	console.log(b); // [2,3]

// Objekt let {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40};
	konsole.log(a); // 10
	console.log(b); // 20
	console.log(rest); // { c: 30, d: 40 }

Zeichenfolge

lass [a, b, c, d, e] = 'hallo';
console.log(a); // h
console.log(b); // e
console.log(c); // l
konsole.log(d); // l
console.log(e); // o

Destrukturierung von Standardwerten

// Wenn das Dekonstruktionsmuster ein übereinstimmendes Ergebnis hat und das übereinstimmende Ergebnis nicht definiert ist, wird der Standardwert als Rückgabeergebnis ausgelöst.
 sei [a = 2] = [undefiniert]; 
	konsole.log(a); // 2
// Objekt let {a = 10, b = 5} = {a: 3};
 	konsole.log(a); // 3
 	console.log(b); // 5

Vertauschen Sie die Werte von Variablen.

sei a = 1;
sei b = 2;
[a,b] = [b,a];
	konsole.log(a); // 2
	console.log(b); // 1

Anwendung der Destrukturierungszuweisung

// 1. Oberflächliches Klonen und Zusammenführen let name = { name: "aaa" }
let Alter = { Alter: 'bbb' }
let person = { ...Name, ...Alter }
console.log(Person) // { Name: "aaa", Alter: 'bbb' }

sei a = [1,2,3];
sei b = [4,5];
sei c = [...a,...b];
console.log(c); // [1,2,3,4,5]

// 2. JSON-Daten extrahieren let JsonData = { id: 10, status: "OK", data: [111, 222] } 
let { id, status, daten: zahlen } = JsonData; 
console.log(id, status, zahlen); //10 "OK" [111, 222]

// 3. Definition der Funktionsparameter // Parameter in der Reihenfolge function fun1([a, b, c]) { console.log(a, b, c) } 
spaß1([1, 2, 3]); // 1 2 3

// Die Parameter sind in der falschen Reihenfolge Funktion fun2({ x, y, z }) { console.log(x, y, z) } 
fun2({ z: 3, x: 2, y: 1 }); // 2 1 3

// Parameter haben Standardwerte Funktion fun3 ([a=1,b]) {
konsole.log(a,b);
}
Spaß3([,3]) // 1 3

Kurzvortrag zur Anwendung

Extrahieren Sie JSON-Daten

Oben sind mehrere Anwendungen der Dekonstruktionszuweisung aufgeführt. Die zweite, die wir am häufigsten verwenden, ist das Extrahieren von JSON-Daten. Die vom Backend an das Frontend übergebenen Daten sind JSON-Daten. Das Frontend weist die Daten normalerweise einem Objekt zu. Dies ist die verwendete Methode.

Der erweiterbare Operator...

Ich habe es verwendet, als ich Fragen zu Leetcode gestellt habe. Ich habe arr.push(...arr1) verwendet, um zwei Arrays zusammenzuführen, was ein bisschen dem obigen oberflächlichen Klonen und Zusammenführen ähnelt. Im Vergleich zu unseren vorherigen Vorgängen zum Zusammenführen von Arrays ist dies viel einfacher.

Frage 88: Zwei sortierte Arrays zusammenführen.

var merge = Funktion(Zahlen1, m, Zahl2, n) {
    Nums1.Länge=m;
    nums2.Länge=n;
    nums1.push(...nums2);
    lass arr = nums1.sort((a,b)=>{
        Rückkehr ab;
    })
    Rückflug an;
};

...Dieser Operator durchläuft die Daten im Array und kopiert sie in das aktuelle Objekt.

Die Methode arr.push(...arr1) analysiert alle Array-Elemente von arr1 und fügt sie dann nacheinander zu arr hinzu, wodurch die Zusammenführung der beiden Arrays abgeschlossen wird.

Austauschen von Variablenwerten

Schauen wir uns die Anwendung zum Austauschen von Variablenwerten an. Ich erinnere mich vage an eine Interviewfrage eines Vorgesetzten: Tauschen Sie die Werte von a und b aus, ohne zusätzlichen Speicherplatz zu belegen. Damals gab es zwei Lösungen. Eine bestand darin, XOR zu verwenden, und die andere darin, mathematische Methoden zu verwenden, um ab zu addieren und sie dann separat zu subtrahieren (a=a+b, b=ab, a=ab). Ist dies nun auch mit der Methode der Dekonstruktion der Symbole [a,b] = [b,a] möglich?

Zusammenfassen

Damit ist dieser Artikel zum Verständnis und zur Anwendung von JavaScript ES6-Destrukturierungsoperatoren abgeschlossen. Weitere Informationen zu ES6-Destrukturierungsoperatoren 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!