Introduction à l'utilisation de l'affectation déstructurante de variables dans ES6 (avec code)

Cet article vous apporte une introduction à l'utilisation de la déstructuration et de l'attribution de variables dans ES6 (avec du code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Affectation déstructurante des tableaux

Utilisation de base

ES6 permet d'extraire des valeurs de tableaux et d'objets et d'attribuer des valeurs à des variables selon certains modèles, ce qu'on appelle un structure.

Avant ES6, si vous vouliez attribuer une valeur à une variable, vous ne pouviez spécifier que sa valeur, comme suit :

let a = 1;
let b = 2

Dans ES6, cela peut s'écrire comme ceci, comme suit :

let [a,b] = [1,2]
// a = 1, b = 2

Il est à noter que les valeurs des deux côtés de l'équation doivent être égales, de sorte que la variable de gauche se verra attribuer la valeur correspondante à droite Si la valeur. à gauche n'est pas égal, indéfini apparaîtra, comme suit :

let [foo,[[bar],baz]] = [1,[[2],3]]
foo // 1
bar // 2
baz // 3

注意：只有左右两边的 格式一定要对等，数量可以不对等。

let [a,b,c] = [1,2]
a = 1, b = 2, c = undefined

let [a,,c] = [1,2,3]
a = 1, c = 3

let [a, ...b] = [1,2,3]
a = 1, b = [2,3]

let [a] = []
let [b,a] = [1]
a = undefined

Il existe une autre situation où le côté gauche du signe égal est un tableau, mais le côté droit de le signe égal correspond à d'autres valeurs et une erreur sera signalée. Comme suit :

let [a] = 1;
let [a] = false;
let [a] = NaN;
let [a] = undefined;
let [a] = null;
let [a] = {};

以上都会报错

Mais si la gauche est un tableau et la droite est une chaîne, la valeur du premier indice de la chaîne sera prise

let [a] = '121321'  a = '1'
let [a] = 'adgasg'  a = 'a'

Pour l'ensemble structure, la même chose peut être utilisée pour l'affectation de déstructuration de tableau.

let [x,y,z] = new Set([1,2,3])
x = 1, y = 2, z = 3

Valeur par défaut

L'affectation de déstructuration permet de spécifier la valeur par défaut

let [a = 3] = []        // a:3
let [a = 3,b] = [,4]    // a:3 b:4
let [a = 3,b] = [5,4]   // a:5 b:4

Spécial

let [a = 3] = [undefined]   // a:3
let [a = 3] = [null]        // a:null

Conseils : Utilisation de l'égalité stricte dans l'opérateur es6 , si la valeur par défaut doit être efficace dans l'affectation de structure, la valeur par défaut ne doit être utilisée que lorsque la valeur équivalente est non définie, sinon l'affectation sera toujours utilisée. Dans ce qui précède, null n'est pas strictement égal à undefined++

Si l'affectation de la valeur par défaut est une expression, uniquement lorsque l'affectation à droite du signe égal n'a pas de valeur de indéfini, la valeur dans l'expression sera prise Valeur, comme suit :

function demo(){
    console.log('demo')
}

let [a = demo()] = []   // a: demo
let [a = demo()] = [1]  // a : 1

Affectation déstructurante des objets

La différence avec les tableaux est que les éléments du tableau doivent être dans la même position que les éléments attribués pour une affectation correcte et la déstructuration des objets L'affectation nécessite que les variables et les attributs des deux côtés du signe égal aient le même nom pour obtenir la valeur correcte. Sinon, la valeur est indéfinie

let {a,b} = {a:'23',b:'3'}
let {a,b} = {b:'3',a:'23'}

// 上面两个的值 都是 a: 23 b: 3

let {a,b} = {a:'3',c:'d'}
//a: 3 b: undefined

L'affectation déstructurante de l'objet affecte également la méthode d'un objet existant à une nouvelle variable, de la manière suivante :

let {sin,cos} = Math
// Math 中的sin cos 方法将赋值给变量 sin cos

let {log} = console
// log(2)  ===  console.log(2)

Si le nom de la variable à gauche du signe égal ne peut pas être cohérent avec le nom d'attribut de l'objet à droite du signe égal, il doit être écrit au format suivant :

let {a:b} = {a:'ss'}     // b：ss
//a是属性名，b才是实际赋值的变量名

L'affectation déstructurante de l'objet peut également être une déstructuration imbriquée, de la manière suivante :

第一种：

let obj = {
    p:[
        'Hello',
        {y:'world'}
    ]
}

let {p:[x,{y}]} = obj 
// x: Hello, y: world

这边的p只是属性不是变量，如果p想赋值可以写成：

let {p,:[x,{y}]} = obj

第二种：
const a = {
    loc: {
        t :1,
        b :{
            c:1,
            d:2    
        }
    }
}
let {loc:{t,b:{c,d}}} = a
或者
let {loc,loc:{t,b,b:{c,d}}} = a

Affectation imbriquée

let o = {}, arr = []

({foo:o.prop,bar: arr[0]} = {foo:123,bar:true})
//o: 123, arr = [true]

Si le mode de déstructuration est un objet imbriqué, si la propriété parent de l'objet enfant n'existe pas, une erreur sera signalée, comme suit :

let {foo:{bar}} = {baz:'baz'} //报错

Valeur par défaut

let {x = 3} = {}
// x: 3

let {x,y = 5} = {x : 1}
// x: 1, y: 5

let {x: y = 5} = {}
// y = 5

let {x: y = 5} = {x : 4}
// y = 4

let {x: y = 'hhhh'} = {}
//y = 'hhhh'

Tips:以上左边 x为属性名，y为变量


let {x = 5} = {x: undefined}
// x: 5

let {x = 4} = {x: null}
// x: null

同数组一样遵循 严格等于 
只有右边为undefined的时候默认值才会生效

Notes :

1) Les variables déclarées ne peuvent pas être utilisés pour l'affectation de déstructuration car ils constituent déjà un bloc de code.

