快捷導(dǎo)航

ES6的解構(gòu)賦值實(shí)例詳解

更新時(shí)間：2019年05月06日 09:02:54 作者：Mr-Nobody

解構(gòu)賦值允許你使用類似數(shù)組或?qū)ο笞置媪康恼Z法將數(shù)組和對(duì)象的屬性賦給各種變量。這篇文章主要介紹了ES6的解構(gòu)賦值的實(shí)例代碼 ,需要的朋友可以參考下

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

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

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

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

但在ES6中可以簡(jiǎn)寫為：

var [y,m,d]=date;

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

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

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

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

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

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

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

//1. 定義形參列表時(shí)，就用對(duì)象結(jié)構(gòu)定義
function ajax({
 //與順序無關(guān)
 url,
 type,
 data,//不確定
 dataType,//不確定
}){
   console.log(`向${url}發(fā)送${type}請(qǐng)求`);
   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í)，所有實(shí)參值，都要放在一個(gè)對(duì)象結(jié)構(gòu)中整體傳入。
ajax({
  url:"http://localhost:3000/products/getProductsByKwords",
  type:"get",
  data:"kw=macbook i5",
  dataType:"json"
});

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

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

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

總結(jié)

以上所述是小編給大家介紹的ES6的解構(gòu)賦值,希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！

您可能感興趣的文章: