通俗易懂TypeScript系列二:聲明和解構(gòu)(下)

法國巴農(nóng)儒陨,薰衣草田【摘自微軟Bing】

解構(gòu):所謂解構(gòu)就是將聲明的一組變量于相同的解構(gòu)的數(shù)組或?qū)ο蟮脑財(cái)?shù)值 一一對(duì)應(yīng)

1、數(shù)組解構(gòu)

我們看看下面代碼蓖乘,一起來了解數(shù)組解構(gòu)

傳統(tǒng)寫法:

let? numbers= [1,2,3];

let a = numbers [0];

let b = numbers [1];

let c = numbers [2];

console.log(a,b,c);//輸出1,2,3

解構(gòu)寫法:

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

console.log(a,b,c);//輸出1,2,3;

是不是簡(jiǎn)潔很多溶耘,這就是數(shù)組解構(gòu)最基本的寫法

A、當(dāng)聲明的參數(shù)多于賦值的參數(shù)時(shí)

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

console.log(a, b, c, d); // 1, 2, 3, undefined

B湖蜕、當(dāng)聲明的參數(shù)少于賦值的參數(shù)時(shí)

let [a, ,b] = [1,2,3];

console.log(a, b); ?// 1, 3

C教硫、在數(shù)組解構(gòu)賦初始值

let ?[a, b, c = 4, d = 'hello'] = [1, 2, 3];

console.log(a, b, c, d); ? // 1, 2, 3, "Hello"

2叨吮、對(duì)象解構(gòu)

解構(gòu)不僅可以用于數(shù)組,還可以用于對(duì)象

let {name,age} = {name:"小文",age:"20歲"};

console.log(name,age);

注意:對(duì)象解構(gòu)和數(shù)組解構(gòu)不同的是,對(duì)象解構(gòu)的聲明變量部分必須和賦值的屬性名一一對(duì)應(yīng)才能取到對(duì)應(yīng)的值瞬矩,數(shù)組解構(gòu)可以通過索引下標(biāo)取值

我們來看看對(duì)象解構(gòu)的原理茶鉴?

其實(shí)對(duì)象的解構(gòu)賦值的內(nèi)部機(jī)制,是先找到對(duì)象同名屬性景用,然后在賦對(duì)應(yīng)的值涵叮,真正被賦值的是后者惭蹂,而不是前者

一起看看代碼:

let {a:b} = {a:"aaa", b:'bbb' };

console.log(a); // a is not defined

console.log(b); // aaa

a是匹配的模式,b才是變量割粮,真正被賦值的是b (b <=”bbb”)盾碗,復(fù)制到控制臺(tái)打印試試

3、函數(shù)傳參的解構(gòu)

function add([x, y]){

return x + y;

}

add([1, 2]); // 3

4舀瓢、rest運(yùn)算符和擴(kuò)展運(yùn)算符

應(yīng)用場(chǎng)景:主要用于不定參數(shù)廷雅,所以ES6開始可以不再使用arguments對(duì)象

(1)、rest運(yùn)算符

rest 參數(shù)叫做不定(剩余)參數(shù), 用三個(gè)點(diǎn)+加數(shù)組值表示(…arr),把逗號(hào)隔開的值轉(zhuǎn)換成數(shù)組

function hello(...arr){

console.log(arr);

}

hello(1,2,3,4,5,);//輸出 [1, 2, 3, 4, 5]


注意:rest運(yùn)算符只能用在最后一個(gè)參數(shù)

看看代碼:

a.放rest運(yùn)算符放后面


b.放rest運(yùn)算符放前面


(2)京髓、擴(kuò)展運(yùn)算符

也是用三個(gè)點(diǎn)+加數(shù)組值表示航缀,是把數(shù)組或類數(shù)組對(duì)象轉(zhuǎn)換程一系列用逗號(hào)隔開的值,跟rest相反

let arr = [1,2,3,4,5];

console.log(...arr); //輸出1 2 3 4 5


5堰怨、rest運(yùn)算符配合解構(gòu)使用

let [a, ...rest] = [1, 2, 3, 4];

console.log(a);//1

console.log(rest);//[2, 3, 4];

以上就是解構(gòu)的相關(guān)內(nèi)容

個(gè)人學(xué)習(xí)心得芥玉,大神路過 ,不喜勿噴?? ?备图,如果你覺得不錯(cuò)灿巧,歡迎點(diǎn)贊,訂閱诬烹,分享出去給需要的人砸烦,筆者將非常感謝

<完>

如果你是喜歡看書的朋友弃鸦,不妨點(diǎn)擊【有驚喜】這是我在亞馬遜買的電子書绞吁,都非常珍貴。希望你能喜歡

作者:小處成就大事

