Une explication de l'utilisation de l'affectation de déstructuration dans ES6

Le contenu de cet article concerne l'utilisation de l'affectation de déstructuration dans ES6. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Aperçu

Pour être honnête, l'affectation de déstructuration est très délicate, surtout lorsqu'elle est utilisée avec d'autres es6, alors comment dire simplement 解构赋值, par exemple : l'affectation de déstructuration est une machine à diviser les pièces, Mettez toutes les pièces de 10 cents, 50 cents et 1 yuan dans la machine à diviser les pièces, elle séparera automatiquement toutes les pièces, sortez simplement ce que vous voulez !

Tableau de déstructuration

Vous pouvez extraire une donnée ou un groupe de données de votre choix d'un tableau

Normal

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

avec le reste paramètres Utilisez

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

pour omettre certains paramètres

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

Il n'y a pas assez de paramètres

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

Il n'y a pas assez de paramètres et vous ne voulez pasundefined, vous pouvez utiliser les paramètres par défaut

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

Déstructuration et attribution de valeurs aux variables existantes

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

Exemple intéressant de déstructuration de tableau

Échange de deux variables

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

Obtention d'un résultat de correspondance régulier

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

console.log(match) // 'e'

Objet déconstruit

Vous pouvez retirer une valeur d'attribut de l'objet de l'objet, ou un sous-objet

Normal

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

Les attributs restants

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

Attributs insuffisants

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

Les attributs insuffisants peuvent utiliser les paramètres par défaut

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

pour attribuer des valeurs à de nouvelles variables

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

De nouvelles variables sont attribuées et des valeurs par défaut sont fournies

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

Les objets profonds peuvent également être déconstruits

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

Déstructuration en itération

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

Paramètres de la fonction de déstructuration

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

Attribuer une valeur à une variable existante est assez particulier

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!