ES6數(shù)組新增

一俱恶、擴(kuò)展運算符

將一個數(shù)組轉(zhuǎn)為用逗號分隔的參數(shù)序列贸人。

示列代碼
const arr = [
  ...('9000' > '10000' ? ['a'] : []),
  'b',
];
console.log(arr) // ['a', 'b']

const arr1 = [1,2,3]
const arr2 = [4,5]
arr1.push(...arr2)
console.log(arr1) // [1, 2, 3, 4, 5]

二、 Array.from()

該方法可以將類數(shù)組對象可遍歷(iterable)的對象(包括 ES6 新增的數(shù)據(jù)結(jié)構(gòu) Set 和 Map)轉(zhuǎn)換為數(shù)組對象统倒,類數(shù)組即:可以通過索引訪問元素安皱,并且擁有 length 屬性爷贫;

示例代碼
const obj = {
  0: 'apple',
  1: 'banana',
  2: 'pear',
  length: 3
}
Array.from(obj) // ['apple', 'banner', 'pear']

Array.from('hello') // ['h', 'e', 'l', 'l', 'o']

let namesSet = new Set(['a', 'b'])
Array.from(namesSet) // ['a', 'b']

三认然、Array.of()

該方法主要彌補(bǔ)數(shù)組構(gòu)造函數(shù)Array()的不足。因為參數(shù)個數(shù)的不同漫萄,會導(dǎo)致Array()的行為有差異卷员。Array.ofArray()new Array()更好,他并且不存在由于參數(shù)不同而導(dǎo)致的重載腾务。它的行為非常統(tǒng)一毕骡。

Array(3) // [, , ,]
Array(1,2) // [1,2]
Array.of() // []
Array.of(1) // [1]
Array.of(1, 2) // [1, 2]
模擬實現(xiàn)
function ArrayOf(){
  return [].slice.call(arguments);
}

四、 數(shù)組實例的 copyWithin()

ES6Array增加了copyWithin函數(shù)岩瘦,用于操作當(dāng)前數(shù)組自身未巫,用來把某些個位置的元素復(fù)制并覆蓋到其他位置上去。

Array.prototype.copyWithin(target, start = 0, end = this.length)
解析:

三個參數(shù)启昧,從targget處開始替換復(fù)制源(替換數(shù)量為end-start超出數(shù)組長度則不復(fù)制)叙凡,startend可省略,start省略即從0開始密末,若不省略從start處開始握爷,若start為負(fù)數(shù)即從數(shù)組末尾開始計數(shù),end省略即數(shù)組的長度严里。

target:目的起始位置新啼。
start:復(fù)制源的起始位置,可以省略刹碾,可以是負(fù)數(shù)燥撞。
end:復(fù)制源的結(jié)束位置,可以省略迷帜,可以是負(fù)數(shù)叨吮,實際結(jié)束位置是end-1。

示例代碼:

arr1的第一項開始替換6-3個替換成arr136項瞬矩。

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
arr.copyWithin(1, 3, 6) // [1, 4, 5, 6, 5, 6, 7, 8, 9, 10, 11]

五茶鉴、數(shù)組實例find和findIndex

find方法
二個參數(shù),回調(diào)函數(shù)callback有三個參數(shù)currentValue,index,array景用。它的參數(shù)是一個回調(diào)函數(shù)涵叮,所有數(shù)組成員依次執(zhí)行該回調(diào)函數(shù)惭蹂,直到找出第一個返回值為true的成員,然后返回該成員(循環(huán)終止)割粮。如果沒有符合條件的成員盾碗,則返回undefined。find方法第二個參數(shù)thisArg舀瓢,可選用于綁定this

示例代碼:
let num = 0;
[1, 5, 10, 15].find(curr => {
  num++;
  return curr > 9;
}) // 10
console.log(num) // 3

findIndex方法
和find方法用法一樣廷雅,不同之處在于,find是返回第一個返回值為true的成員京髓,而findIndex是返回第一個返回值為true的成員的索引航缀。如果所有成員都不符合條件,則返回-1堰怨。

