Detaillierte Interpretation der ES6-Datendekonstruktion

Dieser Artikel stellt die Verwendung eines umfassenden Verständnisses der ES6-Datendekonstruktion vor. Jetzt teile ich ihn mit Ihnen und gebe ihn als Referenz.

Eine Objektdestrukturierung

Die Objektdestrukturierungssyntax verwendet Objektliterale auf der linken Seite der Zuweisungsanweisung

let node = {
  type: true,
  name: false
}

//既声明又赋值
let {
  type,
  name
} = node;

//或者先声明再赋值
let type, name
({type,name} = node);
console.log(type);//true
console.log(name);//false

Die Typ- und Namensbezeichner werden beide deklariert Lokale Variablen lesen auch die entsprechenden Attributwerte des Objekts.

Der Wert eines destrukturierenden Zuweisungsausdrucks ist der Wert auf der rechten Seite des Ausdrucks. Ein Fehler wird ausgelöst, wenn die rechte Seite eines Destrukturierungsausdrucks null oder undefiniert ergibt.

Standardwert

Wenn Sie die destrukturierende Zuweisungsanweisung verwenden und die angegebene lokale Variable kein Attribut mit demselben Namen im Objekt findet, wird die Variable verwendet hat den Wert undefiniert zugewiesen

let node = {
  type: true,
  name: false
},
  type, name, value;
({type,value,name} = node);

console.log(type);//true
console.log(name);//false
console.log(value);//undefined

Sie können optional einen Standardwert definieren, der verwendet wird, wenn die angegebene Eigenschaft nicht vorhanden ist.

let node = {
    type: true,
    name: false
  },
  type, name, value;
({
  type,
  value = true,
  name
} = node);

console.log(type);//true
console.log(name);//false
console.log(value);//true

Werte verschiedenen lokalen Variablennamen zuweisen

let node = {
  type: true,
  name: false,
  value: "dd"
}
let {
  type: localType,
  name: localName,
  value: localValue = "cc"
} = node;
console.log(localType);
console.log(localName);
console.log(localValue);

type:localType Diese Syntax bedeutet, das Attribut mit dem Namen type zu lesen und seinen Wert in der Variablen localType zu speichern . Diese Syntax ist das Gegenteil der Syntax herkömmlicher Objektliterale

Verschachtelte Objektstruktur

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

let {
loc: localL,
loc: {
  start: localS,
  end: localE
}
} = node;

console.log(localL);// start: {line: 1,column: 1},end: {line: 1,column: 4}
console.log(localS);//{line: 1,column: 1}
console.log(localE);//{line: 1,column: 4}

Wenn sich auf der rechten Seite des Doppelpunkts eine geschweifte Klammer befindet, bedeutet dies Folgendes Das Ziel ist im Objekt verschachtelt. In einer tieferen Ebene (loc: {start: localS, end: localE})

Zweite Datendestrukturierung

Die Syntax der Array-Destrukturierung sieht der Objektdestrukturierung sehr ähnlich. Ersetzen Sie einfach das Objektliteral durch ein Array-Literal.

let colors = ["red", "blue", "green"];
let [firstC, secondC, thirdC, thursC = "yellow"] = colors;
console.log(firstC//red
console.log(secondC);//blue
console.log(thirdC);//green
console.log(thursC);//yellow

Sie können im Destrukturierungsmodus auch einige Elemente ignorieren und Variablennamen nur für die Elemente angeben, die Sie interessieren. Das Komma vor

let colors = ["red","green","blue"];

let [,,thirdC] = colors;
console.log(thirdC);//blue

thirdC ist ein Platzhalter für das vorherige Element im Array. Mit dieser Methode können Sie problemlos einen Wert von einer beliebigen Stelle im Array abrufen, ohne anderen Elementen Namen zu geben.

Destrukturierungszuweisung

let colors = ["red","green","blue"],
  firstColor = "black",
  secondColor = "purple";
[firstColor,secondColor] = colors;
console.log(firstColor);//red
console.log(secondColor);//green

Array-Destrukturierung hat einen sehr einzigartigen Anwendungsfall, der die Werte zweier Variablen leicht austauschen kann.

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

Verschachtelte Dekonstruktion

let colors = ["red", ["green", "blue"], "yellow"];
let [firstC, [, ssc]] = colors;
console.log(ssc);//blue

Verbleibende Elemente

let colors = ["red", "green", "blue"];
let [firstC, ...restC] = colors;
console.log(firstC);
console.log(...restC);
console.log(restC[0]);//green
console.log(restC[1]);//blue

Array-Klonen kann mit den verbleibenden Elementen durchgeführt werden

let colors = ["red", "green", "blue"];
let [...restC] = colors;
console.log(restC);//["red", "green","blue"]

Drei gemischte Dekonstruktionen

let node = {
type: "Identifier",
name: 'foo',
loc: {
  start: {
    line: 1,
    column: 1
  },
  end: {
    line: 1,
    column: 4
  }
},
range: [0, 3]
}

let {
type,
name: localName,
loc: {
  start: {
    line: ll
  },
  end: {
    column: col
  }
},
range: [, second]
} = node;

console.log(type);//Identifier
console.log(localName);//foo
console.log(ll);//1
console.log(col);//4
console.log(second);//3

Das Obige habe ich für Sie zusammengestellt. Ich hoffe, es wird Ihnen in Zukunft hilfreich sein.

Verwandte Artikel:

Wie implementiert man React-native Bridging Android und was sind die spezifischen Schritte?

Detaillierte Interpretation des Konzepts des $window-Fensterobjekts in AngularJS

Wie man window.resize in VueJs überwacht und wie man es konkret implementiert ?

Wie implementiert man eine Seitenanpassung in AngularJS?

So entwickeln Sie eine benutzerdefinierte Direktive-Direktive in Vue

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