What is the role of destructuring assignment in es6-Front-end Q&A-php.cn

What is the role of destructuring assignment in es6

青灯夜游

Release： 2022-05-19 13:56:14

Original

2041 people have browsed it

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.

What is the role of destructuring assignment in es6

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

Copy after login

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

Copy after login

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

Copy after login

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});

Copy after login

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

Copy after login

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"}

Copy after login

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
    }

Copy after login

[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!