let num = 0;
[1, 5, 10, 15].findIndex(curr => {
  num++;
  return curr > 9;
}) // 2
console.log(num) // 3

六芥玉、數(shù)組實例的fill

fill() 方法用一個固定值填充一個數(shù)組中從起始索引到終止索引內(nèi)的全部元素。不包括終止索引备图。
arr.fill(value[, start[, end]])

三個參數(shù):

value:為填充值
start:起始索引灿巧,默認(rèn)值為0。
end:終止索引揽涮,默認(rèn)值為 this.length抠藕。

示例代碼:
['a', 'b', 'c'].fill(7,0,1) // [7, 'b', 'c']

new Array(3).fill(7) // [7, 7, 7]

七、數(shù)組實例的entries()蒋困,keys()和values()

ES6 提供三個新的方法——entries()幢痘,keys()values()——用于遍歷數(shù)組。它們都返回一個遍歷器對象家破,可以用for...of循環(huán)進(jìn)行遍歷颜说,唯一的區(qū)別是keys()是對鍵名的遍歷、values()是對鍵值的遍歷汰聋,entries()是對鍵值對的遍歷门粪。

for (let index of ['a', 'b'].keys()) {
  console.log(index);
}
// 0
// 1

for (let elem of ['a', 'b'].values()) {
  console.log(elem);
}
// 'a'
// 'b'

for (let [index, elem] of ['a', 'b'].entries()) {
  console.log(index, elem);
}
// 0 "a"
// 1 "b"

八、數(shù)組實例的includes()

用于檢測數(shù)組中是否包含某個元素

[1, 2, 3].includes(2)     // true
[1, 2, 3].includes(4)     // false

九烹困、數(shù)組實例的 flat()玄妈,flatMap()

Array.prototype.flat()

該方法會按照一個可指定的深度遞歸遍歷數(shù)組,并將所有元素與遍歷到的子數(shù)組中的元素合并為一個新數(shù)組返回髓梅。
Array.flat(depth)拟蜻,depth可選 指定要提取嵌套數(shù)組的結(jié)構(gòu)深度,默認(rèn)值為 1枯饿,若depth值為Infinity即不管有多少層嵌套酝锅,都要轉(zhuǎn)成一維數(shù)組。(注意:flat() 方法會移除數(shù)組中的空項)

示例代碼:
[1, 2, [3, [4, 5]]].flat() // [1, 2, 3, [4, 5]]
[1, 2, [3, [4, 5]]].flat(2) // [1, 2, 3, 4, 5]
[1, [2, [3]]].flat(Infinity) // [1, 2, 3]
[1, 2, , 4, 5].flat() // [1, 2, 4, 5]
Array.prototype.flatMap()

該方法首先使用映射函數(shù)映射每個元素奢方,然后將結(jié)果壓縮成一個新數(shù)組搔扁。它與 map 和 深度值1的 flat 幾乎相同爸舒,但 flatMap 通常在合并成一種方法的效率稍微高一些。它返回 一個新的數(shù)組稿蹲,其中每個元素都是回調(diào)函數(shù)的結(jié)果扭勉,并且結(jié)構(gòu)深度 depth 值為1。
2個參數(shù):callback(currentValue, index, array)和thisArg

示例代碼:
var arr1 = [1, 2, 3, 4];

arr1.map(x => [x * 2]); 
// [[2], [4], [6], [8]]

arr1.flatMap(x => [x * 2]);
// [2, 4, 6, 8]

// 只會將 flatMap 中的函數(shù)返回的數(shù)組 “壓平” 一層
arr1.flatMap(x => [[x * 2]]);
// [[2], [4], [6], [8]]

十苛聘、數(shù)組的空位

ES5數(shù)組處理遇到空位會忽略涂炎,而ES6遇到空位會轉(zhuǎn)換為undefined

示例代碼:
ES5:['a',,'b'].filter(x => true) // ['a','b']

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