Was ist es6-Dekonstruktion?

In es6 ist Destrukturieren der Prozess des Extrahierens von Werten aus Arrays und Objekten nach einem bestimmten Muster und dem Zuweisen von Werten zu Variablen; es ist ein Prozess, bei dem die Datenergebnisse aufgeteilt und in kleinere Teile aufgeteilt werden, was eine Vereinfachung ermöglichen kann die Extraktion von Informationen. Zu den häufigeren Zwecken gehören die Objektdestrukturierung, die Array-Destrukturierung und die gemischte Destrukturierung.

Die Betriebsumgebung dieses Tutorials: Windows 10-System, ECMAScript Version 6.0, Dell G3-Computer.

Was ist Destrukturierung in es6? Destrukturierung: Mit der Baidu-Enzyklopädie können Sie Werte aus Arrays und Objekten extrahieren und Variablen nach bestimmten Mustern zuweisen.

Zu den in der Entwicklung gebräuchlicheren Methoden gehören Objektdestrukturierung, Array-Destrukturierung und gemischte Destrukturierung. Hierbei handelt es sich um einen Prozess, bei dem eine Datenstruktur in kleinere Teile zerlegt wird, um die Extraktion von Informationen zu vereinfachen.

Teilen Sie vorhandene Objekte oder Arrays einzeln auf, um die benötigten Daten zu extrahieren. Es handelt sich um einen Prozess, bei dem die Datenstruktur aufgebrochen und in kleinere Teile aufgeteilt wird. ES6 verwendet einen neuen Modus, um dem Wert zu entsprechen, den Sie extrahieren möchten. Das Muster bildet die Datenstruktur ab, die Sie dekonstruieren, und nur die Daten, die mit dem Muster übereinstimmen, werden extrahiert.

Beispiel für die Objektdestrukturierung

Traditionelle Methode zum Abrufen des Werts im Objekt

let node = {
    type: 'Identifier',
    name: 'foo'
}
console.log(node.type) // Identifier
console.log(node.foo) // foo

Verwenden Sie die Destrukturierung

let node = {
    type: 'Identifier',
    name: 'foo'
}
let { type, name } = node
console.log(type) // Identifier
console.log(name) // foo

Wenn der angegebene lokale Variablenname nicht im Objekt vorhanden ist, wird der lokalen Variablen der Wert undefiniert zugewiesen

let { type, name, value } = node
console.log(type) // Identifier
console.log(name) // foo
console.log(value) // undefined

Wenn das angegebene Attribut nicht vorhanden ist, können Sie einen beliebigen Standardwert für das nicht vorhandene Attribut definieren.

let { type, name, value = true } = node
console.log(type) // Identifier
console.log(name) // foo
console.log(value) // true

Geben Sie einen neuen Variablennamen für die Destrukturierung und Zuweisung eines Werts an ? Herkömmliche Objektzuweisungen haben links vier Attribute und rechts einen Wert. Bei der Destrukturierung ist die rechte Seite jedoch das Attribut und die linke Seite der Wert, sodass sich der neue Variablenname auf der rechten Seite befindet.

Wenn Sie let, var oder const verwenden, um ein Objekt zu zerstören, darf der Wert des zerstörten Objekts nicht vorhanden sein.

Wenn die Zuweisung von var, let, const nicht verwendet wird, muss die Destrukturierungsanweisung mit () umschlossen werden Mit geschweiften Klammern wird tiefer in die nächste Ebene gesucht. Schauen wir uns zunächst ein Beispiel an:

let arr = {
  six: '男',
  age: 19
}
let {six:newSix, age:newAge} = arr
console.log(six, age) // six is not defined
console.log(newSix, newAge) // 男 19

Das Obige ist ein verschachtelter Objektknoten

（{type，name} = node);//{}在js中作为代码块，单独使用加等号会报错会报错

und Sie können sehen, dass wir die Attribute darin absichtlich unterbrochen haben {} Reihenfolge, die Ergebnisse werden immer noch korrekt ausgegeben, sodass Sie davon ausgehen können, dass die spezifische entsprechende Methode auf dem Namen basieren sollte und nichts mit der Reihenfolge zu tun hat.

Dekonstruieren Sie die zweite Ebene weiter

let node = {
    type: "Identifier",
    name: "foo",
    loc: {
        start: {
            line: 1,
            column: 1
        },
        end: {
            line: 1,
            column: 4
        }
    }
}

Hier können wir auch start einer neuen benutzerdefinierten lokalen Variablen zuweisen. Angenommen, wir weisen sie newStart zu.

let { loc, type, name } = node // {} Identifier foo

Die Zusammenfassung lautet wie folgt:

Alle Bezeichner vor Doppelpunkten repräsentieren die Abrufposition in das Objekt, dessen rechte Seite der zuzuweisende Variablenname ist; wenn auf den Doppelpunkt geschweifte Klammern folgen, bedeutet dies, dass der endgültige zuzuweisende Wert auf einer tieferen Ebene innerhalb des Objekts verschachtelt ist.

【Verwandte Empfehlungen:

Javascript-Video-Tutorial

,

Web-Frontend

】

Das obige ist der detaillierte Inhalt vonWas ist es6-Dekonstruktion?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!