JS 数组方法总结

总结表格

分类	方法	ES版本	是否改变原数组	空槽处理	返回值
创建	[]	ES3	N	-	Array
	new Array()	ES3	N	-	Array
	Array()	ES3	N	-	Array
	Array.from()	ES6	N	hole → undefined	Array
	Array.of()	ES6	N	保留 hole	Array
填充/复制	fill()	ES6	Y	hole 会变为指定值	Array
	copyWithin()	ES6	Y	保留 hole	Array
转换/切片	slice()	ES3	N	保留 hole	Array
	splice()	ES3	Y	保留 hole	Array（删除元素）
	toSpliced()	ES2023	N	保留 hole	Array
	with()	ES2023	N	保留 hole	Array
栈/队列	push()	ES3	Y	-	新 length
	pop()	ES3	Y	-	被删除元素
	unshift()	ES3	Y	-	新 length
	shift()	ES3	Y	-	被删除元素
合并/归并/转字符串	concat()	ES3	N	保留 hole	Array
	flat()	ES2019	N	会去掉 hole	Array
	flatMap()	ES2019	N	会去掉 hole	Array
	reduce()	ES5	N	跳过 hole	累积值
	reduceRight()	ES5	N	跳过 hole	累积值
	join()	ES3	N	会当 undefined → ''	String
查找	at()	ES2022	N	跳过 hole	元素/undefined
	find()	ES6	N	跳过 hole	元素/undefined
	findLast()	ES2023	N	跳过 hole	元素/undefined
	findIndex()	ES6	N	跳过 hole	索引/-1
	findLastIndex()	ES2023	N	跳过 hole	索引/-1
	indexOf()	ES5	N	跳过 hole	索引/-1
	lastIndexOf()	ES5	N	跳过 hole	索引/-1
	includes()	ES6	N	跳过 hole	Boolean
	some()	ES5	N	跳过 hole	Boolean
	every()	ES5	N	跳过 hole	Boolean
	filter()	ES5	N	跳过 hole	Array
排序	reverse()	ES3	Y	保留 hole	Array
	toReversed()	ES2023	N	保留 hole	Array
	sort()	ES3	Y	保留 hole	Array
	toSorted()	ES2023	N	保留 hole	Array
遍历	forEach()	ES5	N	跳过 hole	undefined
	map()	ES5	N	跳过 hole	Array
	keys()	ES6	N	保留 hole	Iterator
	values()	ES6	N	保留 hole	Iterator
	entries()	ES6	N	保留 hole	Iterator

由此可见，改变原数组的方法只有 栈/队列、fill/copyWith、两个旧的排序、splice 方法，其他的都不会改变元素组。

大部分方法会保留或跳过 hole，只有 Array.from 会把 hole 变成 undefined、flat/flatMap 会把 hole 去掉、fill 会填充 hole、join 会把 hole 当作 undefined 转换为''。

按功能分类

创建方法

• new Array()
• Array()
• 字面量 []
• Array.from() （ES6）
• Array.of() （ES6）

静态方法

• Array.isArray()
• Array.from()
• Array.of()，与 Array.from() 区别在于

1. Array.from() 会将 hole 转换为 undefined，而 Array.of() 会保留 hole。

const arr = [1, , 3]
console.log(Array.from(arr)) // [1, undefined, 3]
console.log(Array.of(arr)) // [[1, 空, 3]]

2. Array.from() 将类数组对象或可迭代对象转换为数组，Array.of() 将一组参数转换为数组。

Array.from('foo') // ['f', 'o', 'o']
Array.of('foo') // ['foo']

const map = new Map([
  [1, 2],
  [2, 4],
  [4, 8],
]);
Array.from(map) //  [Array(2), Array(2), Array(2)]
Array.of(map) // [Map(3)]

Array.from({a:1}) // []
Array.of({a:1}) // [{a: 1}]

Array.from(1) // []
Array.of(1) // [1]

填充方法

• fill() （ES6，填充数组，会覆盖原数组，函数签名 array.fill(value, start, end)）
• copyWithin() （ES6，会覆盖原数组，将数组元素复制到数组中的另一个位置，覆盖现有值，不会添加更多项，函数签名 array.copyWithin(targetIndex, start, end)）

转换

• slice() （不改原数组，浅拷贝，不包含 end，支持负索引）
• splice() （改原数组，返回删除项，支持负索引，函数签名 array.splice(index, howmany, item1, ..., itemX)）
• toSpliced() （ES2023，不改原数组，返回新数组）
• with() （ES2023，替换某个元素，不改原数组，返回新数组）

栈和队列

• push() （从后面塞，返回新长度）
• pop() （从后面出，返回出的）
• unshift() （从前面塞，返回新长度）
• shift() （从前面出，返回出的）

合并

• concat() （连接多个数组，不改原数组，返回新数组）

转字符串

• join() （默认填充逗号，返回字符串）
• toString() （默认填充逗号，返回字符串）

归并计算

• reduce() （从左往右归并，不改变原数组，函数签名 array.reduce(function(total, currentValue, currentIndex?, arr?), initialValue?)
• reduceRight() （从右往左归并）

查找

• at() （ES2022，支持负索引，无参返回第一个，-1 返回最后一个）
• indexOf() （ES5，从头找，找到返回第一个，否则 -1）
• lastIndexOf() （ES5，从后找，找到返回最后一个，否则 -1）
• includes() （与 indexOf 的区别是可以查找 NaN，返回 boolean）

查找（参数是回调函数的）

• find() （ES6，返回第一个满足断言的，否则 undefined）
• findIndex() （ES6，返回第一个满足断言的索引，否则 -1）
• findLast() （ES2023，返回最后一个满足断言的，否则 undefined）
• findLastIndex() （ES2023，返回最后满足断言的索引，否则 -1）

以上四种函数声明都是 array.<funcName>(function(currentValue, index?, arr?) , thisValue?)

• some()
• every()

过滤

• filter()

排序

• reverse()
• toReversed() （ES2023，不改原数组，返回新数组）
• sort()
• toSorted() （ES2023，不改原数组，返回新数组）

拍平

• flat() （展开嵌套子数组，可指定深度，默认 1）
• flatMap() （函数签名 array.flatMap(function(currentValue, index?, arr?), thisValue?)，效果类似于 flat + map）

遍历

• forEach() （ES5）
• map() （ES5）
• keys() （ES6，返回迭代器，可被 for...of 遍历，对象的内置方法）
• values() （ES6，返回迭代器，可被 for...of 遍历，对象的内置方法）
• entries() （ES6，返回有键值对的迭代对象，可被 for...of 遍历，对象的内置方法）

for...of 无法遍历到数组的对象属性，只能遍历索引列表里的元素，length 也只对索引列表计数，hole 读出为 undefined。