Detaillierte Erläuterung der Destrukturierungszuweisung von JS ES6-Variablen

1. Was ist Dekonstruktion?

ES6 ermöglicht es, Werte aus Arrays und Objekten zu extrahieren und Variablen nach einem bestimmten Muster Werte zuzuweisen, was als Destrukturierung bezeichnet wird. Die Syntax ist prägnanter, kompakter und klarer als die von ES5. Dadurch verringert sich nicht nur die Menge an Code, die Sie schreiben müssen, sondern Ihre Art zu programmieren kann sich auch grundlegend ändern.

2. Array-Destrukturierung

Bisher konnten wir zum Zuweisen von Werten zu Variablen nur die Werte direkt angeben, wie zum Beispiel

sei a = 1;
sei b = 2; 
sei c = 3;

Jetzt können Sie die Array-Destrukturierung verwenden, um Werte zuzuweisen

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

Dies ist die grundlegendste Art der Array-Dekonstruktion. Sie können auch Objekt-Arrays dekonstruieren

// Dekonstruktion des Objekt-Arrays let [a, b, c] = [{name: 'jacky'}, {name: 'monkey'}, {name: 'houge'}];
konsole.log(a, b, c); // {name: 'jacky'}, {name: 'monkey'}, {name: 'houge'}

3. Vereinheitlichung von Array-Modus und Zuweisungsmodus

Dies kann so verstanden werden, dass die Formen auf der linken und rechten Seite des Gleichheitszeichens vereinheitlicht werden müssen. Wenn sie nicht vereinheitlicht sind, schlägt die Dekonstruktion fehl.

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

 // Extrahiere alle Werte außer dem zweiten und dritten let [a, , , d] = [1, 2, 3, 4];
konsole.log(a, d); //1 4
    
sei [a, ...b] = [1, 2, 3, 4];
konsole.log(a, b); // 1 [2, 3, 4]
        
sei [a, , , ...d] = [1, 2, 3, 4, 5];
konsole.log(a, d); // 1 [4, 5]
Wenn die Dekonstruktion nicht erfolgreich ist, ist der Wert der Variablen gleich undefiniert

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

sei [c] = [];
console.log(c); // undefiniert

Wenn die Dekonstruktion nicht erfolgreich ist, ist der Wert der Variablen gleich undefiniert

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

sei [c] = [];
console.log(c); // undefiniert

Das Obige ist ein Fall vollständiger Dekonstruktion. Es gibt auch eine unvollständige Dekonstruktion, d. h. das Muster auf der linken Seite des Gleichheitszeichens stimmt nur mit einem Teil des Arrays auf der rechten Seite des Gleichheitszeichens überein, und die Dekonstruktion kann trotzdem erfolgreich sein.

sei [x, y] = [1, 2, 3]; 
konsole.log(x, y); // 1 2

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

4. Destrukturierung von Standardwerten

Durch die Destrukturierungszuweisung können Standardwerte angegeben werden.

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

sei [a=1, b=2, c, d=13] = [10, 11, 12];
konsole.log(a, b, c, d); // 10 11 12 13

5. Objektdekonstruktionsaufgabe

Die Destrukturierung von Objekten unterscheidet sich in einem wichtigen Punkt von der Destrukturierung von Arrays. Die Elemente eines Arrays sind in einer bestimmten Reihenfolge angeordnet und der Wert einer Variablen wird durch ihre Position bestimmt. Die Eigenschaften eines Objekts haben jedoch keine Reihenfolge und die Variable muss denselben Namen wie die Eigenschaft haben, um den richtigen Wert zu erhalten.

// Der interne Mechanismus der Objektdekonstruktionszuweisung besteht darin, zuerst das Attribut mit demselben Namen zu finden und es dann der entsprechenden Variablen zuzuweisen. Tatsächlich wird Letzteres und nicht Ersteres zugewiesen.
lass obj = { a: "aaa", b: "bbb" };
sei { a: x, b: y } = obj; 
konsole.log(x, y); // aaa bbb

sei { a, b } = { a: 'aaa', b: 'bbb' };
konsole.log(a, b); // aaa bbb

// Nicht in der richtigen Reihenfolge let { b, a } = { a: 'test1', b: 'test2' }
konsole.log(a, b) // test1 test2


// Verschachtelte Destrukturierung let { obj: { name }} = { obj: { name: 'jacky', age: '22' } }
console.log(Name) // jacky

// Etwas komplexer verschachtelt let obj = {
    P: [
        'Hallo',
        { y: 'Welt' }
    ]
};

lass { p: [x, { y }] } = obj;
console.log(x, y); // Hallo Welt

Sollte der Variablenname nicht mit dem Attributnamen übereinstimmen, muss dieser wie folgt geschrieben werden.

var { foo: umbenennen } = { foo: "aaa",bar: "bbb" };
console.log(umbenennen); // aaa
console.log(foo); // Nicht abgefangener Referenzfehler: foo ist nicht definiert

Wenn die Variable vor der Destrukturierung definiert wird, treten zu diesem Zeitpunkt Probleme mit der Destrukturierung auf. Der folgende Code ist falsch und die Kompilierung wird einen Fehler melden (weil die JS-Engine {a} als Codeblock versteht, was zu einem Syntaxfehler führt. Dieses Problem kann nur gelöst werden, indem die geschweiften Klammern am Anfang der Zeile weggelassen werden, um zu verhindern, dass JS sie als Codeblock interpretiert).

lass ein;
lass obj = { a: "aaa" };
{a} = obj; // Nicht abgefangener Syntaxfehler: Unerwartetes Token '='

