JavaScript中的数组方法全解

在 JS 中，数组方法是非常重要且常用的方法，在此整理总结一番。

1、JavaScript 常用数组方法

顺序	方法名	功能	返回值	是否改变原数组	版本
1	push()	(在结尾)向数组添加一或多个元素	返回新数组长度	Y	ES5-
2	unshift()	(在开头)向数组添加一或多个元素	返回新数组长度	Y	ES5-
3	pop()	删除数组的最后一位	返回被删除的数据	Y	ES5-
4	shift()	移除数组的第一项	返回被移除的数据	Y	ES5-
5	reverse()	反转数组中的元素	返回反转后的数组	Y	ES5-
6	sort()	以字母顺序(字符串 Unicode 码点)对数组进行排序	返回新数组	Y	ES5-
7	splice()	在指定位置删除指定个数元素再增加任意个数元素(实现数组任意位置的增删改)	返回删除的数据所组成的数组	Y	ES5-
8	concat()	通过合并(连接)现有数组来创建以一个新数组	返回合并之后的数组	N	ES5-
9	join()	用特定的字符，将数组拼接形成字符串(默认“,”)	返回拼接后的新数组	N	ES5-
10	slice()	裁切指定位置的数组	返回被裁切的元素形成的新数组	N	ES5-
11	toString()	将数组转换为字符串	返回新数组	N	ES5-
12	valueOf()	查询数组原始值	返回数组的原始值	N	ES5-
13	indexOf()	查询某个元素在数组中第一次出现的位置	存在该元素，返回下标；不存在，返回-1	N	ES5-
14	lastIdexOf()	反向查询数组某个元素在数组中第一次出现的位置	存在该元素，返回下标；不存在，返回-1	N	ES5-
15	forEach()	(迭代)遍历数组，每次循环中执行传入的回调函数	无(undefined)	N	ES5-
16	map()	(迭代)遍历数组，每次循环时执行传入的回调函数，根据回调函数的返回值，生成一个新的数组	返回生成的新数组	N	ES5-
17	filter()	(迭代)遍历数组，每次循环时执行传入的回调函数，回调函数返回一个条件，把满足条件的元素筛选出来放到新数组中	返回满足条件的元素组成的新数组	N	ES5-
18	every()	(迭代)判断数组中所有元素是否满足某个条件	全部满足返回 true；只要有一个不满足返回 false	N	ES5-
19	some()	(迭代)判断数组中是否存在满足某个条件的元素	只要有一个满足条件就返回 true；都不满足返回 false	N	ES5-
20	reduce()	(归并)遍历数组，每次循环时执行传入的回调函数，回调函数会返回一个值，将该值作为初始值 prev，传入到下一个函数中	最终操作的结果	N	ES5-
21	reduceRight()	(归并)用法同 reduce，只不过是从右往左	同 reduce	N	ES5-
22	includes()	判断一个数组是否包含一个指定的值	是返回 true；否返回 false	N	ES6
23	Array.from()	接收伪数组，返回对应的真数组	对应得真数组	N	ES6
24	find()	遍历数组，执行回调函数；回调函数执行一个条件，返回满足条件得第一个元素，不存在返回 undefined	满足条件的第一个元素，否则返回 undefined	N	ES6
25	findIndex()	遍历数组，执行回调函数；回调函数接受一个条件，返回满足条件的第一个元素下标，不存在返回-1	满足条件第一个元素下标，不存在返回-1	N	ES6
26	fill()	用给定值填充一个数组	新数组	N	ES6
27	flat()	用于将嵌套的数组“拉平”，变成一维的数组	返回一个新数组	N	ES6
28	flatMap()	flat()和 map()的组合版，先通过 map()返回一个新数组，再将数组拉平(只能拉平一次)	返回新数组	N	ES6
29	at()	获取数组中的元素，接收一个整数值并返回该索引的元素，允许正数和负数。负整数从数组中的最后一个元素开始倒数。	返回获得元素	N	ES2022新特性

2、方法详解

1. push():

功能：在数组**最后一位***添加*一个或多个元素，并返回新数组的长度，改变原数组（添加多个元素用逗号隔开）

var arr = [1, 2, 'c']
var rel = arr.push('A', 'B')
console.log(arr) // [1, 2, 'c', 'A', 'B']
console.log(rel) // 5 (数组长度)

2. unshift():

功能：在数组**第一位***添加*一个或多个元素，并返回新数组的长度，改变原数组。（添加多个元素用逗号隔开）

var arr = [1, 2, 'c']
var rel = arr.unshift('A', 'B')
console.log(arr) // [ "A", "B",1, 2, "c"]
console.log(rel) //  5  (数组长度)