Affectation déstructurante de la chaîne

Si l'objet d'affectation est un tableau, la chaîne sera divisée selon le format du tableau, et l'affectation sera individuelle

let [a,b] = 'ha'
// a = h , b = a

同时可以获得字符串的长度：

let {length:len} = '12121'
// len = 5

Affectation de valeurs par déstructuration numérique et booléenne

Si le côté droit du signe égal est un nombre ou une valeur booléenne, il sera converti en objet En d'autres termes, sauf pour les tableaux. et les objets, les autres valeurs seront converties en objets, sauf null et indéfini. Comme suit :

let {t:s} = 123
let {t: s} = true

Affectation déstructurante des paramètres de fonction

function add([x,y]){
    return x+y
}
add([3,5]) // 8

[[3,5],[6,7]].map(([a,b]) => a + b)
//8 , 13

function m({x=3, y=4} = {}){
    return [x,y]
}
m({x:33,y:8})     // [33,8]
m({x:32})         // [32,4]
m({})             // [3,4]
m()               // [3,4]

function m({x,y} = {x=0,y=0}){
    return [x,y]
}
m({x:33,y:8})     // [33,8]
// 代替右边的 x:0, y:0 所以是传值 33  8

m({x:32})         // [32,undefined]
//因为传值替代右边的赋值，但是只有x没有y
//所以y是取   左边y的默认值，因为你没有赋值 为undefined

m({})             // [undefined,undefined] 
// 取左边x,y的默认值，因为没有赋值 为undefined

m()               // [0,0]
// 没有传值，使用本身的赋值 都是0

Autres

Lorsque les parenthèses ne peuvent pas être utilisées

1. Déclaration de variable
2. Paramètres de fonction
3. Mode d'instruction d'affectation

Lorsque des parenthèses peuvent être utilisées

1. Partie non-mode de l'instruction d'affectation, peut Utiliser des parenthèses

Objectif de l'affectation de déstructuration

1. Échanger la valeur d'une variable
2. Renvoyer plusieurs valeurs d'une fonction
3. Pour la définition des paramètres de fonction
4. Extraire les données JOSN
5. Valeurs par défaut des paramètres de fonction
6. Parcourir la structure de la carte
7. Méthode de spécification du module d'entrée

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!