JS基礎之ES6 數(shù)組的改進

數(shù)組是一種基礎的JavaScript對象。ES6標準繼續(xù)改進數(shù)組,添加了很多功能眷蜓。

一故俐、 創(chuàng)建數(shù)組

在es6以前想鹰,創(chuàng)建數(shù)組的方式主要有兩種。
第一種是調用Array構造函數(shù)药版,另一種是用數(shù)組字面量語法辑舷。這兩種方法均需要列舉數(shù)組中的元素。
為了進一步簡化JavaScript組的創(chuàng)建過程槽片,es6增加了Array.of()和Array.from()兩個方法何缓。

1肢础、Array.of()方法

用這個方法創(chuàng)建數(shù)組,只需要傳入你希望在數(shù)組中包含的值碌廓。返回參數(shù)值組成的數(shù)組

Array.of(1, 2) // [1, 2]
2传轰、Array.from()方法。

由于js不支持直接將非數(shù)組對象轉化為真實數(shù)組谷婆。Arguments就是一種類數(shù)組對象慨蛙。如果要把它當做數(shù)組使用,則必須先轉換該對象的類型纪挎。
數(shù)組的原生slice()方法可以將非數(shù)組對象轉換為數(shù)組

function makeArray(arrayLike){
  return Array. prototype.slice.call(arrayLike)
}
var arr = makeArray(arguments)

Array.from()方法可以接受可迭代對象或類數(shù)組對象作為第一個參數(shù)期贫,最終返回一個數(shù)組;第二個參數(shù)异袄,作用類似于數(shù)組的map方法通砍,用來對每個元素進行處理,將處理后的值放入返回的數(shù)組烤蜕。封孙。

Array.from(arrayLike, x => x * x);
// 等同于
Array.from(arrayLike).map(x => x * x);
Array.from([1, 2, 3], (x) => x * x)
// [1, 4, 9]
3、與以前創(chuàng)建數(shù)組的方法比較
//參數(shù)只有一個時
Array.of(3) // [3]
Array(3) // [, , ,]
//參數(shù)多余1個時
Array.of(1,2,3) // [1,2,3]
Array(1,2,3) // [1,2,3]

只有當參數(shù)個數(shù)不少于 2 個時玖绿,Array()才會返回由參數(shù)組成的新數(shù)組敛瓷。參數(shù)個數(shù)只有一個時,實際上是指定數(shù)組的長度斑匪。
Array.of方法用于將一組值呐籽,轉換為數(shù)組。

二蚀瘸、所有數(shù)組添加的新方法:

1狡蝶、find()和findIndex() 用于數(shù)組中查找特定的值

接受兩個參數(shù):回調函數(shù)(回調函數(shù)的參數(shù)為item,index贮勃,array)贪惹;可選參數(shù)(用于指定回調函數(shù)中的this的值)

區(qū)別:

  • find()返回查找到的值
  • findIndex()返回查找到值的索引

使用場景:

  • 根據(jù)某個條件查找匹配的元素,用find()和findIndex()
  • 指向查找某個值匹配的元素寂嘉,indexOf()和lastIndexOf()
2奏瞬、fill()方法

fill()方法用指定的值填充一直多個數(shù)組元素。當傳入一個值時泉孩,fill()方法會用這個值重寫數(shù)組中的所有值硼端。第二個和第三個參數(shù),用于指定填充的起始位置和結束位置

['a', 'b', 'c'].fill(7)
// [7, 7, 7]
['a', 'b', 'c'].fill(7, 1, 2)
// ['a', 7, 'c']
3寓搬、copyWithin()

