Eine Erklärung der Verwendung der Destrukturierungszuweisung in ES6

Der Inhalt dieses Artikels befasst sich mit der Verwendung der Destrukturierungszuweisung in ES6. Ich hoffe, dass er für Freunde in Not hilfreich ist.

Übersicht

Um ehrlich zu sein, ist die Destrukturierungszuweisung sehr schwierig, insbesondere wenn sie mit anderen es6 verwendet wird. Wie sagt man also einfach 解构赋值, zum Beispiel: Die Destrukturierungszuweisung ist eine Münzspaltungsmaschine, Geben Sie alle 10-Cent-, 50-Cent- und 1-Yuan-Münzen in die Münzteilungsmaschine. Sie trennt automatisch alle Münzen. Nehmen Sie einfach heraus, was Sie möchten!

Arrays dekonstruieren

Sie können die gewünschten Daten oder Datengruppen aus einem Array herausnehmen

Normal

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

Zusammen mit den übrigen Parametern verwenden

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

Einige Parameter weglassen

let [a, , ...c]=[1,2,3,4,5]
console.log(a) // 1
console.log(c) // [3,4,5]

Nicht genügend Parameter

let [a, b, c]=[1,2]
console.log(a) // 1
console.log(b) // 2
console.log(c) // undefined

Nicht genügend Parameter und ich möchte sie nichtundefined, Sie können die Standardparameter verwenden

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

um vorhandene Variablen zu dekonstruieren Zuweisung

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

Interessante Array-Destrukturierung, Kastanie

Austausch von zwei Variablen

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

Erhalten eines regulären Matching-Ergebnisses

let [,match]="hello world".match(/h(e)/) 
// 匹配的结果是 ["he", "e", index: 0, input: "hello world", groups: undefined]

console.log(match) // 'e'

Dekonstruktion des Objekts

Sie können einen Attributwert des Objekts aus dem Objekt oder einem Unterobjekt herausnehmen

Normal

let {a, b}={a:1,b:2}
console.log(a) // 1
console.log(b) // 2

Verbleibende Attribute

let {a,...b}={a:1,b:2,c:3}
console.log(a) // 1
console.log(b) // {b:2,c:3}

Unzureichende Attribute

let {a, b, c}={a:1,b:2}
console.log(a) // 1
console.log(b) // 2
console.log(c) // undefined

Unzureichende Attribute Sie können Standardparameter verwenden

let {a, b, c=3}={a:1,b:2}
console.log(a) // 1
console.log(b) // 2
console.log(c) // 3

um neuen Variablen Werte zuzuweisen

let {a:aa, b:bb}={a:1,b:2}
console.log(aa) // 1
console.log(bb) // 2

um neuen Variablen Werte zuzuweisen und Standardwerte bereitzustellen

let {a:aa, b:bb, c:cc=3}={a:1,b:2}
console.log(aa) // 1
console.log(bb) // 2
console.log(cc) // 3

Sehr tiefe Objekte können auch dekonstruiert werden

let {name, books:[book]}={name:"haha",books:['book1']}
console.log(name) // 'haha'
console.log(book) // 'book1'

Destrukturierung in Iteration

for(let {name} of [{name:1},{name:2}]){
    console.log(name) // 1 2
}

Destrukturierung von Funktionsparametern

let register({name, pwd}){
    console.log(name, pwd)
}
register({name:'1',pwd:'2'}) //1,2

Das Zuweisen eines Werts zu einer vorhandenen Variablen ist etwas ganz Besonderes

let a,b
({a, b}={a:1,b:2}) // 需要提升优先级，否则 {a, b} 会被解析成代码块
console.log(a, b)// 1, 2

Das obige ist der detaillierte Inhalt vonEine Erklärung der Verwendung der Destrukturierungszuweisung in ES6. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!