Machen Sie sich mit der JavaScript-Destrukturierungsaufgabe vertraut

Konzepte

des JavaScript-Lerntutorials

ES6 bietet einen prägnanteren Zuweisungsmodus zum Extrahieren von Werten aus Arrays und Objekten, der als Destrukturierung bezeichnet wird.

Beispiel:

[a, b] = [50, 100];
console.log(a);
// erwartete Ausgabe: 50
console.log(b);
// erwartete Ausgabe: 100

[a, b, ...rest] = [10, 20, 30, 40, 50];
console.log(rest);
// erwartete Ausgabe: [30, 40, 50]

Array-Destrukturierung Die

Array-Destrukturierung ist sehr einfach und prägnant. Verwenden Sie ein Array-Literal auf der linken Seite des Zuweisungsausdrucks. Jeder Variablenname im Array-Literal wird demselben Index des Destrukturierten zugeordnet Array. Was

bedeutet das Element? Genau wie im folgenden Beispiel erhalten die Elemente im Array auf der linken Seite die Werte der entsprechenden Indizes des destrukturierten Arrays auf der rechten

Seite. 2, 3];
// a = 1
// b = 2
// c = 3

deklariert separate Zuweisungen

durch Variablendeklarationen.

Beispiel: Variablen deklarieren, Werte separat zuweisen

// Variablen deklarieren let a, b;
// Dann Werte zuweisen [a, b] = [1, 2];
console.log(a); // 1
console.log(b); // 2

Destrukturierender Standardwert

Wenn der durch Destrukturieren herausgenommene Wert undefined ist, können Sie den Standardwert festlegen:

let a, b;
// Standardwert festlegen [a = 5, b = 7] = [1];
console.log(a); // 1
console.log(b); // 7Im

obigen Beispiel legen wir Standardwerte für a und b fest. Wenn der Wert von a oder b undefined ist, wird der entsprechende Standardwert zugewiesen Variablen (5 ist a zugewiesen, 7 ist b zugewiesen)

tauschen Variablenwerte aus

Wenn wir in der Vergangenheit zwei Variablen ausgetauscht haben, haben wir immer

//exchange abc = a;a = b;b = c

;

Bei der Dekonstruktion können wir jedoch die Werte zweier Variablen in einem Destrukturierungsausdruck austauschen

let a = 1 let b = 3;//Tausch die Werte von a und b [a, b] = [b, a]; console.log( a); // 3console.log(b); // 1

Dekonstruieren Sie

Funktion

zurückgegebene Array.

  return [10, 20];}let a, b;[a, b] = c();console.log(a); // 10console.log(b)

; Der Rückgabewert [10, 20] von c()** kann in einer separaten Codezeile verwendet werden,

um den Rückgabewert mithilfe der Destrukturierung zu ignorieren (oder ein bestimmtes Element zu überspringen)

Sie können einige unerwünschte Rückgabewerte

der Funktion c ()

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

weist den verbleibenden Wert des Arrays zu Variable

, wenn Sie die Array-Destrukturierung verwenden, können Sie alle verbleibenden Teile des zugewiesenen Arrays einer Variablen zuweisen

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

auch

zu einem Array und die Elemente im Array sind alle verbleibenden Elemente.

Achten Sie hier darauf, dass Sie am Ende kein Komma schreiben können. Wenn ein zusätzliches Komma vorhanden ist, wird ein Fehler gemeldet.

let [a, ...b,] = [1, 2, 3];// SyntaxError: rest element darf kein nachgestelltes Komma haben

Verschachtelte Array-Destrukturierung

Wie Objekte können auch Arrays verschachtelt werden.

Beispiel:

const color = ['#FF00FF', [255, 0, 255], 'rgb(255, 0, 255)'];
// Verschachtelte Destrukturierung verwenden, um Rot, Grün und Blau zuzuweisen
// Verschachtelte Destrukturierung verwenden, um Rot, Grün und Blau zuzuweisen
const [hex, [rot, grün, blau]] = Farbe;
console.log(hex, red, green, blue); // #FF00FF 255 0 255

String-Destrukturierung

Wenn das Ziel der Destrukturierung ein durchquerbares Objekt ist, können Destrukturierung und Zuweisung durchgeführt werden. Das durchquerbare Objekt implementiert die Iterator-Schnittstelle Daten

let [a, b, c, d, e] = 'hello';/*
a = 'h'
b = 'e'
c = 'l'
d = 'l'
e = 'o'
*/

Objektdekonstruktion

grundlegende Objektdekonstruktion