copyWithin()與fill()方法類似珍昨,同時改變數(shù)組中多個元素。
區(qū)別:fill()方法是將數(shù)組元素賦值為一個指定的值,而copyWithin()方法是從數(shù)組中復制元素的值镣典。
使用這個方法兔毙,會修改當前數(shù)組。
它接受三個參數(shù)兄春。
target(必需):從該位置開始替換數(shù)據(jù)澎剥。如果為負值,表示倒數(shù)赶舆。
start(可選):從該位置開始讀取數(shù)據(jù)肴裙,默認為 0。如果為負值涌乳,表示從末尾開始計算。
end(可選):到該位置前停止讀取數(shù)據(jù)甜癞,默認等于數(shù)組長度夕晓。如果為負值,表示從末尾開始計算悠咱。

// -2相當于3號位蒸辆,-1相當于4號位
[1, 2, 3, 4, 5].copyWithin(0, -2, -1)
// [4, 2, 3, 4, 5]

copyWithin()與fill()方法的用途在定型數(shù)組中常用

三、定型數(shù)組

定型數(shù)組

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末析既,一起剝皮案震驚了整個濱河市躬贡,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌眼坏,老刑警劉巖拂玻,帶你破解...
    沈念sama閱讀 216,372評論 6 498
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異宰译,居然都是意外死亡檐蚜,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,368評論 3 392
  • 文/潘曉璐 我一進店門沿侈,熙熙樓的掌柜王于貴愁眉苦臉地迎上來闯第,“玉大人,你說我怎么就攤上這事缀拭】榷蹋” “怎么了?”我有些...
    開封第一講書人閱讀 162,415評論 0 353
  • 文/不壞的土叔 我叫張陵蛛淋,是天一觀的道長咙好。 經(jīng)常有香客問我,道長铣鹏,這世上最難降的妖魔是什么敷扫? 我笑而不...
    開封第一講書人閱讀 58,157評論 1 292
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上葵第,老公的妹妹穿的比我還像新娘绘迁。我一直安慰自己,他們只是感情好卒密,可當我...
    茶點故事閱讀 67,171評論 6 388
  • 文/花漫 我一把揭開白布缀台。 她就那樣靜靜地躺著,像睡著了一般哮奇。 火紅的嫁衣襯著肌膚如雪膛腐。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,125評論 1 297
  • 那天鼎俘,我揣著相機與錄音哲身,去河邊找鬼。 笑死贸伐,一個胖子當著我的面吹牛勘天,可吹牛的內容都是我干的。 我是一名探鬼主播捉邢,決...
    沈念sama閱讀 40,028評論 3 417
  • 文/蒼蘭香墨 我猛地睜開眼脯丝,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了伏伐?” 一聲冷哼從身側響起宠进,我...
    開封第一講書人閱讀 38,887評論 0 274
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎藐翎,沒想到半個月后材蹬,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,310評論 1 310
  • 正文 獨居荒郊野嶺守林人離奇死亡吝镣,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 37,533評論 2 332
  • 正文 我和宋清朗相戀三年赚导,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片赤惊。...
    茶點故事閱讀 39,690評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡吼旧,死狀恐怖,靈堂內的尸體忽然破棺而出未舟,到底是詐尸還是另有隱情圈暗,我是刑警寧澤,帶...
    沈念sama閱讀 35,411評論 5 343
  • 正文 年R本政府宣布裕膀,位于F島的核電站员串,受9級特大地震影響,放射性物質發(fā)生泄漏昼扛。R本人自食惡果不足惜寸齐,卻給世界環(huán)境...
    茶點故事閱讀 41,004評論 3 325
  • 文/蒙蒙 一欲诺、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧渺鹦,春花似錦扰法、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,659評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至吸耿,卻和暖如春祠锣,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背咽安。 一陣腳步聲響...
    開封第一講書人閱讀 32,812評論 1 268
  • 我被黑心中介騙來泰國打工伴网, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人妆棒。 一個月前我還...
    沈念sama閱讀 47,693評論 2 368
  • 正文 我出身青樓是偷,卻偏偏與公主長得像,于是被迫代替她去往敵國和親募逞。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 44,577評論 2 353