一俱恶、擴(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.of
比Array()
或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()
ES6
為Array
增加了copyWithin
函數(shù)岩瘦,用于操作當(dāng)前數(shù)組自身未巫,用來把某些個位置的元素復(fù)制并覆蓋到其他位置上去。
Array.prototype.copyWithin(target, start = 0, end = this.length)
解析:
三個參數(shù)启昧,從targget
處開始替換復(fù)制源(替換數(shù)量為end-start超出數(shù)組長度則不復(fù)制)叙凡,start
和end
可省略,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
個替換成arr1
第3
到6
項瞬矩。
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" ]