JS ES: Neue Funktion zur variablen Entkopplungszuweisung

1. Entkoppelte Zuweisung von Arrays

1.1 Was ist eine Array-Entkopplungszuweisung?

ECMAScript 2015 ermöglicht es, Werte aus Arrays und Objekten zu extrahieren und nach einem bestimmten Muster Variablen zuzuweisen, was als entkoppelte Zuweisung bezeichnet wird.

Vor ECMAScript 2015 erfolgte die Zuweisung von Werten zu Variablen wie folgt:

sei a = 1;
sei b = 2;
sei c = 3;

ECMAScript 2015 ermöglicht Folgendes.

sei [a, b, c] = [1, 2, 3];

Die entkoppelte Zuweisung von ECMAScript 2015 ist im Wesentlichen ein Mustervergleich. Das Muster auf beiden Seiten des Zuweisungsoperators ist dasselbe, und der Variablen auf der linken Seite wird der Wert der entsprechenden Position zugewiesen.

1.2 Array-Entkopplungszuweisung fehlgeschlagen

Wenn die entkoppelte Zuweisung fehlschlägt, ist der Wert der Variablen gleich undefiniert. Der Beispielcode lautet wie folgt:

// Wenn die Variable an einem bestimmten Indexwert im Array keinen entsprechenden Indexwert im Array auf der rechten Seite des =-Operators hat, schlägt die Entkopplungszuweisung fehl und ihr Wert ist undefiniert
sei [v] = []
sei [a, b] = [1]
console.log(v, a, b); // undefiniert 1, undefiniert

Wenn Sie das Problem entkoppelter Zuweisungsfehler lösen möchten, müssen Sie die Zahlen auf der linken und rechten Seite des Zuweisungsoperators konsistent halten.

1.3 Unvollständige Entkopplungszuweisung

Die sogenannte unvollständige entkoppelte Zuweisung bedeutet, dass die Zahl im rechten Array des Zuweisungsoperators größer ist als die Zahl im linken Array, wodurch einige Variablen im rechten Array ungültig werden. In diesem Fall ist die entkoppelte Zuweisung jedoch dennoch erfolgreich.

Der Beispielcode lautet wie folgt:

// Die Anzahl der Variablen auf der linken Seite des Zuweisungsoperators ist kleiner als die Anzahl der Werte auf der rechten Seite let [a, b, c] = [1, 2, 3, 4] // Die entkoppelte Zuweisung ist trotzdem erfolgreich console.log(a, b, c); // 1 2 3

1.4 Standardwerte

Durch das Entkoppeln von Zuweisungen können Standardwerte angegeben werden. Der Beispielcode lautet wie folgt:

/* 
 * Entkoppelte Zuweisung ermöglicht die Angabe von Standardwerten* Die Syntax lautet wie folgt* let [var1 = value1, var2 = value2 ,...] = [val1, val2,...]
   var1, var2 stellen Variablennamen dar. value1, value2 stellen Standardwerte dar. val1, val2 stellen angegebene Werte dar*/
sei [a = 1, b = 2] = [100]
konsole.log(a, b); // 100 2

Bei der Verwendung von Standardwerten ist zu beachten, dass ECMAScript6 den Operator === verwendet, um zu bestimmen, ob der Wert an der angegebenen Position gleich undefined ist. Nur wenn sie alle gleich undefiniert sind, wird der Standardwert wirksam.

Der Testcode lautet wie folgt:

sei [a = 1, b = 2] = [100, undefiniert]
konsole.log(a, b); // 100 2

Wenn wir den Nullwert verwenden, bedeutet null zwar auch leer, null !== undefined . Daher wird unser Standardwert nicht wirksam.

Der Testcode lautet wie folgt:

sei [a = 1, b = 2] = [100, null]
console.log(a, b); // 100 null

1.5 Komplexe Situationen der Array-Entkopplungszuweisung

Da JavaScript eine schwach typisierte Sprache ist, ist auf der rechten Seite des Zuweisungsoperators jeder beliebige Typ erlaubt, woraus sich folgende Spezialfälle ergeben:

Fall 1: Die rechte Seite des Operators ist eine Funktion. Der Beispielcode lautet wie folgt

// 1. Die rechte Seite des Operators ist eine Funktion let [a, b] = [1, function () {
  Rückgabe 10;
}]
console.log(b()); // 10

