一、扩展运算符
将一个数组转为用逗号分隔的参数序列。
示列代码
代码语言:javascript复制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()
该方法可以将类数组对象或可遍历(iterable)的对象(包括 ES6 新增的数据结构 Set 和 Map)转换为数组对象,类数组即:可以通过索引访问元素,并且拥有 length 属性;
示例代码
代码语言:javascript复制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()
该方法主要弥补数组构造函数Array()
的不足。因为参数个数的不同,会导致Array()
的行为有差异。Array.of
比Array()
或new Array()
更好,他并且不存在由于参数不同而导致的重载。它的行为非常统一。
Array(3) // [, , ,]
Array(1,2) // [1,2]
Array.of() // []
Array.of(1) // [1]
Array.of(1, 2) // [1, 2]
模拟实现
代码语言:javascript复制function ArrayOf(){
return [].slice.call(arguments);
}
四、 数组实例的 copyWithin()
ES6
为Array
增加了copyWithin
函数,用于操作当前数组自身,用来把某些个位置的元素复制并覆盖到其他位置上去。
Array.prototype.copyWithin(target, start = 0, end = this.length)
解析:
三个参数,从targget
处开始替换复制源(替换数量为end-start超出数组长度则不复制),start
和end
可省略,start省略即从0
开始,若不省略从start
处开始,若start
为负数即从数组末尾开始计数,end省略即数组的长度。
target:目的起始位置。 start:复制源的起始位置,可以省略,可以是负数。 end:复制源的结束位置,可以省略,可以是负数,实际结束位置是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]
五、数组实例find和findIndex
find方法
二个参数,回调函数callback
有三个参数currentValue
,index
,array
。它的参数是一个回调函数,所有数组成员依次执行该回调函数,直到找出第一个返回值为true
的成员,然后返回该成员(循环终止)。如果没有符合条件的成员,则返回undefined
。find方法第二个参数thisArg,可选用于绑定this
示例代码:
代码语言:javascript复制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
六、数组实例的fill
fill() 方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。
arr.fill(value[, start[, end]])
三个参数:
value:为填充值 start:起始索引,默认值为0。 end:终止索引,默认值为 this.length。
示例代码:
代码语言:javascript复制['a', 'b', 'c'].fill(7,0,1) // [7, 'b', 'c']
new Array(3).fill(7) // [7, 7, 7]
七、数组实例的entries(),keys()和values()
ES6 提供三个新的方法——entries()
,keys()
和values()
——用于遍历数组。它们都返回一个遍历器对象,可以用for...of
循环进行遍历,唯一的区别是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"
八、数组实例的includes()
用于检测数组中是否包含某个元素
代码语言:javascript复制[1, 2, 3].includes(2) // true
[1, 2, 3].includes(4) // false
九、数组实例的 flat(),flatMap()
Array.prototype.flat()
该方法会按照一个可指定的深度递归遍历数组,并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。
Array.flat(depth)
,depth
可选 指定要提取嵌套数组的结构深度,默认值为 1
,若depth
值为Infinity
即不管有多少层嵌套,都要转成一维数组。(注意:flat() 方法会移除数组中的空项)
示例代码:
代码语言:javascript复制[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()
该方法首先使用映射函数映射每个元素,然后将结果压缩成一个新数组。它与 map
和 深度值1的 flat
几乎相同,但 flatMap
通常在合并成一种方法的效率稍微高一些。它返回 一个新的数组,其中每个元素都是回调函数的结果,并且结构深度 depth 值为1。
2个参数:callback(currentValue
, index
, array
)和thisArg
示例代码:
代码语言:javascript复制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 中的函数返回的数组 “压平” 一层
arr1.flatMap(x => [[x * 2]]);
// [[2], [4], [6], [8]]
十、数组的空位
ES5
数组处理遇到空位会忽略,而ES6
遇到空位会转换为undefined
。
示例代码:
代码语言:javascript复制ES5:['a',,'b'].filter(x => true) // ['a','b']
ES6:Array.from(['a',,'b']) // [ "a", undefined, "b" ]