Destrukturierung und Zuweisung von ES6-Lernvariablen

Manchmal ist es wirklich mühsam, zu viele Variablen zu schreiben, und es ist eine Menge mühsamer und sich fast wiederholender Arbeit. Es6 bietet uns eine Vielzahl bequemerer Möglichkeiten, Variablen zu deklarieren und zuzuweisen. Der folgende Artikel stellt hauptsächlich die relevanten Informationen zur Variablendestrukturierung und -zuweisung in ES6 vor. Freunde in Not können darauf zurückgreifen.

Destrukturierung der Zuweisung von Variablen

ES6 ermöglicht die Extraktion aus Arrays und Objekten nach einem bestimmten Muster und einer bestimmten Zuweisung von Variablen.

Destrukturierende Zuweisung des Arrays

var [a,b,c] = [1,2,3];
a // 1;
b // 2;
c // 3;

Der obige Code zeigt an, dass Werte aus dem Array und die Variablen extrahiert werden können entsprechend der jeweiligen Zuordnung bearbeitet.

Im Wesentlichen handelt es sich bei dieser Schreibweise um einen „Mustervergleich“. Solange die Muster auf beiden Seiten des Gleichheitszeichens gleich sind, wird der Variablen auf der linken Seite der entsprechende Wert zugewiesen.

let [foo,[[bar],baz]] = [1,[[2],3]];
foo //1;
bar //2;
baz //3;

let [,,third] = ['foo','bar','baz'];
third //'baz'

let [head,...tail] = [1,2,3,4]
head //1;
tail //[2,3,4]

Wenn die Destrukturierung nicht erfolgreich ist, ist der Wert der Variablen gleich undefiniert.

let [x,y,z] = ['a']
x // 'a';
y // undefined
z //[]

Unvollständige Dekonstruktion

Wenn das Muster auf der linken Seite des Gleichheitszeichens nur mit einem Teil davon übereinstimmt Das Array auf der rechten Seite hat ein Gleichheitszeichen. Die Dekonstruktion kann immer noch erfolgreich sein. Diese Situation wird als unvollständige Dekonstruktion bezeichnet.

let [x,y] = [1,2,3]
x //1
y //2

Wenn die rechte Seite des Gleichheitszeichens kein Array ist, wird ein Fehler gemeldet. (Hat keine überquerbare Struktur).

Solange eine bestimmte Datenstruktur über eine Iterator-Schnittstelle verfügt, kann eine destrukturierende Zuweisung in Form eines Arrays verwendet werden

function* fibs(){
 var a = 0;
 var b = 1;
 while(true){
  yield a;
  [a,b] = [b,a+b];
 }
}

var [first,second,third,fourth,fifth,sixth] = fibs();
sixth // 5

fibs ist eine Generatorfunktion, die nativ über eine Iterator-Schnittstelle verfügt, und durch die Destrukturierungszuweisung werden wiederum Werte von dieser Schnittstelle abgerufen.

Standardwert

Destrukturierende Zuweisung ermöglicht die Angabe von Standardwerten.

var [foo=true] = [];
foo //true

ES6 verwendet intern den strikten Gleichheitsoperator (===), um zu bestimmen, ob eine Position einen Wert hat. Wenn ein Array-Mitglied nicht unbedingt undefiniert ist, wird der Standardwert daher nicht wirksam.

var [x = 1] = [undefined]
x // 1

var [x = 1] = [null]
x // null

Ein Ausdruck kann auch als Standardwert verwendet werden. Wenn ein Ausdruck als Standardwert verwendet wird, wird der Ausdruck verzögert ausgewertet und kann nur verwendet werden verwendet werden, wenn Es wird erst ausgewertet, wenn es ankommt.

function f(){
 console.log('aaa')
}

let [x = f()] = [1]

Im obigen Code wird die Funktion f nicht ausgeführt, da x den Wert erhalten kann.

Der Standardwert kann sich auf andere Variablen der destrukturierenden Zuweisung beziehen, die Variable muss jedoch deklariert worden sein.

Destrukturierende Zuweisung von Objekten

Destrukturierende Zuweisung kann sowohl auf Arrays als auch auf Objekte angewendet werden.

 var {foo,bar} = {foo:'aaa',bar:'bbb'}
 foo // 'aaa'
 bar // 'bbb'

Ein Unterschied zwischen der destrukturierenden Zuweisung von Objekten und Arrays besteht darin, dass die Elemente von Arrays der Reihe nach sortiert werden und der Wert einer Variablen ermittelt wird B. aufgrund ihrer Position und die Eigenschaften des Objekts nicht in Ordnung sind, muss die Variable denselben Namen wie die Eigenschaft haben, um den richtigen Wert zu erhalten.

var {bar,foo} = {foo:'aaa',bar:'bbb'}
foo //'aaa'
bar //'bbb'


var {baz} = {foo:'aaa',bar:'bbb'}
baz //undefined

Wenn der Variablenname nicht mit dem Attributnamen übereinstimmt, muss er wie folgt geschrieben werden:

var {foo:baz} = {foo:'aaa'}
baz //'aaa'

Tatsächlich ist die destrukturierende Zuordnung eines Objekts die Abkürzung der folgenden Form:

var {foo:foo,bar:bar} = {foo:'aaa',bar:'bbb'}

Das Innere Der Mechanismus zum Destrukturieren und Zuweisen eines Objekts besteht darin, zuerst das gleichnamige Attribut zu finden und es dann der entsprechenden Variablen zuzuweisen. Tatsächlich wird letzteres zugewiesen, nicht ersteres.

Bei Verwendung der oben genannten Schreibmethode erfolgen die Deklaration und Zuweisung von Variablen jedoch zusammen. Bei let und const können Variablen nicht erneut deklariert werden. Sobald die zugewiesene Variable zuvor deklariert wurde, wird daher ein Fehler gemeldet.

Die Destrukturierung von Objekten kann auch für verschachtelte strukturierte Objekte verwendet werden.

var obj = {
 p: [
  'hello' ,
  {
   y : 'world'
  }
 ]
}

var {p:[x,{y}]} = obj

x //'hello'
y //'world'

Zu diesem Zeitpunkt ist p ein Muster, keine Variable, daher wird es nicht zugewiesen.

Die destrukturierende Zuweisung eines Objekts kann auch einen Standardwert angeben. Die wirksame Bedingung für den Standardwert ist, dass der Attributwert des Objekts strikt gleich undefiniert ist.

var {x=3} = {x:undefined}
x //3

var {x=3} = {x:null}
x //null

Wenn der Destrukturierungsmodus ein verschachteltes Objekt ist und die übergeordnete Eigenschaft des untergeordneten Objekts nicht vorhanden ist, wird ein Fehler gemeldet.

var {foo:{bar}} = {baz:'baz'}

Weitere Artikel zur Destrukturierung und Zuweisung von Variablen beim ES6-Lernen finden Sie auf der chinesischen PHP-Website!