簡(jiǎn)介:一個(gè)喜歡分享和學(xué)習(xí)的前端開發(fā)程序猿唬格,平時(shí)喜歡看看書家破,游泳,爬山购岗,戶外騎行等汰聋,期待與志同道合的你成為朋友,一起交流喊积、一起進(jìn)步烹困。

初衷:閑時(shí)喜歡寫一些文章分享,記錄豐富自己乾吻∷杳罚可能沒有別人寫得好,但是我寫的每一篇都非常用心和投入绎签。真心希望來到這里對(duì)你有所收獲枯饿,我將非常開心很欣慰。

博客小處成就大事_新浪博客

如果有志同道合的朋友不妨加微信一起交流和學(xué)習(xí)诡必,期待你的到來

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末奢方,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌蟋字,老刑警劉巖稿蹲,帶你破解...
    沈念sama閱讀 217,084評(píng)論 6 503
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異愉老,居然都是意外死亡场绿,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,623評(píng)論 3 392
  • 文/潘曉璐 我一進(jìn)店門嫉入,熙熙樓的掌柜王于貴愁眉苦臉地迎上來焰盗,“玉大人,你說我怎么就攤上這事咒林“揪埽” “怎么了?”我有些...
    開封第一講書人閱讀 163,450評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵垫竞,是天一觀的道長澎粟。 經(jīng)常有香客問我,道長欢瞪,這世上最難降的妖魔是什么活烙? 我笑而不...
    開封第一講書人閱讀 58,322評(píng)論 1 293
  • 正文 為了忘掉前任,我火速辦了婚禮遣鼓,結(jié)果婚禮上啸盏,老公的妹妹穿的比我還像新娘。我一直安慰自己骑祟,他們只是感情好回懦,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,370評(píng)論 6 390
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著次企,像睡著了一般怯晕。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上缸棵,一...
    開封第一講書人閱讀 51,274評(píng)論 1 300
  • 那天舟茶,我揣著相機(jī)與錄音,去河邊找鬼堵第。 笑死吧凉,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的型诚。 我是一名探鬼主播客燕,決...
    沈念sama閱讀 40,126評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼狰贯!你這毒婦竟也來了也搓?” 一聲冷哼從身側(cè)響起赏廓,我...
    開封第一講書人閱讀 38,980評(píng)論 0 275
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎傍妒,沒想到半個(gè)月后幔摸,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,414評(píng)論 1 313
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡颤练,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,599評(píng)論 3 334
  • 正文 我和宋清朗相戀三年既忆,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片嗦玖。...
    茶點(diǎn)故事閱讀 39,773評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡患雇,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出宇挫,到底是詐尸還是另有隱情苛吱,我是刑警寧澤,帶...
    沈念sama閱讀 35,470評(píng)論 5 344
  • 正文 年R本政府宣布器瘪,位于F島的核電站翠储,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏橡疼。R本人自食惡果不足惜援所,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,080評(píng)論 3 327
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望欣除。 院中可真熱鬧住拭,春花似錦、人聲如沸耻涛。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,713評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽抹缕。三九已至,卻和暖如春墨辛,著一層夾襖步出監(jiān)牢的瞬間卓研,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,852評(píng)論 1 269
  • 我被黑心中介騙來泰國打工睹簇, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留奏赘,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 47,865評(píng)論 2 370
  • 正文 我出身青樓太惠,卻偏偏與公主長得像磨淌,于是被迫代替她去往敵國和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子凿渊,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,689評(píng)論 2 354

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

  • 基本用法 ES6 允許按照一定模式梁只,從數(shù)組和對(duì)象中提取值缚柳,對(duì)變量進(jìn)行賦值趾代,這被稱為解構(gòu)(Destructuring...
    嘉奇呦_nice閱讀 789評(píng)論 0 2
  • JavaScript之父:Brendan Eich 轨功。 -基本語法:借鑒了C語言和Java語言。-數(shù)據(jù)結(jié)構(gòu):借鑒了...
    饑人谷_kule閱讀 590評(píng)論 0 0
  • 《ECMAScript6 入門》阮一峰 讀書筆記 let和constlet聲明的變量僅在塊級(jí)作用域內(nèi)有效医咨,var聲...
    親愛的孟良閱讀 720評(píng)論 1 2
  • 1.數(shù)組的解構(gòu)賦值 2.對(duì)象的解構(gòu)賦值 3.字符串的解構(gòu)賦值 4.數(shù)值和布爾值的解構(gòu)賦值 5.函數(shù)參數(shù)的解構(gòu)賦值 ...
    卞卞村長L閱讀 917評(píng)論 0 0
  • 今天順利的擠上了19路公交車构舟,看著穿著鮮亮的人們灰追,突然想到了小時(shí)候。記得小時(shí)候很少洗澡狗超,夏天還好弹澎,接滿一盆涼水,從...
    笨石頭閱讀 136評(píng)論 0 0