Quel est le rôle de l'affectation de déstructuration dans es6

Fonction : 1. Échangez les valeurs de deux variables, la syntaxe "[x,y] = [y,x];" 2. Décomposez la chaîne et passez les caractères dans la variable, la syntaxe "[variable list]=string" ; 3. Renvoie plusieurs valeurs de la fonction, la syntaxe est "[variable list] = function"; 4. Extrayez les données json, la syntaxe est "{variable list} = json variable" et ainsi de suite .

L'environnement d'exploitation de ce tutoriel : système Windows 7, ECMAScript version 6, ordinateur Dell G3.

es6 affectation de déstructuration

es6 permet d'extraire des valeurs de tableaux ou d'objets et d'attribuer des valeurs à des variables selon un certain modèle, appelé affectation de déstructuration.

L'affectation de déstructuration est simple et facile à comprendre dans l'écriture de code, avec une sémantique claire, ce qui facilite l'obtention de champs de données dans des objets complexes.

Modèle de déstructuration

Dans la déstructuration, la source de la déstructuration est située sur le côté droit de l'expression d'affectation de déstructuration, et la cible de la déstructuration est sur le côté gauche de l'expression de déstructuration.

Le rôle de l'affectation déstructurante

1. Échangez les valeurs des variables x, y

Utilisez l'affectation déstructurante pour échanger les valeurs de deux variables sans utiliser une troisième variable

    let x = 1;
    let y = 2;
    console.log('x:'+x, 'y:'+y);   //x:1 y:2
    //结构赋值  
    [x,y] = [y,x];
    console.log('x:'+x, 'y:'+y);   //x:2 y:1

2. Décomposez une chaîne, transmettez les caractères dans la variable

var [a,b,c,d,e] = "hello";
console.log(a); // h
console.log(b); // e
console.log(c); // l
console.log(d); // l
console.log(e); // o

3. Renvoyez plusieurs valeurs de la fonction

//La fonction ne peut renvoyer qu'une seule valeur. Si vous souhaitez renvoyer plusieurs valeurs, mettez-les. dans un tableau ou un objet et renvoyez-les.

  function example(){
        //返回一个数组
        return [1,2,3]
    }
    let [a,b,c]= example();
    console.log('a:'+a,'b:'+b,'c:'+c);  //a:1 b:2 c:3
    
    
    function example2(){
        //返回一个对象
        return {
            name:'kang+',
            age:20
        }
    }
    let {name,age} = example2();
    console.log('name:'+name,'age:'+age);  //name:kang+ age:20

4. Définition des paramètres de fonction

 //参数是一组有次序的值
         function f([x,y,z]){
             console.log('x:'+x);
             console.log('y:'+y);
             console.log('z:'+z);
         }

         f([1,2,3]);


        //参数是一组没有次序的值
         function f({x,y,z}){
             console.log('x:'+x);
             console.log('y:'+y);
             console.log('z:'+z);
         }
         f({z:3, x:2, y:1});

5. Extraire les données json (doit être utilisé dans le développement du projet)

    let jsonData = {
        number:01,
        status:'200',
         data:[{person:'kang+',age:20}]

     }
    // 获取json数据

     let {number,status,data,data:[{person,age}]} = jsonData;
     console.log('number:'+number);   //number:1
     console.log('status:'+status);   //status:200 
     console.log(data)                // [{…}]
     console.log('person:'+person);   //person:kang+
     console.log('age:'+age);         //age:20

6. pas utile) Large)

   function Person(name,age,school = 'xiyou'){
         this.name = name;
         this.age = age;
        this.school = school;
     }
     var son = new Person('kang+',20);
     console.log(son)   // {name: "kang+", age: 20, school: "xiyou"}

7. Parcourez la structure de la carte

 Map 结构原生支持 Iterator接口，配合变量的解构赋值获取键名和键值就非常方便。    var map = new Map();
    map.set('name','kang+');
    map.set('age','20');

    for(let [key, value] of map){
        console.log(key + ' is ' + value);
    }
    name is kang+
    age is 20

    获取键名    var map = new Map();
    map.set('name','kang+');
    map.set('age','20');
    for(let [key] of map){
        console.log(key);    //name   age
    }

    // 获取键值
    var map = new Map();
    map.set('name','kang+');
    map.set('age','20');
    for(let [,value] of map){
        console.log(value);   // kang+    20
    }

[Recommandations associées : tutoriel vidéo javascript, front-end web]

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!