ES6之解構(gòu)賦值

什么是解構(gòu)賦值投放,能干啥,怎么用适贸,簡單得應(yīng)用場景是啥灸芳,客官里面走涝桅,里面都有:

咱們現(xiàn)在說說解構(gòu)賦值得概念:從數(shù)組和對象中提取值,對變量進行賦值烙样,這被稱為解構(gòu)賦值冯遂,解構(gòu):就是解析結(jié)構(gòu),如果你想解析得是數(shù)組谒获,那么 = 號 左右都是數(shù)組蛤肌,如果你解析得是對象,那么等號左右就都是對象批狱。

本質(zhì)上裸准,這種概念及寫法就是屬于:” 模式匹配 “,只要等號兩邊得 模式相同,左邊得變量就會被賦予對應(yīng)得值

首先我們有一個數(shù)組或者對象赔硫,我要獲取到其中某個值炒俱,沒有解構(gòu)賦值之前是這樣的

let? a = [1,2,3];? ?如果我要想獲取到元素2怎么獲取,簡單:let b = a[1];? console.log( b ); 這不就把你想要得值拿到了嘛爪膊,現(xiàn)在這個數(shù)組比較短权悟,而且如果你想拿更多得值,就要加更多得變量及賦值推盛,哪為了方便就有了 ES6 中得?解構(gòu)賦值僵芹。

使用解構(gòu)賦值拿到數(shù)組中得某個元素,接下來就是見證 簡潔得時刻

還是一樣得需求小槐,我想要上面數(shù)組中得 2 怎么獲取拇派, let [ , b, ,] = [ ...a]; console.log( b ); 結(jié)果拿到,也可以不使用擴展運算符凿跳,let [ , b , ,] = [1 , 2 ,3] 件豌;這就是數(shù)組解構(gòu),但是這里請注意一點控嗜,解構(gòu)有解構(gòu)得規(guī)則茧彤,你要遵循人家得規(guī)則才能讓你用,這個規(guī)則就是 數(shù)組得解構(gòu)必須位置相等疆栏。

解構(gòu)數(shù)組注意

上面介紹得是數(shù)組得解構(gòu)賦值曾掂,下面來看看對象得解構(gòu)賦值,對象也要按照人家定的規(guī)則來做壁顶,對象的規(guī)則就是對象解構(gòu)時名字必須相同珠洗,哪什么意思,一起來看看

