ES6的解構賦值

1 什么是解構賦值

解構賦值允許你使用類似數組或對象字面量的語法將數組和對象的屬性賦給各種變量。這種賦值語法極度簡潔，同時還比傳統的屬性訪問方法更為清晰。解構會僅提取出一個大對象中的部分成員來單獨使用。

如下是傳統的：

var y=data[0]
var m=data[1]
var d=data[2]

但在ES6中可以簡寫為：

var [y,m,d]=date;

2 數組與對象的解構

數組解構賦值語法的一般形式為：

 

 [ variable1, variable2, ..., variableN ] = array;

 

這將為variable1到variableN的變量賦予數組中相應元素項的值。如果你想在賦值的同時聲明變量，可在賦值語句前加入var、let或const關鍵字

對象的解構類似，如下所示：

var user={
    uid:1001,
    uname:"dingding",
    set:1,
    signin:function(){
      console.log("登錄...");
    },
    signout:function(){
      console.log("注銷...");
    },
    signup:function(){
      console.log("注冊...");
    }
}
//var {uid:uid,signup:signup}=user;//簡寫如下
var {uid,signup}=user;
console.log(uid);
signup();

對象解構的一個特殊用法是參數結構，在向函數中傳參時，將一個大的對象，打散后，傳遞給對應的形參變量，有效解決了傳參時有多個形參不確定但又要求按順序傳入的需求

//1. 定義形參列表時，就用對象結構定義
function ajax({
  //與順序無關
  url,
  type,
  data,//不確定
  dataType,//不確定
}){
      console.log(`向${url}發送${type}請求`);
      if(data!=undefined&&type=="get"){
        console.log(`在url結尾拼接參數?${data}`)
      }
      if(data!=undefined&&type=="post"){
        console.log(`xhr.send(${data})`);
      }
      if(dataType=="json"){
        console.log(`JSON.parse(返回結果)`);
      }
}
//2. 調用函數傳參時，所有實參值，都要放在一個對象結構中整體傳入。
ajax({
    url:"http://localhost:3000/products/getProductsByKwords",
    type:"get",
    data:"kw=macbook i5",
    dataType:"json"
});

使用解構很方便，但它強調對應關系，數組解構：下標對下標，對象解構：屬性對屬性，但允許元素或者參數為空，例如下面三種寫法：

var [y,,]=date;
var [y,,d]=date;
var [,m,]=date;

雖然有不同位置的元素為空，但是依然可以正常執行賦值操作，不過和傳統方法一樣，為空的在用時會按undefined處理。