一 對象解構(gòu)
平輿網(wǎng)站制作公司哪家好,找成都創(chuàng)新互聯(lián)公司!從網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、成都響應(yīng)式網(wǎng)站建設(shè)等網(wǎng)站項目制作,到程序開發(fā),運營維護。成都創(chuàng)新互聯(lián)公司從2013年成立到現(xiàn)在10年的時間,我們擁有了豐富的建站經(jīng)驗和運維經(jīng)驗,來保證我們的工作的順利進行。專注于網(wǎng)站建設(shè)就選成都創(chuàng)新互聯(lián)公司。
對象解構(gòu)語法在賦值語句的左側(cè)使用了對象字面量
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標識符既聲明了本地變量,也讀取了對象的相應(yīng)屬性值。
解構(gòu)賦值表達式的值為表達式右側(cè)的值。當解構(gòu)表達式的右側(cè)的計算結(jié)果為null或者undefined時,會拋出錯誤。
默認值
當你使用解構(gòu)賦值語句時,如果所指定的本地變量在對象中沒有找到同名屬性,那么該變量會被賦值為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上。該語法與傳統(tǒng)對象字面量的語法相反
嵌套的對象結(jié)構(gòu)
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}
當冒號右側(cè)存在花括號時,表示目標被嵌套在對象的更深一層中(loc: {start: localS,end: localE})
二 數(shù)據(jù)解構(gòu)
數(shù)組解構(gòu)的語法看起來跟對象解構(gòu)非常相似,只是將對象字面量換成了數(shù)組字面量。
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
你也可以在解構(gòu)模式中忽略一些項,并只給感興趣的項提供變量名。
let colors = ["red","green","blue"]; let [,,thirdC] = colors; console.log(thirdC);//blue
thirdC之前的逗號是為數(shù)組前面的項提供的占位符。使用這種方法,你就可以輕易從數(shù)組任意位置取出值,而無需給其他項提供名稱。
解構(gòu)賦值
let colors = ["red","green","blue"], firstColor = "black", secondColor = "purple"; [firstColor,secondColor] = colors; console.log(firstColor);//red console.log(secondColor);//green
數(shù)組解構(gòu)有一個非常獨特的用例,能輕易的互換兩個變量的值。
let a =1,b =2; [a,b] = [b,a]; console.log(a);//2 console.log(b);//1
嵌套的解構(gòu)
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
使用剩余項可以進行數(shù)組克隆
let colors = ["red", "green", "blue"]; let [...restC] = colors; console.log(restC);//["red", "green","blue"]
三 混合解構(gòu)
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
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持創(chuàng)新互聯(lián)。