ES6中的解構(gòu)賦值入門

數(shù)組的解構(gòu)賦值:

  • let [a,b,c]=[1,2,3]; ==>let a=1;let b=2;let c=3;

  • let [head,...tail]=[1,2,3,4]; ==> head = 1 , tail = [2,3,4]

  • let [x,y,...z]=['a']; ==> x = "a" y=undefined z=[]

  • 分析:因為解構(gòu)賦值是依次對應(yīng)的昂儒,x對應(yīng)"a"资昧,y沒有對應(yīng)值,為undefined荆忍,...z表示剩余內(nèi)容格带,剩余為空,因此為空數(shù)組[]

  • let [a,[b],d]=[1,[2,3],4]; a==>1,b==>2,d==>4

  • 分析:a和d不必哆嗦刹枉,[b]=[2,3],解構(gòu)賦值,b=2叽唱;3沒有對應(yīng)值,忽略

  • ...運(yùn)算符兩種用法:

  • 展開運(yùn)算符(用在array和object上):let a = [1,2,3]; let b = [0,...a,4]; ==>[0,1,2,3,4]

  • 剩余操作符(結(jié)構(gòu)的一種微宝,一般只針對array)棺亭,舉例就是上面的。解構(gòu)不成功蟋软,變量的值就是undefined镶摘。如果等號右邊不是數(shù)組或不可遍歷,會報錯岳守。比如:

  • let [foo]=1; let [foo]=false; let [foo]=NaN; let [foo]=undefined; let [foo]=null; let [foo]={};這些等號右邊的值都不可遍歷凄敢,因此都會報錯

  • 解構(gòu)允許賦默認(rèn)值: let [x,y = 'b']=['a',undefined]; x==>'a',y==>'b'

  • 如果數(shù)組成員不嚴(yán)格為undefined,默認(rèn)值不會生效:let [x,y = 'b']=['a',null]; x==>'a',y==>null

對象的解構(gòu)賦值:

  • 對象的解構(gòu)賦值是按名稱對應(yīng)來的湿痢,名稱不對應(yīng)值就為undefined涝缝。而數(shù)組是按次序排列的

  • let [bar,foo]={foo:"aaa",bar:"bbb"}; ==>foo:aaa,bar:bbb

  • 對象的解構(gòu)賦值是下面形式的簡寫:let {foo:foo,bar:bar}={foo:'aaa',bar:'bbb'}

  • var {foo:baz}={foo:'aaa',bar:'bbb'}; ==>baz:aaa

  • foo稱為模式,baz稱為變量

  • let {foo:baz}={foo:'aaa',bar:'bbb'}; ==>baz:aaa,foo:foo is not defined

  • 對象的解構(gòu)也可以賦默認(rèn)值:var {x:y=3}={x:5}; ==> y:5

  • 默認(rèn)值生效的條件也是對象的屬性值嚴(yán)格等于undefined

  • 已經(jīng)聲明的變量不能用于解構(gòu)賦值:let x; {x}={x:1}; ==>報錯譬重。因為這里JavaScript引擎會將{x}解析為代碼塊拒逮,通過({x}={x:1}); 則能正確解析

  • 解構(gòu)賦值左邊可以不放任何東西

  • 字符串也可以解構(gòu)賦值,類似數(shù)組的對象都有l(wèi)ength屬性臀规,也可以對其解構(gòu)賦值:let {length:len}='hello'; ==> len:5

  • 解構(gòu)賦值時滩援,如果等號右邊是數(shù)值和布爾值,則會先轉(zhuǎn)為對象

  • let {prop:x}=undefined; ==>TypeError undefined和Null不能轉(zhuǎn)化為對象

  • let {prop:x}=null; ==>TypeError

  • 注意:模式不能使用圓括號

解構(gòu)賦值的用途

  • 交換變量的值:let x=1; let y=2; [x,y]=[y,x];

  • 從函數(shù)返回多個值:

    function example(){

      return [1,2,3];

    }

    let [a,b,c]=example(); //返回數(shù)組

    function example(){

      return {foo:1,bar:2};

    }

    let {foo,bar}=example();  //返回對象
  • 函數(shù)參數(shù)的定義:
