溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
一 對象解構
對象解構語法在賦值語句的左側使用了對象字面量
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
你可以選擇性地定義一個默認值，以便在指定屬性不存在時使用該值。
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
賦值給不同的本地變量名
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);
type:localType這種語法表示要讀取名為type的屬性，并把它的值存儲在變量localType上。該語法與傳統對象字面量的語法相反
嵌套的對象結構
let node = {
type: "Identifier",
name: "foo",
loc: {
start: {
line: 1,
column: 1
},
end: {
line: 1,
column: 4
}
}
}
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}
當冒號右側存在花括號時，表示目標被嵌套在對象的更深一層中（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
你也可以在解構模式中忽略一些項，并只給感興趣的項提供變量名。
let colors = ["red","green","blue"]; let [,,thirdC] = colors; console.log(thirdC);//blue
thirdC之前的逗號是為數組前面的項提供的占位符。使用這種方法，你就可以輕易從數組任意位置取出值，而無需給其他項提供名稱。
解構賦值
let colors = ["red","green","blue"], firstColor = "black", secondColor = "purple"; [firstColor,secondColor] = colors; console.log(firstColor);//red console.log(secondColor);//green
數組解構有一個非常獨特的用例，能輕易的互換兩個變量的值。
let a =1,b =2; [a,b] = [b,a]; console.log(a);//2 console.log(b);//1
嵌套的解構
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
}
},
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
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
