Vertiefendes Verständnis der ES6-Datendekonstruktion

Ich glaube, jeder hat von der ES6-Datendekonstruktion gehört. Dieser Artikel hilft Ihnen hauptsächlich dabei, die Verwendung der ES6-Datendekonstruktion zu verstehen. Deshalb werde ich ihn jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

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 deklarieren nicht nur lokale Variablen, sondern 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 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

wird verschiedenen lokalen Variablennamen

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);

Typ zugewiesen :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 Objektstrukturen

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 die rechte Seite von Der Doppelpunkt ist vorhanden. Wenn er in geschweiften Klammern verwendet wird, zeigt er an, dass das Ziel in einer tieferen Ebene des Objekts verschachtelt ist (loc: {start: localS,end: localE})

Zweite Datendekonstruktion

Die Syntax der Array-Destrukturierung sieht der Objektdestrukturierung sehr ähnlich, außer dass das Objektliteral durch ein Array-Literal ersetzt wird.

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 auch einige Elemente im Destrukturierungsmodus ignorieren und Variablennamen nur für die Elemente angeben, die Sie interessieren.

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

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

Das Komma vor 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, bei dem zwei Variablenwerte problemlos ausgetauscht werden können.

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

Restposten

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

Verwandte Empfehlungen:

js-Export-Excel-Tabelle übertrifft Lösung für englische 26-Bit-Zeichen ES6

Eine einfache Möglichkeit, die ES6-Syntax mit Babel in ES5 zu konvertieren

Was sind die statischen Methoden von Klassen? in der ES6-Funktion

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