第6節(jié):ES6中新增的數(shù)組知識

JSON數(shù)組格式轉(zhuǎn)換

JSON的數(shù)組格式就是為了前端快速的把JSON轉(zhuǎn)換成數(shù)組的一種格式,我們先來看一下JSON的數(shù)組格式怎么寫

let  json = {
    '0': 'music',
    '1': 'I love music',
    '2': '我就喜歡聽音樂',
    length:3
}

這就是一個標(biāo)準(zhǔn)的JSON數(shù)組格式酪穿,跟普通的JSON對比是在最后多了一個length屬性凳干。只要是這種特殊的json格式都可以輕松使用ES6的語法轉(zhuǎn)變成數(shù)組。在ES6中絕大部分的Array操作都存在于Array對象里被济。我們就用Array.from(xxx)來進(jìn)行轉(zhuǎn)換纺座。我們把上邊的JSON代碼轉(zhuǎn)換成數(shù)組,并打印在控制臺溉潭。

let  json = {
    '0': 'music',
    '1': 'I love music',
    '2': '我就喜歡聽音樂',
    length:3
}
 
let arr=Array.from(json);
console.log(arr)

實際開發(fā)中這種方法還是比較常用的,畢竟節(jié)省了我們代碼行數(shù)少欺,也讓我們的程序更清晰喳瓣。

Array.of()方法:

它負(fù)責(zé)把一堆文本或者變量轉(zhuǎn)換成數(shù)組。在開發(fā)中我們經(jīng)常拿到了一個類似數(shù)組的字符串赞别,需要使用eval來進(jìn)行轉(zhuǎn)換畏陕,如果你一個老手程序員都知道eval的效率是很低的,它會拖慢我們的程序仿滔。這時候我們就可以使用Array.of方法惠毁。我們看下邊的代碼把一堆數(shù)字轉(zhuǎn)換成數(shù)組并打印在控制臺上:

let arr =Array.of(3,4,5,6);
console.log(arr);

當(dāng)然它不僅可以轉(zhuǎn)換數(shù)字,字符串也是可以轉(zhuǎn)換的崎页,看下邊的代碼:

let arr =Array.of('I love music','music','我就喜歡聽音樂');
console.log(arr);

find( )實例方法:

所謂的實例方法就是并不是以Array對象開始的鞠绰,而是必須有一個已經(jīng)存在的數(shù)組,然后使用的方法飒焦,這就是實例方法(不理解請看下邊的代碼蜈膨,再和上邊的代碼進(jìn)行比對屿笼,你會有所頓悟)。這里的find方法是從數(shù)組中查找翁巍。在find方法中我們需要傳入一個匿名函數(shù)驴一,函數(shù)需要傳入三個參數(shù):

  • value:表示當(dāng)前查找的值。
  • index:表示當(dāng)前查找的數(shù)組索引灶壶。
  • arr:表示當(dāng)前數(shù)組肝断。

在函數(shù)中如果找到符合條件的數(shù)組元素就進(jìn)行return,并停止查找驰凛。你可以拷貝下邊的代碼進(jìn)行測試胸懈,就會知道find作用。

let arr=[1,2,3,4,5,6,7,8,9];
console.log(arr.find(function(value,index,arr){
    return value > 5;
}))

控制臺輸出了6洒嗤,說明找到了符合條件的值箫荡,并進(jìn)行返回了,如果找不到會顯示undefined渔隶。

fill( )實例方法:

fill()也是一個實例方法羔挡,它的作用是把數(shù)組進(jìn)行填充,它接收三個參數(shù)间唉,第一個參數(shù)是填充的變量绞灼,第二個是開始填充的位置,第三個是填充到的位置呈野。

let arr=[0,1,2,3,4,5,6,7,8,9];
arr.fill('music',2,5);
console.log(arr);

上邊的代碼是把數(shù)組從第二位到第五位用jspang進(jìn)行填充低矮。

數(shù)組的遍歷

for…of循環(huán):

這種形式比ES5的for循環(huán)要簡單而且高效。先來看一個最簡單的for…of循環(huán)

let arr=['music','I love music','我就喜歡聽音樂']
 
for (let item of arr){
    console.log(item);
}

for…of數(shù)組索引:有時候開發(fā)中是需要數(shù)組的索引的被冒,那我們可以使用下面的代碼輸出數(shù)組索引军掂。

let arr=['music','I love music','我就喜歡聽音樂']
for (let index of arr.keys()){
    console.log(index);
}

可以看到這時的控制臺就輸出了0,1,2,也就是數(shù)組的索引昨悼。

同時輸出數(shù)組的內(nèi)容和索引:

我們用entries()這個實例方法蝗锥,配合我們的for…of循環(huán)就可以同時輸出內(nèi)容和索引了。