Fall 2: Die rechte Seite des Operators ist ein Objekt. Der Beispielcode lautet wie folgt

// 2. Die rechte Seite des Operators ist ein Objekt let [a, b] = [1, {
  Name: „Fuchsdämon, kleiner Heiratsvermittler“
}]
console.log(b); // { Name: 'Fuchsdämon, kleiner Heiratsvermittler' }

Fall 3: Funktionsarray auf der rechten Seite des Operators, der Beispielcode lautet wie folgt

// 3. Die rechte Seite des Operators enthält ein Array let [a, b] = [1, [2, 3]]
console.log(b); // [ 2, 3 ]

Fall 4: Beide Seiten des Operators enthalten Arrays. Der Beispielcode lautet wie folgt

// 4. Der Operator enthält Arrays auf beiden Seiten. Der Beispielcode lautet wie folgt: let [a, [b, c]] = [1, [2, 3]]
console.log(b); // 2

2. Entkopplung der Objektzuordnung

Die entkoppelte Zuweisung von Objekten wird durch die Herstellung einer Eins-zu-eins-Entsprechung zwischen dem Variablennamen und dem Attributnamen des Objekts erreicht. Der Beispielcode lautet wie folgt:

/*
  * Entkoppelte Zuweisung von Objekten - Werte aus Objekten extrahieren und Werte Variablen zuweisen! Die Variablennamen müssen eins zu eins mit den Eigenschaftsnamen des Objekts übereinstimmen, sonst schlägt es fehl.
*/
lassen {
  X,
  j
} = {
  x: 10,
  Jahr: 20
}
konsole.log(x, y); //10 20

Es ist zu beachten, dass das Format auf beiden Seiten des Zuweisungsoperators konsistent sein muss.

2.1 Spezialfälle der Objektentkopplungszuweisung

Da JavaScript eine schwach typisierte Sprache ist, ist auf der rechten Seite des Zuweisungsoperators jeder beliebige Typ erlaubt, woraus sich folgende Spezialfälle ergeben :

Fall 1: Die rechte Seite des Operators ist eine Funktion. Der Beispielcode lautet wie folgt

// 1. Die rechte Seite des Operators ist eine Funktion let { a, b } = {
  ein: 1,
  b: Funktion () {
    Rückgabe 10;
  }
}
console.log(b()); // 10

Fall 2: Die rechte Seite des Operators ist ein Objekt. Der Beispielcode lautet wie folgt

// 2. Die rechte Seite des Operators ist ein Objekt let {a, b} = {
  ein: 1,
  B: {
    Name: 'ywanzhou'
  }
}
console.log(b); // { name: 'ywanzhou' }

Fall 3: Funktionsarray auf der rechten Seite des Operators, der Beispielcode lautet wie folgt

// 3. Die rechte Seite des Operators enthält ein Array let {a, b} = {
  ein: 1,
  b: [1, 2]
}
console.log(b); //[ 1, 2 ]

Fall 4: Auf beiden Seiten des Operators befinden sich Objekte. Der Beispielcode lautet wie folgt

// 4. Beide Seiten des Operators enthalten Objekte let {
  M: {
    Name,
    Alter
  },
  N
} = {
  M: {
    Name: "Test",
    Alter: 20
  },
  Nr.: 20
}
console.log(Name, Alter); // Test 20

2.2 Fehler bei der Entkopplungszuweisung

Wenn die entkoppelte Zuweisung fehlschlägt, ist der Wert der Variablen gleich undefiniert. Der Beispielcode lautet wie folgt:

// Entkopplungszuweisung fehlgeschlagen let {
  A,
  B
} = {
  eine: 10
}
console.log(b);

2.3 Unvollständige Entkopplungszuweisung

Die sogenannte unvollständige entkoppelte Zuweisung bedeutet, dass die Anzahl der Attribute im Objekt auf der rechten Seite des Zuweisungsoperators größer ist als die Anzahl der Attribute im Objekt auf der linken Seite, was dazu führt, dass einige Variablen der Attribute im Objekt auf der rechten Seite ungültig werden. In diesem Fall ist die entkoppelte Zuweisung jedoch dennoch erfolgreich.

// Unvollständige Entkopplungszuweisung let {
  A
} = {
  eine: 10,
  b: 20
}
konsole.log(a);

