h7ml
前端物语
前端物语
积微成著

JavaScript ES6 Array 数组新增方法

Array.of()

将参数中所有值作为元素形成数组。

没有参数则返回空数组

1Array.of(1, '2', true) // [1, '2', true]

Array.from()

将类数组对象或可迭代对象转化为数组。

1Array.from([1, 2]) // [1, 2]
2Array.from([1, , 3]) // [1, undefined, 3]

转换类数组

1const arr = Array.from({
2  0: '1',
3  1: '2',
4  2: 3,
5  length: 3, // 必须有length属性，没有则返回空数组
6})
7// ['1', '2', 3]
8
9// 属性名无法转换为数值，返回长度为 length 元素值为 undefined 的数组
10const array1 = Array.from({
11  a: 1, // 下标 a,b 不能转换为 0 1
12  b: 2,
13  length: 2,
14}) // [undefined, undefined]

转换 map

1const map = new Map()
2map.set('key0', 'value0')
3map.set('key1', 'value1')
4Array.from(map) // [['key0', 'value0'],['key1','value1']]

转换 set

1const set = new Set([1, 2, 3])
2Array.from(set) // [1, 2, 3]

转换字符串

1Array.from('abc') // ["a", "b", "c"]

方法

find()查找

则返回符合条件的第一个元素。

1const arr = Array.of(1, 2, 3, 4)
2arr.find(item => item > 2) // 3

findIndex() 查找索引

则返回符合条件的第一个元素的索引。

1const arr = Array.of(1, 2, 1, 3)
2// 参数1：回调函数
3// 参数2(可选)：指定回调函数中的 this 值
4arr.findIndex(item => (item = 1)) // 0

fill()填充

1const arr = Array.of(1, 2, 3, 4)
2// 参数1：用来填充的值
3// 参数2：被填充的起始索引
4// 参数3(可选)：被填充的结束索引，默认为数组末尾
5console.log(arr.fill('填充', 1, 2)) // [1, '填充', 3, 4]

copyWithin() 覆盖

  1. 开始覆盖的位置索引
  2. 复制起始位置
  3. （可选）复制结束位置，默认为结尾
1const arr = ['a', 'b', 'c', 'd', 'e', 'f', 'g']
2arr.copyWithin(2, 4, 6) // ["a", "b", "e", "f", "g", "f", "g"]

entries() 遍历

1// 遍历键值对。
2for (const [key, value] of ['a', 'b'].entries())
3  console.log(key, value)
4
5// 0 "a"
6// 1 "b"

不使用 for... of 循环

1const entries = ['a', 'b'].entries()
2console.log(entries.next().value) // [0, "a"]
3console.log(entries.next().value) // [1, "b"]

keys()遍历键名

1for (const key of ['a', 'b'].keys())
2  console.log(key)
3
4// 0
5// 1

values()遍历键值

1for (const value of ['a', 'b'].values())
2  console.log(value)
3
4// "a"
5// "b"

includes()查找

数组是否包含指定值

Set 的 has 方法用于查找值，Map 的 has 方法用于查找键名。

1// 参数1：包含的指定值
2[1, 2, 3].includes(1); // true
3// 参数2：可选，搜索的起始索引，默认为0
4[1, 2, 3].includes(1, 2) // false

flat()嵌套数组转一维数

1console.log([1, [2, 3]].flat()) // [1, 2, 3]
2
3// 指定转换的嵌套层数
4console.log([1, [2, [3, [4, 5]]]].flat(2)) // [1, 2, 3, [4, 5]]
5
6// 不管嵌套多少层
7console.log([1, [2, [3, [4, 5]]]].flat(Number.POSITIVE_INFINITY)) // [1, 2, 3, 4, 5]
8
9// 自动跳过空位
10console.log([1, [2, , 3]].flat()) // [1, 2, 3]

flatMap()

先遍历元素，再对数组执行 flat() 方法。

1// 参数1：遍历函数，遍历函数可接受3个参数：当前元素、当前元素索引、原数组
2// 参数2：指定遍历函数中 this 的指向
3console.log([1, 2, 3].flatMap(n => [n * 2])) // [2, 4, 6]