3. pop()：

功能：删除数组的最后一位，并且返回被删除的数据，会改变原来的数组。（该方法不接受参数，且每次只能删除最后一个）

var arr = [1, 2, 'c']
var rel = arr.pop()
console.log(arr) // [1, 2]
console.log(rel) // c

4. shift()：

功能：删除数组的第一位数据，并且返回被删除的数据，会改变原来的数组。（该方法同 pop() ，不接受参数，且每次只能删除第一个）

var arr = [1, 2, 'c']
var rel = arr.shift()
console.log(arr) // ['b', "c"]
console.log(rel) // a

5. reverse()：

功能：将数组的数据进行反转，并返回反转后的数组，会改变原来的数组

var arr = [1, 2, 3, 'a', 'b', 'c']
var rel = arr.reverse()
console.log(arr) // ["c", "b", "a", 3, 2, 1]
console.log(rel) // ["c", "b", "a", 3, 2, 1]

6. sort()：

sort() 方法是最强大的数组方法之一。

功能：对数组内的元素进行排序，并返回排序后的数组。默认排序顺序是根据字符串 Unicode 码点。会改变原数组：

例 1：

var arr1 = [10, 1, 5, 2, 3]
arr1.sort()
console.log(arr1) // [1, 10, 2, 3, 5]

以上结果显然不是我们所想要的排序结果，因为它是根据 Unicode 编码来排序的，这也显示了其不稳定性。

语法： arr.sort(function(a,b))
参数： function 是可选的。用来指定某种顺序进行排列的函数。如果省略，元素会按照转化成的字符串的诸个字符的 Unicode 位点进行排序。
具体用法：

• 如果 function(a, b) { return a - b; }，=> a - b > 0 时那么 a 会被排列到 b 之前；从小到大排序
• 如果 function(a, b) { return b - a; }，=> b - a > 0 时那么 b 会被排列到 a 之前；从大到小排序

那么我们就可以运用以上所说的 function(a, b) 去完成对数字的排序：

var arr = [10, 1, 5, 2, 3]
arr.sort(function(a, b) {
  return a - b
})
console.log(arr) // [1, 2, 3, 5, 10]

当元素为对象时（可按照其中某一个属性来排序）：

var arr1 = [
  { name: '老八', age: '38' },
  { name: '赵日天', age: '28' },
  { name: '龙傲天', age: '48' }
]
arr1.sort(function(a, b) {
  return b.age - a.age
})
console.log(arr1) // [{ name: '龙傲天', age: '48' }, { name: '老八', age: '38' }, { name: '赵日天', age: '28' }]

7. splice()：

功能：向数组中添加，或从数组删除，或替换数组中的元素，然后返回被删除/替换的元素所组成的数组。可以实现数组的增删改，会改变原数组：
语法： arr.splice(index, howmany, item1, … , itemX)
参数：

参数	描述
index	必需。整数，规定添加/删除元素的索引（元素下标），使用负数可从数组结尾处规定索引。
howmany	必需。要删除的元素数量。如果是 0，则不会删除元素。
item1, … , itemX	可选。向数组添加新的元素。

例：删除 arr() 中的第三个元素并添加 “add1”, “add2” 两个元素：

var arr = ['a', 'b', 'c', 2, 3, 6]
var rel = arr.splice(2, 1, 'add1', 'add2')
console.log(arr) // ["a", "b", "add1", "add2", 2, 3, 6]
console.log(rel) // ["c"]

8. concat()：

功能：拼接数组（将多个数组或元素拼接形成一个新的数组），不会改变原数组。

如果拼接的是数组，则将数组展开，之后将数组中的每一个元素放到新数组中。
如果是其他类型的，直接放到新数组当中。
如果没有任何参数，将返回一个和原来的数组一样的数组（复制数组，相当于浅拷贝）

// 拼接数组
var arr1 = [1, 2, 3]
var arr2 = ['a', 'b', 'c']
var arr3 = ['A', 'B', 'C']
var rel1 = arr1.concat(arr2, arr3)
console.log(arr1) // [1, 2, 3]
console.log(rel1) // [1, 2, 3, 'a', 'b', 'c', 'A', 'B', 'C']

// 拼接元素
var str1 = '张三'
var str2 = '李四'
var rel2 = arr1.concat(str1, str2)
console.log(rel2) // [1, 2, 3, '张三', '李四']