functoin f([x,y,z]){

...

}

f([1,2,3]); //有次序的參數(shù)

function f({x,y,z}){

...

}

f({z:3,y:2,x:1});  //無次序的參數(shù)
  • 提取json數(shù)據(jù):
  let jsonData={

id:42,

  status:"ok",

  data:[132,456]

  };

  let {id,status,data}=jsonData;
  • 函數(shù)參數(shù)的默認(rèn)值:
jQuery.ajax=function(url,{

async=true,

beforeSend=function(){},

cache=true}){...}

- 遍歷Map結(jié)構(gòu):

var map=new Map();

map.set('first','hello');

map.set('second','world');

for (let [key,value] of map){

console.log(key,value)

}

for (let [key] of map){

console.log(key)

}

for (let [,value] of map){

console.log(key)

}
  • 輸入模塊的指定方法:
const { SourceMapConsumer, SourceNode } = require("source-map");

最后注意一點(diǎn):解構(gòu)賦值的參數(shù)必須在最右邊

例如:

const [a,...b]=[1,2,3,4]能正確解構(gòu)塔嬉,而const [...a,b]=[1,2,3,4]會報錯玩徊,如果是三個參數(shù),const [a,...b,...c]=[1,2,3,4]也是錯誤的

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市邑遏,隨后出現(xiàn)的幾起案子佣赖,更是在濱河造成了極大的恐慌,老刑警劉巖记盒,帶你破解...
    沈念sama閱讀 221,888評論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件憎蛤,死亡現(xiàn)場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)俩檬,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,677評論 3 399
  • 文/潘曉璐 我一進(jìn)店門萎胰,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人棚辽,你說我怎么就攤上這事技竟。” “怎么了屈藐?”我有些...
    開封第一講書人閱讀 168,386評論 0 360
  • 文/不壞的土叔 我叫張陵榔组,是天一觀的道長。 經(jīng)常有香客問我联逻,道長搓扯,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 59,726評論 1 297
  • 正文 為了忘掉前任包归,我火速辦了婚禮锨推,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘公壤。我一直安慰自己换可,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,729評論 6 397
  • 文/花漫 我一把揭開白布厦幅。 她就那樣靜靜地躺著沾鳄,像睡著了一般。 火紅的嫁衣襯著肌膚如雪慨削。 梳的紋絲不亂的頭發(fā)上洞渔,一...
    開封第一講書人閱讀 52,337評論 1 310
  • 那天套媚,我揣著相機(jī)與錄音缚态,去河邊找鬼。 笑死堤瘤,一個胖子當(dāng)著我的面吹牛玫芦,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播本辐,決...
    沈念sama閱讀 40,902評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼桥帆,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了慎皱?” 一聲冷哼從身側(cè)響起老虫,我...
    開封第一講書人閱讀 39,807評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎茫多,沒想到半個月后祈匙,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,349評論 1 318
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,439評論 3 340
  • 正文 我和宋清朗相戀三年夺欲,在試婚紗的時候發(fā)現(xiàn)自己被綠了跪帝。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,567評論 1 352
  • 序言:一個原本活蹦亂跳的男人離奇死亡些阅,死狀恐怖伞剑,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情市埋,我是刑警寧澤黎泣,帶...
    沈念sama閱讀 36,242評論 5 350
  • 正文 年R本政府宣布,位于F島的核電站缤谎,受9級特大地震影響聘裁,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜弓千,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,933評論 3 334
  • 文/蒙蒙 一衡便、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧洋访,春花似錦镣陕、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,420評論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至汁展,卻和暖如春鹊碍,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背食绿。 一陣腳步聲響...
    開封第一講書人閱讀 33,531評論 1 272
  • 我被黑心中介騙來泰國打工侈咕, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人器紧。 一個月前我還...
    沈念sama閱讀 48,995評論 3 377
  • 正文 我出身青樓耀销,卻偏偏與公主長得像,于是被迫代替她去往敵國和親铲汪。 傳聞我的和親對象是個殘疾皇子熊尉,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,585評論 2 359