首先有個對象? ?let obj = { name:"我是誰“若专,age: 24};? 你如果要獲取到姓名 不使用解構(gòu)賦值 是這樣的 obj.name 得到姓名许蓖,用了解構(gòu)賦值 是這樣得? let { name } = { ...obj } ; 獲取到了 姓名。規(guī)則體現(xiàn)看下圖

解構(gòu)對象注意

這里還有就是 如果屬性中出現(xiàn)了關(guān)鍵字怎么搞,如果正常獲取肯定會語法報錯,那么我們可以把獲取到得屬性名改一個別名膊爪,取代關(guān)鍵字:

解構(gòu)對象別名

前文說過自阱,解構(gòu)賦值就是 模式匹配,只要你位置找得對米酬,模式相同沛豌,就不會錯。

let?[a,?[b,?c]]?=?[1,?[2,?3]]; //這里是二維數(shù)組 赃额,兩邊得模式也匹配琼懊,哪你就會得到結(jié)果 console.log(a,?b,?c),不管是二維還是多維數(shù)組爬早,只要左右 模式匹配,就是你想要得結(jié)果

來一個簡單得數(shù)組解構(gòu)小應(yīng)用:

? ? function fn (){

? ? ? ? ? ? return [ 1 , 2 , 3 ]

????}

? ? let [ a , b , c ] = fn();

????clg(a,b,c);

在來一個關(guān)于JSON 數(shù)據(jù)得小應(yīng)用:

? ??var jsonData = {

? ????????id: 42,

? ????????status: "OK",

????? ????data: [867, 5309]

? ? ? ?};

????let { id, status, data: number } = jsonData;

????console.log(id, status, number);// 42, "OK", [867, 5309]

以上就是對 解構(gòu)賦值 知識得講解和認(rèn)知启妹,?還有那句話:如有不對之處及不周之處請大佬們指出筛严,也希望對一些人有所幫助,咱們下次再會饶米!

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末桨啃,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子檬输,更是在濱河造成了極大的恐慌照瘾,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,378評論 6 516
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件丧慈,死亡現(xiàn)場離奇詭異析命,居然都是意外死亡,警方通過查閱死者的電腦和手機逃默,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,970評論 3 399
  • 文/潘曉璐 我一進店門鹃愤,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人完域,你說我怎么就攤上這事软吐。” “怎么了吟税?”我有些...
    開封第一講書人閱讀 168,983評論 0 362
  • 文/不壞的土叔 我叫張陵凹耙,是天一觀的道長。 經(jīng)常有香客問我肠仪,道長肖抱,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 59,938評論 1 299
  • 正文 為了忘掉前任异旧,我火速辦了婚禮虐沥,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己欲险,他們只是感情好镐依,可當(dāng)我...
    茶點故事閱讀 68,955評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著天试,像睡著了一般槐壳。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上喜每,一...
    開封第一講書人閱讀 52,549評論 1 312
  • 那天务唐,我揣著相機與錄音,去河邊找鬼带兜。 笑死枫笛,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的刚照。 我是一名探鬼主播刑巧,決...
    沈念sama閱讀 41,063評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼无畔!你這毒婦竟也來了啊楚?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,991評論 0 277
  • 序言:老撾萬榮一對情侶失蹤浑彰,失蹤者是張志新(化名)和其女友劉穎恭理,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體郭变,經(jīng)...
    沈念sama閱讀 46,522評論 1 319
  • 正文 獨居荒郊野嶺守林人離奇死亡颜价,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,604評論 3 342
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了诉濒。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片拍嵌。...
    茶點故事閱讀 40,742評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖循诉,靈堂內(nèi)的尸體忽然破棺而出横辆,到底是詐尸還是另有隱情,我是刑警寧澤茄猫,帶...
    沈念sama閱讀 36,413評論 5 351
  • 正文 年R本政府宣布狈蚤,位于F島的核電站,受9級特大地震影響划纽,放射性物質(zhì)發(fā)生泄漏脆侮。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 42,094評論 3 335
  • 文/蒙蒙 一勇劣、第九天 我趴在偏房一處隱蔽的房頂上張望靖避。 院中可真熱鬧潭枣,春花似錦、人聲如沸幻捏。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,572評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽篡九。三九已至谐岁,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間榛臼,已是汗流浹背伊佃。 一陣腳步聲響...
    開封第一講書人閱讀 33,671評論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留沛善,地道東北人航揉。 一個月前我還...
    沈念sama閱讀 49,159評論 3 378
  • 正文 我出身青樓,卻偏偏與公主長得像金刁,于是被迫代替她去往敵國和親帅涂。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,747評論 2 361

推薦閱讀更多精彩內(nèi)容

  • 解構(gòu)賦值 傳統(tǒng)的定義多個變量: Es6中為了簡單問題簡單化胀葱,出現(xiàn)了解構(gòu)賦值這一方法,比如上邊的變量可以這樣定義: ...
    嘿喵heyMeow閱讀 413評論 0 1
  • 1. const const用來聲明常量笙蒙,一旦聲明必須立即初始化抵屿,否則報錯.作用域與let相同,只在聲明所在的塊級...
    BubbleM閱讀 171評論 0 0
  • 作者原文:http://hawkzz.com/blog/blog/1516004962924 為什么要使用解構(gòu) 上...
    hawkzz閱讀 651評論 0 0
  • 1.數(shù)組的解構(gòu)賦值 2.對象的解構(gòu)賦值 3.字符串的解構(gòu)賦值 4.數(shù)值和布爾值的解構(gòu)賦值 5.函數(shù)參數(shù)的解構(gòu)賦值 ...
    卞卞村長L閱讀 917評論 0 0
  • 一捅位、基本用法 ES6 允許按照一定模式轧葛,從數(shù)組和對象中提取值,對變量進行賦值艇搀,這被稱為解構(gòu)(Destructuri...
    浪里行舟閱讀 369評論 0 5