// 无参数 == 浅拷贝
var arr4 = [1, 2, 3, { name: '老八', age: '38' }, { name: '赵日天', age: '28' }, { name: '龙傲天', age: '48' }]
var rel3 = arr4.concat()
arr4[0] = 6
arr4[3].age = 60
console.log(arr4) // [6, 2, 3, { name: '老八', age: 60 }, { name: '赵日天', age: '28' }, { name: '龙傲天', age: '48' }]
console.log(rel3) // [1, 2, 3, { name: '老八', age: 60 }, { name: '赵日天', age: '28' }, { name: '龙傲天', age: '48' }]

9. join()：

功能：用特定的字符，将数组拼接形成字符串（默认为 “,”）

var list = ['a', 'b', 'c', 'd']
var result1 = list.join('-')
var result2 = list.join('/')
var result3 = list.join('')
var result4 = list.join()
console.log(result1) // "a-b-c-d"
console.log(result2) // "a/b/c/d"
console.log(result3) // "abcd"
console.log(result4) // a,b,c,d

10. slice()：

功能：裁切指定位置的数组，返回值为被裁切的元素形成的新数组，不改变原数组

同 concat() 方法一样
slice() 如果不传参数，会使用默认值，得到一个与原数组元素相同的新数组（复制数组，等同于浅拷贝）

语法： arr.slice( startIndex, endIndex )
参数：

参数	描述
startIndex	起始下标，默认为 0
endIndex	终止下标，默认值 length，可以接收负数（倒着数）

注意：起始下标和终止下标的区间是 左闭右开 [a, b) 能取到起始，取不到终止

var arr = ['a', 'b', 'c', 'd']
var rel = arr.slice(1, 3)
console.log(rel) // ["b", "c"]

11. toString()：

功能：直接将数组转化为字符串，并且返回转化后的新数组，不改变原数组，与 join() 方法不添加任何参数相同

var arr = ['a', 'b', 'c', 'd']
var rel = arr.toString()
console.log(rel) // "a,b,c,d"

12. valueOf()：

功能：返回数组的原始值（一般情况下其实就是数组本身）

var arr = [1, 2, 3, 4]
var rel = arr.valueOf()
console.log(arr) // [1, 2, 3, 4]
console.log(rel) // [1, 2, 3, 4]

扩展学习： 学会 toString() 和 vauleOf() 这两个方法的使用

13. indexOf()

功能：查询某个元素在数组中第一次出现的位置，存在该元素，返回下标；不存在，返回-1（可以通过返回值变相判断是否存在该元素）

var arr = [1, 2, 3, 4]
var index = arr.indexOf(4) // 3
var index = arr.indexOf('4') // -1
console.log(index)

14.lastIndexOf()：

功能：查询某个元素在数组中最后一次出现的位置（或者理解为反向查询第一次出现的位置），存在该元素，返回下标；不存在，返回-1（可以通过返回值，变相判断是否存在该元素）

var arr = [1, 2, 3, 4]
var index = arr.lastIndexOf(4) // 3
var index = arr.lastIndexOf('4') // -1
console.log(index)

15. forEach()：

功能：遍历数组，每次循环中执行传入的回调函数。（注意：forEach() 对于空数组是不会执行回调函数的）没有返回值，或返回值为 undefined ，不会改变原数组
语法：
arr.forEach(function(value,index,array){
　 　//do something
})
参数： value：每次循环的当前元素；index：当前元素的下标；array：原始数组；
数组中有几项，那么传递进去的匿名函数就需要执行几次；

