es6解構賦值有什麼作用

作用：1、交換兩變數的值，語法「[x,y] = [y,x];」；2、分解字串，將字元傳入變數，語法「[變數列表]=字串」；3、從函數中返回多個值，語法「[變數列表]=函數」；4、提取json資料，語法「{變數列表}=json變數」等等。

本教學操作環境：windows7系統、ECMAScript 6版、Dell G3電腦。

es6解構賦值

es6允許按照一定的模式，從陣列或物件中提取值，給變數進行賦值，稱為解構賦值。

解構賦值在程式碼書寫上簡單易懂，語意清晰明瞭，方便對複雜物件中資料欄位的獲取。

解構模型

在解構中，解構的源，位於解構賦值表示式的右邊，而解構的目標，在解構表示式的左邊。

解構賦值的作用

1、交換x,y變數的值

利用解構賦值可以不借助第三個變數的交換兩變數的值

    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、分解字串，將字元傳入變數

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、從函數返回多個值

//函數只能返回一個值，如果要返回多個值，要將他們放在陣列或者物件裡返回。

  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、函數引數的定義

 //引數是一組有次序的值
         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、提取json資料(專案開發中一定用的到的)

    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、函數引數的預設值 (這個個人認為作用不大)

   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、遍歷map結構

 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
    }

【相關推薦：、】

以上就是es6解構賦值有什麼作用的詳細內容，更多請關注TW511.COM其它相關文章！