let x = { y: 22, z: true };
let { y, z } = x; // let {y:y,z:z} = Abkürzung für x;
console.log(z); // true

wird einem neuen Variablennamen zugewiesen.

Der Name der Variablen kann geändert werden, wenn die Objektdestrukturierung verwendet wird.

let o = { p: 22, q: true };
let { p: foo, q: bar } = o;

console.log(foo); // 22
console.log(bar); // wahrer

foo

den

var {p: foo} = o p des Objekts o ab und weist ihn dann einer Variablen namens foo zu

durch Destrukturierung ist undefined , wir Sie können den Standardwert festlegen

let { a = 10, b = 5 } = { a: 3 };

console.log(a); // 3
console.log(b); // 5

Sie dem

neuen Objektnamen einen Wert zu und geben Sie einen Standardwert an

, wenn es nicht dekonstruiert wird, wird automatisch der Standardwert verwendet

let { a: aa = 10, b: bb = 5 } = { a: 3 };

console.log(aa); // 3
console.log(bb); // 5

Array- und Objektdestrukturierung gleichzeitig verwenden

Arrays und Objekte können zusammen in Strukturen verwendet werden

const props = [
  { id: 1, name: 'Fizz' },
  { id: 2, name: 'Buzz' },
  { id: 3, name: 'FizzBuzz' },
];

const [, , { name }] = props;
console.log(name); // „FizzBuzz“

ist nicht vollständig dekonstruiert

let obj = {p: [{y: 'world'}] };
let {p: [{ y }, x ] } = obj;//Dekonstruiere x nicht

// x = undefiniert
// y = 'world'

weist einem Objekt den verbleibenden Wert zu

let {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40};
// a = 10
// b = 20
// rest = {c: 30, d: 40}

Destrukturierung verschachtelter Objekte (Destrukturierung kann ignoriert werden)

let obj = {p: ['hello', {y: 'world'}] };
let {p: [x, { y }] } = obj;
// x = 'Hallo'
// y = 'Welt'
let obj = {p: ['hello', {y: 'world'}] };
let {p: [x, { }] } = obj;//ignoriere y
// x = 'hello'

Hinweis:

Achten Sie darauf, deklarierte Variablen zur Destrukturierungsfehlerdemonstration zu verwenden

:

let x;{x} = {x: 1};

Die JavaScript-Engine versteht {x} als Codeblock, was zu einer Syntax führt Fehler: Wir möchten vermeiden, die geschweiften Klammern am Anfang der Zeile zu schreiben, um zu verhindern, dass JavaScript sie als Codeblock interpretiert

Richtige

Schreibweise

:

let

function add([x, y])

{

	return x + y;}add([1, 2]);

Im obigen Code ist der Parameter der Funktion add ein Array auf der Oberfläche, aber bei der Übergabe des Parameters wird der Array-Parameter in die Variablen x und y zerlegt Die Funktion ist intern dasselbe wie die direkte Übergabe von x und y.

die

Verwendung von Destrukturierungszuweisungen. Es gibt viele Möglichkeiten,

die Werte von Variablen auszutauschen,

sei es x = 1.
sei y = 2;
[x, y] = [y, x];

Werte

von x und y aus. Diese Schreibmethode ist nicht nur prägnant, sondern auch leicht zu lesen, und die Semantik ist klar

Eine Funktion

kann nur einen Wert zurückgeben. Wenn Sie mehrere Werte zurückgeben möchten, können wir diese Werte nur in ein Array oder Objekt einfügen und sie zurückgeben, wenn wir eine destrukturierende Zuweisung haben aus dem Objekt oder Array ist wie nach etwas suchen

// Eine Array-Funktion zurückgeben example() {
  return [1, 2, 3];}let [a, b, c] = example();
  // Eine Objektfunktion zurückgeben example() {
  zurückkehren {
    foo: 1,
    Balken: 2
  };
  }let { foo, bar } = example();

Die Destrukturierungszuweisung zum

Extrahieren von JSON-Daten

Beispiel:

let jsonData = {
  ID: 42,
  Status: „OK“,
  Daten: [867, 5309]
};

let { id, status, data: number } = jsonData;

console.log(id, status, number);
// 42, „OK“, [867, 5309]

Mit dem obigen Code können wir den Wert in den JSON-Daten schnell abrufen.

Verwandte Empfehlungen: JavaScript-Tutorial

Das Obige soll Ihnen helfen, die Details der JavaScript-Destrukturierungszuweisung zu verstehen Weitere Informationen finden Sie unter PHP Andere verwandte Artikel auf der chinesischen Website!