Welche Destrukturierungsmethoden gibt es in es6?

Dieses Mal werde ich Ihnen die Methoden der ES6-Dekonstruktion und die Vorsichtsmaßnahmen für die ES6-Dekonstruktion vorstellen. Das Folgende ist ein praktischer Fall, schauen wir uns das an.

Seien Sie sehr vorsichtig, wenn Sie eine deklarierte Variable für die Destrukturierung von Zuweisungen verwenden möchten.

// 错误的写法
let x;
{x} = {x: 1};
// SyntaxError: syntax error

Der obige Code meldet einen Fehler, da die JavaScript-Engine {x} als Codeblock versteht, was zu einem Syntaxfehler führt. Dieses Problem kann nur dadurch gelöst werden, dass die geschweifte Klammer nicht am Anfang der Zeile steht, um zu verhindern, dass JavaScript sie als Codeblock interpretiert.

// 正确的写法
let x;
({x} = {x: 1});

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

var { foo: baz } = { foo: 'aaa', bar: 'bbb' };
baz // "aaa"
let obj = { first: 'hello', last: 'world' };
let { first: f, last: l } = obj;
f // 'hello'
l // 'world'
//这实际上说明，对象的解构赋值是下面形式的简写
let { foo: foo, bar: bar } = { foo: "aaa", bar: "bbb" };

Mit anderen Worten: Der interne Mechanismus der Objektdestrukturierung und -zuweisung besteht darin, zunächst das gleichnamige Attribut zu finden und es dann der entsprechenden Variablen zuzuweisen. Was wirklich zugewiesen wird, ist Letzteres, nicht Ersteres.

let { foo: baz } = { foo: "aaa", bar: "bbb" };
baz // "aaa"
foo // error: foo is not defined

let obj = {
 p: [
 'Hello',
 { y: 'World' }
 ]
};
let { p: [x, { y }] } = obj;
x // "Hello"
y // "World"

Hinweis: p ist derzeit ein Muster und keine Variable, daher wird ihm kein Wert zugewiesen. Wenn p auch als Variable zugewiesen werden muss, kann es wie folgt geschrieben werden.

let obj = {
 p: [
 'Hello',
 { y: 'World' }
 ]
};
let { p, p: [x, { y }] } = obj;
x // "Hello"
y // "World"
p // ["Hello", {y: "World"}]

Wenn bei der Destrukturierung der Zuweisung die rechte Seite des Gleichheitszeichens ein numerischer Wert oder ein boolescher Wert ist, wird dieser zuerst in ein Objekt umgewandelt

let {toString: s} = 123;
s === Number.prototype.toString // true
let {toString: s} = true;
s === Boolean.prototype.toString // true

Funktionsparameter können auch durch Destrukturierung zugewiesen werden.

function add([x, y]){
 return x + y;
}
add([1, 2]); // 3

Im obigen Code ist der Parameter der Funktion add ein Array auf der Oberfläche, aber in dem Moment, in dem der Parameter übergeben wird, wird der Array-Parameter in die Variablen x und y zerlegt. Für den Code innerhalb der Funktion sind die Parameter x und y

, die sie fühlen können undefiniert löst den Standardwert des Funktionsparameters aus.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

HTML-Tags mit DOM-Knoten kombinieren

js verbietet Browser-Back-Events

Das obige ist der detaillierte Inhalt vonWelche Destrukturierungsmethoden gibt es in es6?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!