Detaillierte Erläuterung der Zuweisung basierend auf dem ES6-Umfang und der Destrukturierung

Dieser Artikel enthält eine detaillierte Erläuterung des Umfangs und der Destrukturierungszuweisung basierend auf ES6. Der Herausgeber findet es ziemlich gut, deshalb werde ich es jetzt mit Ihnen teilen und es allen als Referenz geben. Folgen wir dem Herausgeber und werfen wir einen Blick darauf. Ich hoffe, es kann allen helfen.

ES6 erzwingt den strikten Modus

Bereich

•var deklariert lokale Variablen, die in geschweiften Klammern for/if definiert sind, auch außerhalb der geschweiften Klammern zugänglich sind

•Die von let deklarierte Variable hat einen Blockbereich und die Variable kann nicht wiederholt definiert werden

•const deklariert eine Konstante im Blockbereich und muss bei der Deklaration einen Wert zugewiesen werden und kann nicht geändert werden

// const声明的k指向一个对象，k本身不可变，但对象可变

function test() {
 const k={
  a:1
 }
 k.b=3;
 
 console.log(k);
}

test( )Destrukturierungszuweisung

{
 let a, b, 3, rest;
 [a, b, c=3]=[1, 2];

 console.log(a, b);
}
//output: 1 2 3

{
 let a, b, 3, rest;
 [a, b, c]=[1, 2];

 console.log(a, b);
}
//output: 1 2 undefined

{
 let a, b, rest;
 [a, b, ...rest] = [1, 2, 3, 4, 5, 6];
 console.log(a, b, rest);
}
//output:1 2 [3, 4, 5, 6]

{
 let a, b;
 ({a, b} = {a:1, b:2})

 console.log(a ,b);
}
//output: 1 2

Verwendungsszenarien

Variablenaustausch

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

Mehrere Funktionswerte abrufen

{
 function f(){
  return [1, 2]
 }
 let a, b;
 [a, b] = f();
 console.log(a, b);
}

Mehrere Funktionsrückgabewerte abrufen

{
 function f(){
  return [1, 2, 3, 4, 5]
 }
 let a, b, c;
 [a,,,b] = f();
 console.log(a, b);
}
//output: 1 4

{
 function f(){
  return [1, 2, 3, 4, 5]
 }
 let a, b, c;
 [a, ...b] = f();
 console.log(a, b);
}
//output: 1 [2, 3, 4, 5]

Objektdestrukturierungszuweisung

{
 let o={p:42, q:true};
 let {p, q, c=5} = o;

 console.log(p ,q);
}
//output: 42 true 5

JSON-Wert abrufen

{
 let metaData={
  title: 'abc',
  test: [{
   title: 'test',
   desc: 'description'
  }]
 }
 let {title:esTitle, test:[{title:cnTitle}]} = metaData;
 console.log(esTitle, cnTitle);
}
//Output: abc test

Verwandte Empfehlungen:

Detaillierte Beispiele der neuen Array-Methoden in ES6

Detaillierte Beispiele für die Anwendung von es6 in React

Detaillierte Erläuterung von Javascript in ES6. Implementieren Sie Funktionsbindungs- und Klassenereignisbindungsfunktionen

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Zuweisung basierend auf dem ES6-Umfang und der Destrukturierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!