What is the role of destructuring assignment in es6

Function: 1. Exchange the values ​​of two variables, the syntax "[x,y] = [y,x];"; 2. Decompose the string and pass the characters into the variable, the syntax "[variable list] = string"; 3. Return multiple values ​​from the function, the syntax "[variable list]=function"; 4. Extract json data, the syntax "{variable list}=json variable" and so on.

The operating environment of this tutorial: Windows 7 system, ECMAScript version 6, Dell G3 computer.

es6 Destructuring assignment

es6 allows extracting values ​​from arrays or objects according to a certain pattern and assigning values ​​to variables, which is called destructuring Assignment.

Destructuring assignment is simple and easy to understand in code writing, with clear semantics, making it convenient to obtain data fields in complex objects.

Destructuring model

In destructuring, the source of destructuring is located on the right side of the destructuring assignment expression, and the target of destructuring is on the left side of the destructuring expression.

The role of destructuring assignment

1. Exchange the values ​​of x, y variables

Use Destructuring assignment can exchange the values ​​of two variables without using a third 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. Decompose the string and pass the characters into the 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 , Returning multiple values ​​from the function

//The function can only return one value. If you want to return multiple values, you must put them in an array or object and return them.

  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. Definition of function parameters

 //参数是一组有次序的值
         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. Extract json data (must be used in project development)

    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. Default values ​​of function parameters (I personally think this is of little use)

   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. Traversing the map structure

 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
    }

[Related recommendations: javascript video tutorial, web front-end】

The above is the detailed content of What is the role of destructuring assignment in es6. For more information, please follow other related articles on the PHP Chinese website!