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處理。