Zerstörende Objekte und Arrays in JavaScript

JavaScript Dekonstruktion und Zuordnung: Vereinfachen Sie den Code und verbessern Sie die Lesbarkeit

Mit der dekonstruierten Zuordnung von JavaScript von 🎜> können Sie einzelne Elemente aus einem Array oder Objekt unter Verwendung einer konkreten Syntax extrahieren und Variablen zuweisen, um den Code zu vereinfachen und das Lesen klarer und einfacher zu lesen.

Dekonstruktion und Zuordnung werden häufig verwendet, einschließlich der Verarbeitung von API -Antworten, funktionaler Programmierung sowie in Frameworks und Bibliotheken wie React. Es kann auch für verschachtelte Objekte und Arrays, Standardfunktionsparameter, Variable Value Exchange, Rückgabe mehrerer Werte aus einer Funktion, für Schleifen und der regelmäßigen Expressionsverarbeitung verwendet werden.

Bei der Verwendung dekonstruierter Aufträge müssen Sie auf die folgenden Punkte achten: Sie können keine Anweisung mit lockigen Klammern starten, da sie wie ein Codeblock aussieht. Um Fehler zu vermeiden, deklarieren Sie entweder die Variable oder verwenden Sie Klammern, wenn die Variable deklariert wird. Achten Sie auch darauf, dass mischen deklarierte und nicht deklarierte Variablen gemischt werden.

So verwenden Sie die Dekonstruktionszuweisung

dekonstruieren Array

Angenommen, wir haben ein Array:

const myArray = ['a', 'b', 'c'];

Dekonstruktion liefert eine einfachere und weniger fehleranfällige Alternative zum Extrahieren jedes Elements:

const [one, two, three] = myArray;

// one = 'a', two = 'b', three = 'c'

Sie können bestimmte Werte ignorieren, indem Sie den Wertnamen bei der Zuweisung von:

weglassen:

const [one, , three] = myArray;

// one = 'a', three = 'c'

oder verwenden Sie den Restoperator (...), um die verbleibenden Elemente zu extrahieren:

const [one, ...two] = myArray;

// one = 'a', two = ['b', 'c']

dekonstruieren Objekt

Dekonstruktion gilt auch für Objekte:

const myObject = {
  one:   'a',
  two:   'b',
  three: 'c'
};
// ES6 解构示例
const {one, two, three} = myObject;
// one = 'a', two = 'b', three = 'c'

In diesem Beispiel entspricht die Variable ein, zwei und drei mit dem Namen der Objekteigenschaft. Wir können Variablen eines beliebigen Namens auch Attribute zuweisen, zum Beispiel:

const myObject = {
  one:   'a',
  two:   'b',
  three: 'c'
};

// ES6 解构示例
const {one: first, two: second, three: third} = myObject;

// first = 'a', second = 'b', third = 'c'

dekonstruieren verschachtelte Objekte

komplexere verschachtelte Objekte können auch verwiesen werden, zum Beispiel:

const meta = {
  title: 'Destructuring Assignment',
  authors: [
    {
      firstname: 'Craig',
      lastname: 'Buckler'
    }
  ],
  publisher: {
    name: 'SitePoint',
    url: 'https://www.sitepoint.com/'
  }
};

const {
    title: doc,
    authors: [{ firstname: name }],
    publisher: { url: web }
  } = meta;

/*
  doc   = 'Destructuring Assignment'
  name  = 'Craig'
  web   = 'https://www.sitepoint.com/'
*/

Dies scheint etwas kompliziert, aber denken Sie daran, dass in allen dekonstruierten Aufgaben:

• Die linke Seite der Zuordnung ist das Dekonstruktionsziel - das Muster, das die zugewiesene Variable
definiert
• rechts von der Zuordnung befindet sich die dekonstruierte Quelle - ein Array oder ein Objekt, das die extrahierten Daten enthält

Vorsichtsmaßnahmen

Es gibt noch andere Dinge zu beachten. Erstens können Sie die Anweisung nicht mit lockigen Klammern starten, da sie wie ein Codeblock aussieht, z. B.

// 这会失败
{ a, b, c } = myObject;

Sie müssen Variablen deklarieren, zum Beispiel:

// 这可以工作
const { a, b, c } = myObject;

oder Klammern verwenden, wenn die Variable deklariert wurde, zum Beispiel:

// 这可以工作
({ a, b, c } = myObject);

Sie sollten auch vorsichtig sein, um zu vermischen, die deklarierte und nicht deklarierte Variablen gemischt werden, wie:

// 这会失败
let a;
let { a, b, c } = myObject;

// 这可以工作
let a, b, c;
({ a, b, c } = myObject);

Das obige sind das Grundkenntnis der Dekonstruktion. Unter welchen Umständen funktioniert es also? Ich bin froh, dass Sie diese Frage gestellt haben.

