深入解析ES6之資料結構的用法
本文介紹了深入理解ES6之資料解構的用法,寫的十分的全面細緻,具有一定的參考價值,對此有需要的朋友可以參考學習下。如有不足之處,歡迎批評指正。
一 物件解構
物件解構語法在賦值語句的左側使用了物件字面量
let node = {
type: true,
name: false
}
//既宣告又賦值
let {
type,
name
} = node;
//或者先宣告再賦值
let type, name
({type,name} = node);
console.log(type);//true
console.log(name);//false
type與name識別符號既聲明瞭本地變數,也讀取了物件的相應屬性值。
解構賦值表示式的值為表示式右側的值。當解構表示式的右側的計算結果為null或者undefined時,會丟擲錯誤。
預設值
當你使用解構賦值語句時,如果所指定的本地變數在物件中沒有找到同名屬性,那麼該變數會被賦值為undefined
let node = {
type: true,
name: false
},
type, name, value;
({type,value,name} = node);
console.log(type);//true
console.log(name);//false
console.log(value);//undefined//歡迎加入前端全棧開發交流圈一起吹水聊天學習交流:864305860
你可以選擇性地定義一個預設值,以便在指定屬性不存在時使用該值。
let node = {
type: true,
name: false
},
type, name, value;
({
type,
value = true,
name
} = node);
console.log(type);//true
console.log(name);//false
console.log(value);//true//歡迎加入前端全棧開發交流圈一起吹水聊天學習交流:864305860
賦值給不同的本地變數名
let node = { type: true, name: false, value: "dd" } let { type: localType, name: localName, value: localValue = "cc" } = node; console.log(localType); console.log(localName); console.log(localValue);\//歡迎加入前端全棧開發交流圈一起吹水聊天學習交流:864305860
type:localType這種語法表示要讀取名為type的屬性,並把它的值儲存在變數localType上。該語法與傳統物件字面量的語法相反
巢狀的物件結構
let node = {
type: "Identifier",
name: "foo",
loc: {
start: {
line: 1,
column: 1
},
end: {
line: 1,
column: 4
}//歡迎加入前端全棧開發交流圈一起吹水聊天學習交流:864305860
}
}
let {
loc: localL,
loc: {
start: localS,
end: localE
}
} = node;
console.log(localL);// start: {line: 1,column: 1},end: {line: 1,column: 4}
console.log(localS);//{line: 1,column: 1}
console.log(localE);//{line: 1,column: 4}//歡迎加入前端全棧開發交流圈一起吹水聊天學習交流:864305860
當冒號右側存在花括號時,表示目標被巢狀在物件的更深一層中(loc: {start: localS,end: localE})
二 資料解構
陣列解構的語法看起來跟物件解構非常相似,只是將物件字面量換成了陣列字面量。
let colors = ["red", "blue", "green"];
let [firstC, secondC, thirdC, thursC = "yellow"] = colors;
console.log(firstC//red
console.log(secondC);//blue
console.log(thirdC);//green
console.log(thursC);//yellow//歡迎加入前端全棧開發交流圈一起吹水聊天學習交流:864305860
你也可以在解構模式中忽略一些項,並只給感興趣的項提供變數名。
let colors = ["red","green","blue"];
let [,,thirdC] = colors;
console.log(thirdC);//blue//歡迎加入前端全棧開發交流圈一起吹水聊天學習交流:864305860
thirdC之前的逗號是為陣列前面的項提供的佔位符。使用這種方法,你就可以輕易從陣列任意位置取出值,而無需給其他項提供名稱。
解構賦值
let colors = ["red","green","blue"],
firstColor = "black",
secondColor = "purple";
[firstColor,secondColor] = colors;
console.log(firstColor);//red
console.log(secondColor);//green//歡迎加入前端全棧開發交流圈一起吹水聊天學習交流:864305860
陣列解構有一個非常獨特的用例,能輕易的互換兩個變數的值
let a =1,b =2;
[a,b] = [b,a];
console.log(a);//2
console.log(b);//1//歡迎加入前端全棧開發交流圈一起吹水聊天學習交流:864305860
巢狀的解構
let colors = ["red", ["green", "blue"], "yellow"];
let [firstC, [, ssc]] = colors;
console.log(ssc);//blue
剩餘項
let colors = ["red", "green", "blue"];
let [firstC, ...restC] = colors;
console.log(firstC);
console.log(...restC);
console.log(restC[0]);//green
console.log(restC[1]);//blue
使用剩餘項可以進行陣列克隆
let colors = ["red", "green", "blue"];
let [...restC] = colors;
console.log(restC);//["red", "green","blue"]
三 混合解構
let node = {
type: "Identifier",
name: 'foo',
loc: {
start: {
line: 1,
column: 1
},
end: {
line: 1,
column: 4
}//歡迎加入前端全棧開發交流圈一起吹水聊天學習交流:864305860
},
range: [0, 3]
}
let {
type,
name: localName,
loc: {
start: {
line: ll
},
end: {
column: col
}
},
range: [, second]
} = node;
console.log(type);//Identifier
console.log(localName);//foo
console.log(ll);//1
console.log(col);//4
console.log(second);//3//歡迎加入前端全棧開發交流圈一起吹水聊天學習交流:864305860
結語
感謝您的觀看,如有不足之處,歡迎批評指正。
本次給大家推薦一個免費的學習群,裡面概括移動應用網站開發,css,html,webpack,vue node angular以及面試資源等。
對web開發技術感興趣的同學,歡迎加入Q群:864305860,不管你是小白還是大牛我都歡迎,還有大牛整理的一套高效率學習路線和教程與您免費分享,同時每天更新視訊資料。
最後,祝大家早日學有所成,拿到滿意offer,快速升職加薪,走上人生巔峰。