Um den Fehler zu beheben und das Programm ordnungsgemäß funktionieren zu lassen, fügen Sie einfach eine Klammer außerhalb der Dekonstruktionsanweisung hinzu.

lass ein;
lass obj = { a: "aaa" };
( {a} = Objekt );
console.log(a); // aaa

6. Funktionsparameter

Funktionsparameter können auch mittels Destrukturierung zugewiesen werden.

Funktion addieren([x, y]){
  gib x + y zurück;
}

hinzufügen([1, 2]); // 3

Bei der Destrukturierung von Funktionsparametern können auch Standardwerte verwendet werden.

Funktion fn(x, y = 7) {
    gib x + y zurück;
}
console.log(fn(3)); // 10

7. Destrukturierung von Strings

Der String wird in ein arrayähnliches Objekt umgewandelt.

const [a, b, c, d, e, f] = "hallo";
console.log(a); //h
console.log(b); //e
console.log(c); //l
konsole.log(d); //l
console.log(e); //o
console.log(f); //undefiniert

8. Destrukturierende Zuweisung von numerischen und booleschen Werten

Wenn beim Destrukturieren und Zuweisen von Werten die rechte Seite des Gleichheitszeichens ein numerischer Wert oder ein Boolescher Wert ist, wird dieser zuerst in ein Objekt konvertiert.

: Lassen Sie uns { toString: s } = 0;
console.log(s === Nummer.prototyp.toString); // wahr

} = true;
console.log(s === Boolean.prototype.toString); // wahr

Die Regel der destrukturierenden Zuweisung besteht darin, dass, solange der Wert auf der rechten Seite des Gleichheitszeichens kein Objekt oder Array ist, dieser zunächst in ein Objekt umgewandelt wird. Da „undefined“ und „null“ nicht in Objekte umgewandelt werden können, kommt es bei der Destrukturierung und Zuweisung zu Fehlern.

let { prop: x } = undefiniert; // Typfehler
let { prop: y } = null; // Typfehler

9. Anwendung der Destrukturierungszuweisung

1. Tauschen Sie die Werte von Variablen aus

Die übliche Methode zum Vertauschen zweier Variablen erfordert eine zusätzliche temporäre Variable, wie folgt

sei a = 1;
sei b = 2;
lass temp;

temp = ein;
a = b;
b = Temperatur;

konsole.log(a, b); // 2 1

Wenn Sie die Destrukturierungszuweisung von ES6 verwenden, wird es sehr prägnant

sei a = 1;
sei b = 2;
[a, b] = [b, a];

konsole.log(a, b); // 2 1

2. Mehrere Werte aus einer Funktion zurückgeben

Eine Funktion kann nur einen Wert zurückgeben. Wenn Sie mehrere Werte zurückgeben möchten, können Sie diese nur in einem Array oder Objekt zurückgeben. Mit der Destrukturierungszuweisung können diese Werte sehr bequem extrahiert werden.

//Gibt ein Array zurück Funktion example() {
  Rückkehr [1, 2, 3];
}
lass [a, b, c] = Beispiel();

//Gib eine Objektfunktion zurück example() {
  zurückkehren {
    foo: 1,
    Takt: 2
  };
}
let { foo, bar } = Beispiel();

3. Zugriff auf Elemente in einem Array

Es gibt ein Szenario, in dem beispielsweise ein Array vorhanden ist (das leer sein kann). und Sie möchten auf das erste, zweite oder n-te Element eines Arrays zugreifen, aber falls das Element nicht existiert, verwenden Sie einen angegebenen Standardwert.

Normalerweise wird die Längeneigenschaft des Arrays verwendet, um zu bestimmen

const-Liste = [];

let firstItem = "hallo";
if (Listenlänge > 0) {
    erstesElement = Liste[0];
}

console.log(firstItem); // hallo

Wenn zur Implementierung der obigen Logik die ES6-Destrukturierungszuweisung verwendet wird

const-Liste = [];
const [firstItem = 'hallo'] = Liste;

console.log(firstItem); // 'hallo'

4. JSON-Daten extrahieren

lass jsonData = {
  Ich würde: 42,
  Status: "OK",
  Daten: [867, 5309]
};

let { id, status, daten: nummer } = jsonData;

console.log(ID, Status, Nummer);
// 42, "OK", [867, 5309]

5. Durchlaufen der Kartenstruktur

Jedes Objekt, das die Iterator-Schnittstelle implementiert, kann mit einer for...of-Schleife durchlaufen werden. Die Map-Struktur unterstützt nativ die Iterator-Schnittstelle und es ist sehr praktisch, Schlüsselnamen und Schlüsselwerte durch die Kombination der Variablendekonstruktionszuweisung zu erhalten.

const map = neue Map();
map.set('zuerst', 'hallo');
map.set('zweite', 'Welt');

für (let [Schlüssel, Wert] von Map) {
  console.log(Schlüssel + " ist " + Wert);
}
// zuerst kommt hallo
// Zweite ist Welt

Wenn Sie nur den Schlüsselnamen oder nur den Schlüsselwert erhalten möchten, können Sie ihn wie folgt schreiben.

// Den Schlüsselnamen für (let [key] of map) abrufen {
  // ...
}

// Hole den Schlüsselwert für (let [,value] von map) {
  // ...
}

Oben finden Sie eine ausführliche Erläuterung der Dekonstruktionszuweisung von JS ES6-Variablen. Weitere Informationen zur Dekonstruktionszuweisung von JS ES6-Variablen finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!