dekonstruierte Anwendungsfälle

Einfachere Anweisung

Variablen können deklariert werden, ohne jeden Wert explizit zu definieren, z. B.

// ES5
var a = 'one', b = 'two', c = 'three';

// ES6
const [a, b, c] = ['one', 'two', 'three'];

authentisch ist die dekonstruierte Version länger. Es ist einfacher zu lesen, obwohl es bei mehr Elementen möglicherweise nicht der Fall ist.

Variabler Wert Exchange

Swap -Werte erfordern eine vorübergehende dritte Variable, aber die Verwendung der Dekonstruktion ist viel einfacher:

var a = 1, b = 2;

// 交换
let temp = a;
a = b;
b = temp;

// a = 2, b = 1

// 使用解构赋值交换
[a, b] = [b, a];

// a = 1, b = 2

Sie sind nicht auf zwei Variablen beschränkt.

const myArray = ['a', 'b', 'c'];

Standardfunktionsparameter

Angenommen, wir haben eine hübsche Funktion (), um unser Meta -Objekt auszugeben:

const [one, two, three] = myArray;

// one = 'a', two = 'b', three = 'c'

Wenn keine Dekonstruktion vorliegt, müssen Sie dieses Objekt analysieren, um sicherzustellen, dass geeignete Standardwerte verfügbar sind, z. B.

const [one, , three] = myArray;

// one = 'a', three = 'c'

Jetzt können wir jedem Parameter Standardwerte zuweisen, z. B.

const [one, ...two] = myArray;

// one = 'a', two = ['b', 'c']

, aber wir können Dekonstruktion verwenden, um Werte zu extrahieren und bei Bedarf Standardwerte zuzuweisen:

const myObject = {
  one:   'a',
  two:   'b',
  three: 'c'
};
// ES6 解构示例
const {one, two, three} = myObject;
// one = 'a', two = 'b', three = 'c'

Ich bin mir nicht sicher, ob dies einfacher zu lesen ist, aber es ist offensichtlich kürzer.

Rückgeben Sie mehrere Werte aus der Funktion

Die

-Funktion kann nur einen Wert zurückgeben, dies kann jedoch ein komplexes Objekt oder ein mehrdimensionales Array sein. Die Dekonstruktion der Zuordnung macht dies praktischer, zum Beispiel:

const myObject = {
  one:   'a',
  two:   'b',
  three: 'c'
};

// ES6 解构示例
const {one: first, two: second, three: third} = myObject;

// first = 'a', second = 'b', third = 'c'

for-of-Loop

Betrachten Sie eine Reihe von Buchinformationen:

const meta = {
  title: 'Destructuring Assignment',
  authors: [
    {
      firstname: 'Craig',
      lastname: 'Buckler'
    }
  ],
  publisher: {
    name: 'SitePoint',
    url: 'https://www.sitepoint.com/'
  }
};

const {
    title: doc,
    authors: [{ firstname: name }],
    publisher: { url: web }
  } = meta;

/*
  doc   = 'Destructuring Assignment'
  name  = 'Craig'
  web   = 'https://www.sitepoint.com/'
*/

ES6s For-Of ist ähnlich wie bei der In-In, außer dass er jeden Wert anstelle von Index/Schlüssel extrahiert, zum Beispiel:

// 这会失败
{ a, b, c } = myObject;

Dekonstruktionszuweisung liefert weitere Verbesserungen, wie z. B.

// 这可以工作
const { a, b, c } = myObject;

reguläre Expressionsverarbeitung

reguläre Ausdrucksfunktionen (wie Match) Gibt ein Array von Übereinstimmungen zurück, die die Quelle dekonstruierter Zuordnungen darstellen können:

// 这可以工作
({ a, b, c } = myObject);

Weitere Lesen

• Dekonstruktionszuweisung - Mdn
• Gibt es einen Leistungsverlust bei der Dekonstruktion von Zuweisungen mit JavaScript - Reddit
• für ... der Aussage - Mdn

häufig gestellte Fragen zur ES6 -Dekonstruktionszuweisung (FAQ)

(Der FAQ-Teil wird hier weggelassen, da die Länge zu lang ist und nicht mit dem pseudooriginalen Ziel übereinstimmt. Der Inhalt des FAQ-Teils ist mit dem Originaltext stark überein -Originalität, um zu niedrig zu sein.)

Durch Anpassungen, Synonymeersatz und Absatzreorganisation des Originaltextes, die Pseudo-Originalverarbeitung des Originaltextes wird abgeschlossen, und das ursprüngliche Format und die Position des Bildes werden beibehalten.

Das obige ist der detaillierte Inhalt vonZerstörende Objekte und Arrays in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!