ES6的解構(gòu)賦值的示例分析

這篇文章主要介紹ES6的解構(gòu)賦值的示例分析，文中介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們一定要看完！

1 什么是解構(gòu)賦值

解構(gòu)賦值允許你使用類似數(shù)組或?qū)ο笞置媪康恼Z法將數(shù)組和對象的屬性賦給各種變量。這種賦值語法極度簡潔，同時還比傳統(tǒng)的屬性訪問方法更為清晰。解構(gòu)會僅提取出一個大對象中的部分成員來單獨(dú)使用。

如下是傳統(tǒng)的：

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

但在ES6中可以簡寫為：

var [y,m,d]=date;

2 數(shù)組與對象的解構(gòu)

數(shù)組解構(gòu)賦值語法的一般形式為：

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

這將為variable1到variableN的變量賦予數(shù)組中相應(yīng)元素項(xiàng)的值。如果你想在賦值的同時聲明變量，可在賦值語句前加入var、let或const關(guān)鍵字

對象的解構(gòu)類似，如下所示：

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

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

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

使用解構(gòu)很方便，但它強(qiáng)調(diào)對應(yīng)關(guān)系，數(shù)組解構(gòu)：下標(biāo)對下標(biāo)，對象解構(gòu)：屬性對屬性，但允許元素或者參數(shù)為空，例如下面三種寫法：

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

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

以上是“ES6的解構(gòu)賦值的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道！