2.4 Standardwerte

Durch das Entkoppeln von Zuweisungen können Standardwerte angegeben werden. Der Beispielcode lautet wie folgt:

// Standardwert let {
  A,
  b = 100
} = {
  eine: 10,
  b: 20
}
console.log(b);

3. Entkoppelte Zuweisung von Strings, Zahlen und Booleschen Werten

3.1 Zuordnung der String-Entkopplung

Auch Zeichenfolgen können destrukturiert werden. Dies liegt daran, dass an diesem Punkt die Zeichenfolge in ein arrayähnliches Objekt umgewandelt wird.

let [h1, y, x] = "Eine Schüssel Zhou"
console.log(h1, y, x, h2); // Eine Schüssel Zhou

3.2 Entkoppelte Zuweisung von numerischen und booleschen Werten

Wenn Sie eine entkoppelte Zuweisung direkt für numerische Werte/Boolesche Werte durchführen, wird eine Ausnahme ausgelöst. Wenn beim Arbeiten mit numerischen Werten und Booleschen Werten die rechte Seite des Zuweisungsoperators ein numerischer Wert oder Boolescher Wert ist, wird dieser zuerst in ein Objekt konvertiert.

// let [a] = 100; // Wirft eine Exception mit der Beschreibung TypeError: 100 is not iterable
// konsole.log(a);
// Um ​​die Zuweisung von Booleschen oder numerischen Werten zu entkoppeln, müssen Sie sie in Objekttypen ändern.
lassen {
  toString: b
} = 1;
console.log(b === Nummer.prototype.toString); // wahr

lassen {
  toString: c
} = wahr;
console.log(c === Boolean.prototype.toString); // wahr

Die Regel der destrukturierenden Zuweisung besteht darin, dass, solange der Wert auf der rechten Seite des Gleichheitszeichens kein Objekt oder Array ist, dieser zunächst in ein Objekt umgewandelt wird. Da undefined und null nicht in Objekte umgewandelt werden können, kommt es beim Dekonstruieren und Zuweisen zu Fehlern.

4. Entkopplung der Funktionszuweisung

Funktionsparameter können auch mittels Destrukturierung zugewiesen werden. Der Beispielcode lautet wie folgt:

// Verwenden der Array-Funktion f([a, b]) {
  konsole.log(a, b);  
}
f([10, 20]) // 10 20
//Verwende die Objektfunktion fn({
  A,
  B
}) {
  konsole.log(a, b);
}
fn({
  eine: 10,
  b: 20
}) // 10 20

5. Das Problem der Klammern

Obwohl die entkoppelte Zuweisung praktisch ist, ist sie nicht einfach zu analysieren. Für den Compiler gibt es keine Möglichkeit, von Anfang an zu erkennen, ob eine Formel ein Muster oder ein Ausdruck ist. Um dies herauszufinden, muss sie auf das Gleichheitszeichen analysiert werden (oder nicht).

Das daraus resultierende Problem besteht darin, wie mit den im Muster vorkommenden Klammern umgegangen werden soll. ECMAScript 2015 Regel besagt, dass Klammern nicht verwendet werden dürfen, wenn die Möglichkeit einer destrukturierenden Mehrdeutigkeit besteht.

Allerdings ist diese Regel gar nicht so leicht zu erkennen und der Umgang damit ist recht mühsam. Es wird daher empfohlen, das Platzieren von Klammern in Mustern möglichst zu vermeiden.

5.1 Fälle, in denen Klammern nicht verwendet werden können

In den folgenden drei Situationen können keine Klammern verwendet werden

Fall 1: Variablendeklarationsanweisung, der Beispielcode lautet wie folgt

// Die folgenden Situationen führen alle zu Fehlern let [(a)] = [1];

sei {x: (c)} = {};
sei ({x: c}) = {};
sei {(x: c)} = {};
sei {(x): c} = {};

sei { o: ({ p: p }) } = { o: { p: 2 } };

Die obigen sechs Anweisungen melden alle Fehler, da es sich bei allen um Anweisungen zur Variablendeklaration handelt und Klammern in Mustern nicht verwendet werden können.

Fall 2: Als Funktionsparameter

Funktionsparameter werden ebenfalls als Variablendeklarationen betrachtet und können daher keine Klammern enthalten.

