ES6的解構(gòu)賦值實例詳解
1 什么是解構(gòu)賦值
解構(gòu)賦值允許你使用類似數(shù)組或?qū)ο笞置媪康恼Z法將數(shù)組和對象的屬性賦給各種變量。這種賦值語法極度簡潔，同時還比傳統(tǒng)的屬性訪問方法更為清晰。解構(gòu)會僅提取出一個大對象中的部分成員來單獨使用。
如下是傳統(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ù)組中相應元素項的值。如果你想在賦值的同時聲明變量，可在賦值語句前加入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ù)中傳參時，將一個大的對象，打散后，傳遞給對應的形參變量，有效解決了傳參時有多個形參不確定但又要求按順序傳入的需求
//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ù)傳參時，所有實參值，都要放在一個對象結(jié)構(gòu)中整體傳入。
ajax({
url:"http://localhost:3000/products/getProductsByKwords",
type:"get",
data:"kw=macbook i5",
dataType:"json"
});
使用解構(gòu)很方便，但它強調(diào)對應關(guān)系，數(shù)組解構(gòu)：下標對下標，對象解構(gòu)：屬性對屬性，但允許元素或者參數(shù)為空，例如下面三種寫法：
var [y,,]=date; var [y,,d]=date; var [,m,]=date;
雖然有不同位置的元素為空，但是依然可以正常執(zhí)行賦值操作，不過和傳統(tǒng)方法一樣，為空的在用時會按undefined處理。
總結(jié)
以上所述是小編給大家介紹的ES6的解構(gòu)賦值,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！
相關(guān)文章
在Mac、Ubuntu、Windows、Centos下如何安裝Node.js，想必有一些朋友還不會吧，本文整理了一些，需要的朋友可以參考下2013-11-11
從柯里化分析JavaScript重要的高階函數(shù)實例
gridpanel動態(tài)加載數(shù)據(jù)的實例代碼
讓mayfish支持mysqli數(shù)據(jù)庫驅(qū)動的實現(xiàn)方法