var list = [32, 93, 77, 53, 38, 87]
var res = list.forEach(function(item, index, array) {
  console.log(item, index, array)
  /**
  32, 0, [32, 93, 77, 53, 38, 87]
  93, 1, [32, 93, 77, 53, 38, 87]
  77, 2, [32, 93, 77, 53, 38, 87]
  53, 3, [32, 93, 77, 53, 38, 87]
  38, 4, [32, 93, 77, 53, 38, 87]
  87, 5, [32, 93, 77, 53, 38, 87]
   /
})
console.log(res) // undefined

16. map()：

功能：遍历数组，每次循环时执行传入的回调函数，根据回调函数的返回值，生成一个新的数组，同 forEach() 方法，但是 map() 方法有返回值，可以 return 出来。
语法：
arr.map(function(item,index,array){
　　//do something
　　 return XXX
})
参数： item：每次循环的当前元素；index：当前项的索引；array：原始数组

var arr = [32, 93, 77, 53, 38, 87]
var res = arr.map(function(item, index, array) {
  return item + 5 * 2
})
console.log('原数组', arr) // [32, 93, 77, 53, 38, 87]
console.log('新数组', res) // [42, 103, 87, 63, 48, 97]

17. filter()：

功能：遍历数组，每次循环时执行传入的回调函数，回调函数返回一个条件，把满足条件的元素筛选出来放到新数组当中。
语法：
arr.filter(function(item,index,array){
　　//do something
　　 return XXX //条件
})
参数： item：每次循环的当前元素；index：当前项的索引；array：原始数组

var list = [32, 93, 77, 53, 38, 87]
var resList = list.filter(function(item, index, array) {
  return item >= 60 // true || false
})
console.log(resList) // [93, 77, 87]

18. every()：

功能：遍历数组，每次循环时执行传入的回调函数，回调函数返回一个条件，全部满足返回 true；只要有一个不满足返回 false；判断数组中所有的元素是否满足某个条件

var list = [32, 93, 77, 53, 38, 87]
var result1 = list.every(function(item, index, array) {
  return item >= 50
})
var result2 = list.every(function(item, index, array) {
  return item >= 30
})
console.log(result1) // false
console.log(result2) // true

19. some()：

功能：遍历数组，每次循环时执行传入的回调函数，回调函数返回一个条件，只要有一个元素满足条件就返回 true；都不满足返回 false。判断数组中是否存在满足某个条件的元素

var list = [32, 93, 77, 53, 38, 87]
var result1 = list.some(function(item, index, array) {
  return item >= 50
})
var result2 = list.some(function(item, index, array) {
  return item >= 100
})
console.log(result1) // true
console.log(result2) // false

20. reduce()：

功能：遍历数组，每次循环时执行传入的回调函数，回调函数会返回一个值，将该值作为初始值 prev，传入到下一次函数中，返回最终操作的结果。
语法： arr.reduce( function(prev, item, index, array) { 函数体 }, initVal )
参数： reduce() 方法的参数有两部分，第一个是回调函数，第二个是设置的初始值

参数	描述
prev	回调初始值（类似求和的 sum = 0）可以设设置初始值（参数initVal）；如果不设置初始值，默认为数组中的第一个元素，遍历时从第二个元素开始遍历
item	每次循环时的当前元素
index	每次循环时的当前元素下标
array	原始数组
initVal	初始值

扩展学习：reduce 使用实例

// 不设置初始值的累加
var arr = [2, 3, 4, 5]
var sum = arr.reduce(function(prev, item, index, array) {
  console.log(prev, item, index, array)
  return prev + item
})
console.log(arr, sum) // [2, 3, 4, 5]  14

解析：第一次循环时，prev = 2；item = 3；index = 1；array = 原数组(arr)；因为没有给 prev 设置初始值，所以 prev 的值为数组中第一个元素，遍历从第二个元素开始
第二次循环时，prev = 5（2 + 3(上次循环的元素)）；item = 4；index = 2；array = 原数组(arr)；
…
最终 prev = 14 ; arr 中有四个元素 共循环三次；(因为没设置初始值跳过第一次循环 prev 默认等于第一个值)

// 设置初始值的累加
var arr = [2, 3, 4, 5]
var sum = arr.reduce(function(prev, item, index, array) {
  console.log(prev, item, index, array)
  return prev + item
}, 0)
console.log(arr, sum) // [2, 3, 4, 5]  14

解析：可以看到与上一次不设置初始值相比，最终的结果相同，但是多循环的一次，因为设置了 prev 的初始值为 0，所以循环遍历从第一个元素开始，而不设置初始值，循环从第二个元素开始.。

21. reduceRight()：

功能：同 reduce() 方法一致，只不过该方法循环时是从右往左的

22. includes()：

功能：用来判断一个数组是否包含一个指定的值，如果存在返回 true，不存在返回 false。

let site = ['runoob', 'google', 'taobao']

site.includes('runoob') // true

site.includes('baidu') // false

23. Array.from()：

功能：将一个类数组对象或者可遍历对象转化成一个真正的数组。

注意：一个类数组对象转化成一个真正的对象，需要具备以下条件：

• 1、该 伪数组 / 类数组 对象必须具有 length 属性，用于指定数组的长度。如果没有 length 属性，那么转化后的数组是一个空数组。
• 2、该 伪数组 / 类数组 对象的属性名必须为数值型或字符串型的数字。

// 存在 length 属性
var all1 = { 0: '张飞', 1: '28', 2: '男', 3: ['率土', '鸿图', '三战'], length: 4 }
var list1 = Array.from(all1)
console.log(all1) // {0: '张飞', 1: '28', 2: '男', 3: ['率土', '鸿图', '三战'], length: 4}
console.log(list, Array.isArray(list1)) // ['张飞', '28', '男', ['率土', '鸿图', '三战']] true

// 不存在 length 属性
var all2 = { 0: '张飞', 1: '28', 2: '男', 3: ['率土', '鸿图', '三战'] }
var list2 = Array.from(all2)
console.log(all2) // {0: '张飞', 1: '28', 2: '男', 3: ['率土', '鸿图', '三战']}
console.log(list, Array.isArray(list2)) // [] true

24. find()：

功能：遍历数组，每次循环时执行回调函数，回调函数接受一个条件，返回满足条件的第一个元素，不存在时返回 undefined 。（该方法常用于快速查找对象数组满足条件的项）
语法： arr.find( function(item, index, array) { 函数体 }, initVal )
参数：

参数	描述
item	必需，循环时的当前元素
index	可选，循环时的当前元素下标
array	可选，原始数组

var list = [55, 66, 77, 88, 99, 100];
var res = list.find(function (item, index, array) {
	return item > 60;
});
console.log(res); // 66

let arr1 = [{ id: 1, name: 'coco' }, { id: 2, name: 'dudu' }]
let res1 = arr1.find(item => item.id == 1)
console.log('res', res1)  //res1 {id: 1, name: "coco"}

每次循环判断当前元素是否满足条件，如果满足直接跳出循环，并返回当前满足条件的元素

25. findIndex()：

功能：遍历数组，每次循环时执行回调函数，回调函数接受一个条件，返回满足条件的第一个元素下标，不存在则返回-1。
参数同 find()

注意：findIndex() 和 indexOf() 不同
indexOf() 是传入一个值，找到了也是返回索引，没有找到返回-1，属于ES5；
findIndex() 是传入一个测试条件，也就是一个回调函数，找到了返回当前项索引，没有找到返回-1，属于ES6
findIndex() 可用于快速查找对象数组满足条件的项，而 indexOf() 不支持

var list = [55, 66, 77, 88, 99, 100];
var index = list.findIndex(function (item, index, array) {
	console.log(item, index, array);
	return item > 60;
});
console.log(index); // 1

26. fill()：

功能：用给定值填充一个数组
语法： arr.fill(value, start, end)
参数：

参数	描述
value	必需，填充的值
satrt	可选，开始填充位置
end	可选，停止填充位置（默认为 arr.length）

 var result = ["a", "b", "c"].fill("填充", 1, 2); 
 console.log(result) // ["a", "填充", "c"]

27. flat()：

功能：用于将嵌套的数组 “拉平”，变成一维数组。该方法返回一个新数组，不改变原数组。

注意：默认拉平第一层级，如果想自定义拉平层级，需要手动传参，如果想要拉平所有层级，传入 Infinity。

// 默认拉平第一层级
var list = [1, 2, [3, 4, [5, 6, [7, 8]]]]
var arr1 = list.flat() 
console.log('拉平一次', arr1) // [1, 2, 3, 4, [5, 6, [7, 8]]]
// 拉平至第二层级
var arr2 = list.flat(2) 
console.log('拉平两次', arr2) // [1, 2, 3, 4, 5, 6, [7, 8]]
// 拉平所有层级
var arr3 = list.flat(Infinity) 
console.log('拉平两次', arr3) // [1, 2, 3, 4, 5, 6, 7, 8]

28. flatMap()：

功能：flat() 方法和 map() 方法的组合版，先通过 map() 返回一个新数组，再将该数组拉平第一层级（只能拉平第一层级）

var list = [55, 66, 77, 88, 99, 100]
// map 方法
var newArr = list.map(function (item, index) {
	return [item, index]
})
console.log(newArr) // [[55, 0], [66, 1], [77, 2], [88, 3], [99, 4], [100, 5]]
// flatMap 方法
var newArr = list.flatMap(function (item, index) {
	return [item, index]
})
console.log(newArr) // [55, 0, 66, 1, 77, 2, 88, 3, 99, 4, 100, 5]

29、at();

功能：通过索引访问项的常用且好的方法。只需将索引表达式放入方括号array[index]中，并获取该索引处的数组项。
简单来说，array.at(index)访问 index 参数处的元素。

1. 如果index参数是一个正整数 >= 0，该方法返回该索引处的元素。

   const fruits = ['orange', 'apple', 'banana', 'grape'];
   
   const item = fruits.at(1);
   item; // => 'apple'
   

2. 如果index参数大于或等于数组长度，则与常规访问器一样，该方法返回undefined：

   const fruits = ['orange', 'apple', 'banana', 'grape'];
   
   const item = fruits.at(999);
   item; // => undefined
   

3. 当你对array.at()方法使用负下标时，将从数组的末尾访问元素

   const lastItem = fruits.at(-1);
   lastItem; // => 'grape'