let arr=['music','I love music','我就喜歡聽音樂']
for (let [index,val] of arr.entries()){
    console.log(index+':'+val);
}

entries( )實例方法:

entries()實例方式生成的是Iterator形式的數(shù)組率触,那這種形式的好處就是可以讓我們在需要時用next()手動跳轉(zhuǎn)到下一個值终议。我們來看下面的代碼:

let arr=['music','I love music','我就喜歡聽音樂']
let list=arr.entries();
console.log(list.next().value);
console.log(list.next().value);
console.log(list.next().value);
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市葱蝗,隨后出現(xiàn)的幾起案子穴张,更是在濱河造成了極大的恐慌,老刑警劉巖两曼,帶你破解...
    沈念sama閱讀 221,820評論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件皂甘,死亡現(xiàn)場離奇詭異,居然都是意外死亡悼凑,警方通過查閱死者的電腦和手機叮贩,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,648評論 3 399
  • 文/潘曉璐 我一進(jìn)店門击狮,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人益老,你說我怎么就攤上這事彪蓬。” “怎么了捺萌?”我有些...
    開封第一講書人閱讀 168,324評論 0 360
  • 文/不壞的土叔 我叫張陵档冬,是天一觀的道長。 經(jīng)常有香客問我桃纯,道長酷誓,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 59,714評論 1 297
  • 正文 為了忘掉前任态坦,我火速辦了婚禮盐数,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘伞梯。我一直安慰自己玫氢,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 68,724評論 6 397
  • 文/花漫 我一把揭開白布谜诫。 她就那樣靜靜地躺著漾峡,像睡著了一般。 火紅的嫁衣襯著肌膚如雪喻旷。 梳的紋絲不亂的頭發(fā)上生逸,一...
    開封第一講書人閱讀 52,328評論 1 310
  • 那天,我揣著相機與錄音且预,去河邊找鬼槽袄。 笑死,一個胖子當(dāng)著我的面吹牛锋谐,可吹牛的內(nèi)容都是我干的掰伸。 我是一名探鬼主播,決...
    沈念sama閱讀 40,897評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼怀估,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了合搅?” 一聲冷哼從身側(cè)響起多搀,我...
    開封第一講書人閱讀 39,804評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎灾部,沒想到半個月后康铭,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,345評論 1 318
  • 正文 獨居荒郊野嶺守林人離奇死亡赌髓,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,431評論 3 340
  • 正文 我和宋清朗相戀三年从藤,在試婚紗的時候發(fā)現(xiàn)自己被綠了催跪。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,561評論 1 352
  • 序言:一個原本活蹦亂跳的男人離奇死亡夷野,死狀恐怖懊蒸,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情悯搔,我是刑警寧澤骑丸,帶...
    沈念sama閱讀 36,238評論 5 350
  • 正文 年R本政府宣布,位于F島的核電站妒貌,受9級特大地震影響通危,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜灌曙,卻給世界環(huán)境...
    茶點故事閱讀 41,928評論 3 334
  • 文/蒙蒙 一菊碟、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧在刺,春花似錦逆害、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,417評論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至隙姿,卻和暖如春梅垄,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背输玷。 一陣腳步聲響...
    開封第一講書人閱讀 33,528評論 1 272
  • 我被黑心中介騙來泰國打工队丝, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人欲鹏。 一個月前我還...
    沈念sama閱讀 48,983評論 3 376
  • 正文 我出身青樓机久,卻偏偏與公主長得像,于是被迫代替她去往敵國和親赔嚎。 傳聞我的和親對象是個殘疾皇子膘盖,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,573評論 2 359

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

  • Swift1> Swift和OC的區(qū)別1.1> Swift沒有地址/指針的概念1.2> 泛型1.3> 類型嚴(yán)謹(jǐn) 對...
    cosWriter閱讀 11,111評論 1 32
  • 1、新的聲明方式 以前我們在聲明時只有一種方法尤误,就是使用var來進(jìn)行聲明侠畔,ES6對聲明的進(jìn)行了擴展,現(xiàn)在可以有三種...
    令武閱讀 1,011評論 0 7
  • 原創(chuàng)文章&經(jīng)驗總結(jié)&從校招到A廠一路陽光一路滄桑 詳情請戳www.codercc.com 主要知識點:創(chuàng)建數(shù)組损晤、數(shù)...
    你聽___閱讀 1,042評論 0 2
  • 這是16年5月份編輯的一份比較雜亂適合自己觀看的學(xué)習(xí)記錄文檔软棺,今天18年5月份再次想寫文章,發(fā)現(xiàn)簡書還為我保存起的...
    Jenaral閱讀 2,768評論 2 9
  • 第5章 引用類型(返回首頁) 本章內(nèi)容 使用對象 創(chuàng)建并操作數(shù)組 理解基本的JavaScript類型 使用基本類型...
    大學(xué)一百閱讀 3,238評論 0 4