// Fehlerfunktion f([(z)]) { return z; }
// Fehlerfunktion f([z,(x)]) { return x; }

Fall 3: Muster der Zuweisungsanweisung

// Alle Fehler ({ p: a }) = { p: 42 };
([ein]) = [5];

Der obige Code setzt das gesamte Muster in Klammern, was zu einem Fehler führt.

// Fehler [({ p: a }), { x: c }] = [{}, {}];

Der obige Code setzt einen Teil des Musters in Klammern, was zu einem Fehler führt.

5.2 Wann Klammern verwendet werden können

Es gibt nur eine Situation, in der Klammern verwendet werden können: im Nicht-Musterteil einer Zuweisungsanweisung.

[(b)] = [3]; // Richtig({ p: (d) } = {}); // Richtig[(parseInt.prop)] = [3]; // Richtig

Die drei obigen Anweisungszeilen können alle korrekt ausgeführt werden, da es sich erstens um Zuweisungsanweisungen und nicht um Deklarationsanweisungen handelt und zweitens ihre Klammern nicht Teil des Musters sind. In der ersten Anweisungszeile besteht das Muster darin, das erste Mitglied des Arrays zu übernehmen, unabhängig von den Klammern. In der zweiten Anweisungszeile lautet das Muster p und nicht d. Die dritte Anweisungszeile hat dieselbe Natur wie die erste Anweisungszeile.

6. Die Nützlichkeit der variablen Entkopplungszuweisung

Es gibt viele Verwendungsmöglichkeiten für die Entkopplung von Variablenzuweisungen. Hier sind einige gängige Beispiele.

6.1 Variablenwerte austauschen

Wenn keine Entkopplungszuweisung erfolgt, muss die Austauschvariable mit Hilfe einer dritten Variable ergänzt werden. Der Beispielcode lautet wie folgt:

var a = 10,
  b = 20;

var c = a;
a = b
b = c
c = null /// Variablen freigeben console.log(a, b); // 20 10

Dies geschieht mit Hilfe der Variablenentkopplungszuweisung. Der Beispielcode lautet wie folgt:

sei a = 10,
  b = 20;
[ein, b] = [b, ein]
konsole.log(a, b); // 20 10

Dieser Ansatz ist nicht nur prägnant, sondern auch leicht zu lesen und weist eine klare Semantik auf.

6.2 Mehrere Werte aus einer Funktion zurückgeben

Eine Funktion kann nur einen Wert zurückgeben. Wenn Sie mehrere Werte zurückgeben möchten, können Sie diese nur in einem Array oder Objekt zurückgeben. Mit der Destrukturierungszuweisung können diese Werte sehr bequem extrahiert werden.

Der Beispielcode lautet wie folgt:

//Gibt ein Array zurück Funktion example() {
  Rückkehr [1, 2, 3];
}
lass [a, b, c] = Beispiel();

//Gib eine Objektfunktion zurück example() {
  zurückkehren {
    foo: 1,
    Takt: 2
  };
}
let { foo, bar } = Beispiel();

6.3 Definition der Funktionsparameter

Durch die Destrukturierungszuweisung können Sie einen Parametersatz ganz einfach mit Variablennamen verknüpfen.

// Die Parameter sind eine geordnete Wertemenge Funktion f([x, y, z]) {
  konsole.log(x, y, z);
}
f([1, 2, 3]); // 1 2 3

// Die Parameter sind eine ungeordnete Wertemenge Funktion fn({x, y, z}) {
  konsole.log(x, y, z);
}
fn({
  z: 3,
  und: 2,
  x: 1
}); // 1 2 3

6.4 Extrahieren von JSON-Daten

Die Destrukturierungszuweisung ist besonders nützlich zum Extrahieren von Daten aus JSON-Objekten.

// JSON-Daten extrahieren let jsonData = {
  Ich würde: 42,
  Status: "OK",
  Daten: [867, 5309]
};

lassen {
  Ausweis,
  Status,
  Daten: Nummer
} = jsonDaten;

console.log(id, status, nummer); // 42, "OK", [867, 5309]

Dies ist das Ende dieses Artikels über die neue Funktion von JS ES: entkoppelte Variablenzuweisung. Weitere Informationen zu entkoppelten ES-Variablen finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!