Array
coderljw 2024-10-13 大约 5 分钟
# 1. Array(any...) & Array.of(any...)
构造函数创建数组。
Array.of(3) 创建一个具有单个元素 3 的数组，而 Array(3) 创建一个长度为 3 的空数组。
Array() // => []
Array(2) // => [empty × 2] （不可遍历！）
Array(2, 9) // => [2, 9]
Array.of() // => []
Array.of(2) // => [2]
Array.of(2, 9) // => [2, 9]
1
2
3
4
5
6
7
2
3
4
5
6
7
# 2. Array.from(arrayLike | iterable, callback, this)
将类数组或可迭代对象转换为数组。
第二个参数可传递一个回调函数。
const ary = {
0: '姜姒',
1: '徐扶墙',
length: 2,
}
Array.from(ary) // => ['姜姒', '徐扶墙']
Array.from('jack') // => => ['j', 'a', 'c', 'k']
Array.from(ary, (item, index) => `${item}7`) // => ['姜姒7', '徐扶墙7']
// 快速创建指定长度数组（可遍历）
Array.from({ length: 2 }) // => [undefined, undefined]
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
# 3. Array.isArray(any)
- 判断是否为数组。
Array.isArray([]) // => true
1
# 4. join(string)
默认以逗号连接数组每一项。
数组中的 null 与 undefined 会转换为空字符串。
[1, null, 3, undefined, 5].join() // => '1,,3,,5'
1
# 5. concat(any...)
- 可以连接任意类型数据。
[1, 2].concat([3, 4, 5], [6, 7]) // => [1, 2, 3, 4, 5, 6, 7]
[1, 2].concat('777', new Date()) // => [1, 2, '777', Thu Jan 01 1970 00:00:00 GMT+0800 (中国标准时间)]
1
2
3
2
3
# 6.slice(beginIndex, endIndex)
- 从开始索引截取至结束索引，若结束索引未指定，截取至末尾，负数反序截取（包含开始索引，不包含结束索引）。
[1, 2, 3, 4, 5].slice(1) // => [2, 3, 4, 5]
[1, 2, 3, 4, 5].slice(1, 3) // => [2, 3]
// 开始索引溢出，返回空数组
[1, 2, 3, 4, 5].slice(7) // => []
// 取数组最后一项
[1, 2, 3, 4, 5].slice(-1)[0] // => 5
1
2
3
4
5
6
7
2
3
4
5
6
7
# 7. fill(any, startIndex, endIndex)
默认以 undefined 填充数组每一项。
第二个参数为开始索引，第三个参数项为结束索引（包含开始索引，不包含结束索引）。
[1, 2, 3, 4, 5].fill(7) // => [7, 7, 7, 7, 7]
[1, 2, 3, 4, 5].fill() // [undefined, undefined, undefined, undefined, undefined]
[1, 2, 3, 4, 5].fill(7, 2, 4) // => [1, 2, 7, 7, 5]
// 快速创建指定长度数组
Array(7).fill(7) // => [7, 7, 7, 7, 7, 7, 7]
1
2
3
4
5
6
2
3
4
5
6
# 8. flat(depth)
- 默认扁平化一级。
[1, , [2, 3, [4, 5]]].flat() // => [1, 2, 3, [4, 5]]
[1, , [2, 3, [4, 5]]].flat(Infinity) // => [1, 2, 3, 4, 5]
1
2
2
# 9. flatMap(callback, this)
- 与 map 连着深度值为 1 的 flat 几乎相同（
flatMap = ary => ary.flat().map(_ => _)）。
[1, , [2, 3, [4, 5]]].flatMap((item, index) => item) // => [1, 2, 3, [4, 5]]
1
# 10. indexOf(element, beginIndex)
返回元素首次出现的索引位置，未找到返回 -1。
第二个参数为开始查找位置。
当查找数组中是否存在 NaN 时为返回 -1。
[1, 2, 3, 4, 3, 5].indexOf(3) // => 2
[1, 2, 3, 4, 3, 5].indexOf(3, 5) // => -1
[NaN].indexOf(NaN) // => -1
1
2
3
4
2
3
4
# 11. lastIndexOf(element, endIndex)
返回元素最后出现的索引位置，未找到返回 -1。
第二个参数为截止查找位置。
当查找数组中是否存在 NaN 时为返回 -1。
[1, 2, 3, 4, 3, 5].lastIndexOf(3) // => 4
[1, 2, 3, 4, 3, 5].lastIndexOf(3, 3) // => 2
[NaN].lastIndexOf(NaN) // => -1
1
2
3
4
2
3
4
# 12. includes(element, beginIndex)
判断数组中是否存在指定元素，解决了 indexOf() 方法，当数组中存在 NaN 的情况。
第二个参数指定开始查找索引。
[1, 2, 3, 4, 5].includes(2) // => true
[1, 2, 3, 4, 5].includes(2, 2) // => false
[NaN].includes(NaN) // => true
1
2
3
4
2
3
4
# 13. find(callback, this)
- 返回第一个满足条件的项，都不满足返回 undefined。
[1, 2, 3, 4, 3, 5].find((item, index) => item >= 3) // => 3
[1, 2, 3, 4, 3, 5].find((item, index) => item === 7) // => undefined
1
2
2
# 14. findIndex(callback, this)
返回第一个满足条件项的索引，都不满足返回-1。
与 indexOf 的区别是传递一个回调函数。
[1, 2, 3, 4, 3, 5].findIndex((item, index) => item >= 3) // => 2
[1, 2, 3, 4, 3, 5].findIndex((item, index) => item === 7) // => -1
1
2
2
# 15. forEach(callback, this)
- 遍历数组，返回 undefined。
[1, 2, 3, 4, 5].forEach((item, index) => console.log(item * 2)) // => undefined
1
# 16. map(callback, this)
- 遍历数组，返回结果项组成的新数组。
[1, 2, 3, 4, 5].map((item, index) => item * 2) // => [2, 4, 6, 8, 10]
1
# 17. every(callback, this)
检测数组中是否每一项都满足条件。
空数组会返回 true（使用时先判断下是否为空数组哟！）
[1, 2, 3, 4, 5].every((item, index) => item > 3) // => false
[].every((item, index) => item > 3) // => true
1
2
2
# 18. some(callback, this)
检测数组中是否有一项满足条件。
空数组会返回 false。
[1, 2, 3, 4, 5].some((item, index) => item > 3) // => true
1
# 19. filter(callback, this)
- 根据指定条件过滤出新数组。
[1, 2, 3, 4, 5].filter((item, index) => item > 2) // => [3, 4, 5]
// 过滤假值
[false, null, undefined, NaN, 0, 0n, '', document.all, 7].filter(Boolean) // => [7]
1
2
3
4
2
3
4
# 20. reduce(callback, initValue)
神奇的 reduce，第二个参数为初始值，不传时会拿第零个元素作为初始值。
在空数组上调用，且未提供初始值，会报错（使用时最好写上初始值哟！）。
以前我没得选，现在我只想用 Array.prototype.reduce - 尼克陈 (opens new window)
// total：上一个回调函数的返回值；current：当前项的值；currentIndex：当前项的索引；
[1, 2, 3, 4, 5].reduce((total, current, currentIndex) => total + current) // => 15
[1, 2, 3, 4, 5].reduce((total, current, currentIndex) => total + current, 7) // => 22
[].reduce((total, current, currentIndex) => total + current) // Uncaught TypeError: Reduce of empty array with no initial value
1
2
3
4
5
2
3
4
5
# 21. reduceRight(callback, initValue)
与 reduce 类似，不过从最后一项开始累加，不传初始值时会拿最后一个元素作为初始值。
在空数组上调用，且未提供初始值，会报错（使用时最好写上初始值哟！）。
[1, 2, 3, 4, 5].reduceRight((total, current, currentIndex) => total + current) // => 15
[].reduceRight((total, current, currentIndex) => total + current) // Uncaught TypeError: Reduce of empty array with no initial value
1
2
3
2
3
# 22. keys() & values() & entries()
- 返回由数组 index/value/[index, value] 组成的可迭代对象。
const ary = ['jack', 'pony', 'coderljw']
for (const index of ary.keys()) console.log(index) // 依次打印：0 -> 1 -> 2
for (const value of ary.values()) console.log(value) // 依次打印：'jack' -> 'pony' -> 'coderljw'
for (const [index, value] of ary.entries()) console.log(index, value) // => 依次打印：0 'jack' -> 1 'pony' -> 2 'coderljw'
1
2
3
4
5
6
7
2
3
4
5
6
7
# 23. at(index)
- 根据索引取值，默认索引为 0，负数反序取值（可简化通过 length 计算的索引）。
[1, 2, 3, 4, 5].at(-1) // => 5
1
