Das Prinzip und die Anwendung der ES6-Dekonstruktionszuweisung

Array-Destrukturierungszuweisung

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

Definieren Sie mehrere Variablen gleichzeitig, a entspricht 1, b entspricht 2, c entspricht 3

Durch die Destrukturierungszuweisung können Sie Standardwerte angeben. Das heißt, wenn die Variable auf der linken Seite einen Standardwert angibt und auf der rechten Seite kein entsprechender Wert vorhanden ist, wird zuerst der Standardwert ausgegeben.

sei [x, y = 'b'] = ['a'] // x = 'a', y = 'b'

x entspricht dem Zeichen a und der Standardwert von y ist das Zeichen b. Wenn rechts kein entsprechendes Zeichen vorhanden ist, wird standardmäßig das Zeichen b ausgegeben.

Destrukturierende Zuweisung von Objekten

Dekonstruktion kann nicht nur für Arrays, sondern auch für Objekte verwendet werden. Es gibt einen wichtigen Unterschied zwischen Objektdekonstruktion und Arraydekonstruktion. Die Elemente eines Arrays sind in einer bestimmten Reihenfolge angeordnet und der Wert einer Variablen wird durch ihre Position bestimmt. Die Eigenschaften eines Objekts hingegen haben keine Reihenfolge und die Variable muss denselben Namen wie die Eigenschaft haben, um den richtigen Wert zu erhalten.

lassen {
    Name,
    Alter,
    Hobbys: [eins, zwei]
} = {
    Name: 'shiramashiro',
    Alter: 21,
    Hobbys: ['Radfahren', 'Animation']
}

Wenn ich beispielsweise den Wert von „age“ in den Wert „abc“ ändere, kann ihm kein entsprechender Wert zugewiesen werden, da er nicht dem Eigenschaftsnamen im Objekt entspricht, und ist daher undefiniert.

Anwendung der Destrukturierungszuweisung

Vertauschen der Werte von Variablen

Die normale Art, über den Austausch von Variablenwerten nachzudenken

sei x = 1,
    y = 2,
    Temperatur = 0

temp = x // x = 1 = temp
x = y // y = 2 = x
y = temp // temp = 1 = y

console.log('x => ', x)
Konsole.log('y => ', y)

Austauschen von Variablen mithilfe der Destrukturierungszuweisung

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

console.log('x => ', x)
Konsole.log('y => ', y) 

Diese Art des Austausches der Werte der Variablen x und y ist nicht nur prägnant, sondern auch leicht zu lesen und weist eine sehr klare Semantik auf.

Zurückgeben mehrerer Werte aus einer Funktion

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 wird es bequemer.

Extrahieren Sie den zweiten Wert im Hobby-Array

Funktion getArray() {
    zurückkehren {
        Name: 'kongsam',
        Alter: 21,
        Hobbys: ['Radfahren', 'Animation', 'Badminton']
    }
}
console.log(getArray().name + 'like' + getArray().hobbies[1]) // Anime

Verwenden Sie die Destrukturierungszuweisung, um den zweiten Wert im Hobby-Array zu erhalten

let {name, alter, hobbys} = getArray()
console.log(name + 'like' + hobbys[1]) // Anime

Durchlaufen der Kartenstruktur

Beim Durchlaufen der for...of-Schleife ist der durchlaufene Wert ein Array, und die Dekonstruktionszuweisung kann einem „Mustervergleich“ mit dem Array unterzogen werden, wodurch der Schlüsselwert schnell extrahiert werden kann.

Es ist sehr praktisch, die for...of-Schleifendurchquerung mit Destrukturierungszuweisung zu verwenden, um den Schlüsselwert zu erhalten.

für (let [Schlüssel, Wert] von Map) {
    console.log("Schlüssel => ", Schlüssel)
    console.log("Wert => ", Wert)
}

Destrukturierende Zuweisung von Funktionsparametern

// sei { x = 10, y = 5 } = {}

Funktion f({ x = 10, y = 5 } = {}) {
    Rückgabewert [x, y]
}

konsole.log(f({ x: 100, y: 50 })) // [100, 50]
console.log(f({ x: 3 })) // [3, 5]
console.log(f({})) // [10, 5]
konsole.log(f()) // [10, 5]

Sie können Objekte in die Funktionsparameter übergeben und Standardwerte für die übergebenen Objekte festlegen. Es wird zur Verwendung in die Funktion zerlegt, und Sie können es auf diese Weise verstehen.

Funktion f(x = 10, y = 5) {
    Rückgabewert [x, y]
}

konsole.log(f(100, 50)) // [100, 50]
console.log(f(3)) // [3, 5]
konsole.log(f()) // [10, 5]

Unterschiedliche Schreibmethoden führen zu unterschiedlichen Ergebnissen.

Funktion f({ x, y } = { x: 10, y: 5 }) {
    Rückgabewert [x, y]
}

konsole.log(f({ x: 100, y: 50 })) // [100, 50]
console.log(f({ x: 3 })) // [3, undefiniert]
console.log(f({})) // [undefiniert, undefiniert]
konsole.log(f()) // [10, 5]

Der dritte und vierte Ausdruck enthalten „undefiniert“, da das übergebene x oder y nicht dem Wert in der Objekteigenschaft entspricht und die Übereinstimmung fehlschlägt.

Oben finden Sie detaillierte Informationen zum Prinzip und zur Anwendung der ES6-Destrukturierungszuweisung. Weitere Informationen zur ES6-Destrukturierungszuweisung finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!