数组方法合集

数组方法汇总

顺序	方法名	功能	返回值	是否改变原数组	版本
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

1. push()

作用：在数组最后一位添加一个或多个元素,并返回新数组的长度,改变原数组.(添加多个元素用逗号隔开)

 const arr = [1, 2, 3]
 const arr1 = arr.push('a', 'b')
 console.log(arr)    //[1,2,3,4,5]
 console.log(arr1)   //5 (数组长度)

2. unshift()

作用:在数组第一位添加一个或多个元素,并返回新数组的长度,改变原数组.(添加多个元素用逗号隔开)

 const arr = [1, 2, 3]
 const arr1 = arr.unshift('a', 'b')
 console.log(arr)   //['a', 'b', 1, 2, 3]
 console.log(arr1)  // 5 (数组长度)

3. pop()

作用：删除数组末位，并**返回删除的数据**，会改变原来的数组。(该方法不接受参数,且每次只能删除最后一个)

 const arr = [1, 2, 3]
 const arr1 = arr.pop()
 console.log(arr)   //[1, 2]
 console.log(arr1)  //3 （删除的数据）

4. shift()

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

 const arr = [1, 2, 3]
 const arr1 = arr.shift()
 console.log(arr) // [2, 3]
 console.log(arr1)//1 (删除的数据)

5. reverse()

作用：将数组的数据进行反转，并且返回反转后的数组，会改变原数组

const arr = [1, 2, 3]
const arr1 = arr.reverse()
console.log(arr) //[3, 2, 1]
console.log(arr1) //[3, 2, 1]

6. sort()

作用：对数组元素进行排序，返回值是排序后的数组，默认按unicode编码排序(如10<2,不符合需求，需要改造)

• function(a,b){ return a-b}=====> a-b>0 (升序)
• function(a,b){return b-a}======> b-a>0 (降序)

 const arr = [10, 2, 3, 55, 6, 7]
 const arr1 = arr.sort((a, b) => a - b)
 console.log(arr)     //[2, 3, 6, 7, 10, 55]
 console.log(arr1)    //[2, 3, 6, 7, 10, 55]

7. splice()

作用：向数组中添加，或从数组删除，或替换数组中的元素，然后返回被删除/替换的元素所组成的数组。可以实现数组的增删改

语法：array.splice(start[, deleteCount[, item1[, item2[, ...]]]])

start(必选): 指定修改的开始位置

正数的话从首位开始计数，从0开始；负数的话从末尾开始计数，从-1开始

deleteCount(可选)：表示要移除的数组元素的个数

如果省略，第一个参数所表示的元素后面的所有元素都会被删除

item1...item2(可选)：要添加进数组的元素

如果不指定，则 splice() 将只删除数组元素

const arr = [1, 2, 3, 4]
//从索引为2的位置删除一个元素
console.log(arr.splice(2, 1)) //[3] 被删除元素组成的数组
//从索引为-1的位置删除一个元素
console.log(arr.splice(-1, 1)) //[4] 被删除元素组成的数组
//从索引为-2的位置添加一个元素
console.log(arr.splic(-2, 0, 0)) //[0] 被删除元素组成的数组,没有删除所以为0
console.log(arr) // [0, 1, 2]

8. concat()

作用：数组的拼接(将多个数组或元素拼接形成一个新的数组),不改变原数组

拼接的是数组，则将数组展开，之后将数组中每个元素放入新数组中

拼接的是其他类型，直接放到新数组中

说明：如果不给该方法任何参数，就仅仅相当于复制

 const arr1 = [1, 2, 3]
 const arr2 = [3, 4, 5]
 const arr = arr1.concat(arr2)
 console.log(arr)            //[1, 2, 3, 3, 4, 5] 返回的是拼接的新数组
 console.log(arr1.concat())  // [1, 2, 3]   没有参数相当于复制
 console.log(arr2.concat(6)) // [3, 4, 5, 6] 拼接数字直接放入数组中

9. join()

作用：通过自定的分隔符将数组拼接成字符串( 默认为 , ) 不会改变原数组

const arr = [1, 2, 3]
const arr1 = arr.join(' ')
console.log(arr1)            //1 2 3
console.log(arr.join('⭐')) //1⭐2⭐3

10. slice()

作用：裁剪指定位置的数组，返回值为被裁减元素形成的新数组，不改变原数组

语法： arr[ ].slice(startIndex,endIndex)

startIndex: 正数，表示从0开始，从该索引开始提取原数组元素；负数，表示从数组中的倒数第几个元素开始提取

endIndex：负数，表示从0开始，从该索引结束提取原数组元素；负数，表示从数组中的倒数第几个元素结束提取

注意！！起止坐标和终止坐标是这样的 [a,b) 能取到开头，取不到终止

 const arr = [1, 2, 3, 4, 5]
 console.log(arr.slice(1, 3)) //[2,3]  //表示截取[1,3)
 console.log(arr.slice(-2)) //[4,5]只有一个参数表示从该元素裁剪到结尾

11. toString()

作用： 直接将数组转换为字符串,并且返回转换后的新数组,不改变原数组,与join()不同，不能传分隔符,默认分割符是 ,

 const arr = [1, 2, 3, 4]
 const arr1 = arr.toString('sdfdsf ')
 console.log(arr1)  //1,2,3,4

12. valueOf()

作用：返回指定对象的原始值，返回值为该对象的原始值,不改变原数组

const arr = [1, 2, 3]
const obj = { age: 18 }
const bool = true
console.log(arr.valueOf())   //[1, 2, 3]
console.log(obj.valueOf())   //{ age: 18 }
console.log(bool.valueOf())  //true

13. indexOf()

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

 const arr = [1, 2, 3, 3]
 console.log(arr.indexOf(3)) // 2 找到该元素，返回第一次出现的位置
 console.log(arr.indexOf('3')) //-1 找不到，返回-1

14.lastIndexOf()

作用：查询某个元素在数组中最后一次出现的位置 ，存在该元素,返回下标,不存在 返回 -1 (可以通过返回值 变相的判断是否存在该元素)

const arr = [1, 2, 3, 3]
console.log(arr.lastIndexOf(3)) // 3 找到该元素，返回最后一次出现的位置
console.log(arr.lastIndexOf('3')) //-1 找不到，返回-1

15. forEach()

作用：遍历数组，调用数组的每个元素，并将元素传递给回调函数

forEach( )无返回值，不改变原数组

语法：array.forEach(function(item,index,array){}); 参数:item：当前元素 index: 当前索引 array：原始数组

 const re = [1, 2, 3].forEach((item, index, array) => {
     console.log(item, index, array)
     //执行结果：
     //1 0  [1, 2, 3]
     //2 1  [1, 2, 3]
     //3 2  [1, 2, 3]
     
 })
 console.log(re) //undifined ，forEach()没有返回值

//求数组的和案例
 ;[1, 2, 3, 4].forEach(item => {
      sum += item
  })
  console.log(sum) //10

16.map()

作用：遍历数组，调用数组的每个元素，并将元素传递给回调函数

map() 有返回值，可以return出来，不改变原数组

 const re = [1, 2, 3].map((item, index, array) => {
     return item + 3
 })
 console.log(re) //[3,4,5]

17.fiflter()

作用：遍历数组，把满足条件的元素筛选出来放到新数组中

fiflter() 有返回值，不会改变原数组

const arr = [1, 2, 3, 5, 4]
const re = arr.filter((item, index, array) => {
    return item >= 3
})
console.log(re) //[3, 5, 4]

18.every()

作用：遍历数组，判断数组中的所有元素是否都满足某个条件

every() 有返回值 都满足返回true，有一个不满足就返回false, 不会改变原数组

 const arr = [1, 2, 3, 4]
 const re = arr.every((item, index, array) => {
     return item >= 0
 })
 console.log(re) //true

19. some()

作用：遍历数组，判断数组中是否存在满足某个条件的元素

every() 有返回值 ，有一个满足就返回true，全部不满足返回false, 不会改变原数组

 const arr = [1, 2, 3, 4]
 const re = arr.some((item, index, array) => {
     return item >= 4
 })
 console.log(re) //true

20.reduce( )

作用：遍历数组，每个元素依次执行回调，回调函数会返回一个值,将该值作为初始值prev,传入到下一次函数中 （常叫累加器）

返回值为回调函数遍历整个数组后的结果，不会改变原数组

四个参数：上一次回调函数的返回值，当前元素，当前索引，原数组

如果设置了初始值，从初始值开始，如果没有初始值，初始值为第一个元素开始

//没设置迭代的初始值，初始值就为第一个元素，因此支循环了3次
const arr = [1, 2, 3, 4]
 const re = arr.reduce((prev, item, index, array) => {
     console.log(prev, item)
     return prev + item
 })
 console.log(re) 
//1 2
//3 3
//6 4
//10


//设置迭代的初始值为10，循环了四次
const arr = [1, 2, 3, 4]
const re = arr.reduce((prev, item, index, array) => {
    console.log(prev, item)
    return prev + item
}, 10)
console.log(re) 
//10 1
//11 2
//13 3
//16 4
//20

//用法1：数组求和、乘积
 const sum = [1, 2, 3].reduce((pre, item) => pre + item)
 const mul = [1, 2, 3].reduce((pre, item) => pre * item)
 console.log(sum) //6   1+2+3
 console.log(mul) //6   1*2*3

//高级用法1：计算数组中每个元素出现的次数
//原理：将迭代初始值设置为空对象，通过pre[item]这种动态查询属性值的方式，如果值空就赋值为1，有的的话就累加
 const arr = ['我', '爱', '你', '你', '爱', '我', '吗']
 const re = arr.reduce(function (pre, item) {
     if (!pre[item]) {
         pre[item] = 1
     } else {
         pre[item]++
     }
     return pre
 }, {})
 console.log(re) //{我: 2, 爱: 2, 你: 2, 吗: 1}

//高级用法2：数组去重
//补充：includes() 方法用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回 false
//原理：将迭代器设置为空数组，通过includes()判断pre（上一个回调函数的返回值中）是否有该元素，有就拼接到pre中，没有就将本次pre直接返回出去
const arr = [1, 3, 2, 5, 3, 4, 1]
const re = arr.reduce((pre, item) => {
    if (!pre.includes(item)) {
        return pre.concat(item)
    } else {
        return pre
    }
}, [])
console.log(re) //[1, 3, 2, 5, 4]


//高级用法3：扁平数组
//1)二维数组----->一维数组
const arr=[[1,2],[2,3]]
const re=arr.reduce((pre,item)=>{
    return pre.concat(item)
},[])
console.log(re)  //[1, 2, 2, 3]
//2.多维数组------>一维数组 
//原理：遍历数组中每个元素，判断其是否为数组，如果是数组，就在判断其内部元素，以此类推，如果不是数组，就拼接返回出去
 function fn(arr){
   return arr.reduce((pre,item)=>{
      return pre.concat(Array.isArray(item)?fn(item):item)
   },[])
  }
  const re=fn( [[1, [2, 8]], [3, 4, 9], [5, [6, 10]]])
  console.log(re);//[1, 2, 8, 3, 4, 9, 5, 6, 10]


//高级用法4：引用数据类型求和
 const arr = [{ value: 1 }, { value: 2 }, { value: 3 }]
 const re = arr.reduce((pre, item) => {
     return pre + item.value
 }, 0)
 console.log(re)//6

21. reduceRight()

同reduce(),只不过是item是从右向左

const arr = [1, 2, 3]
const re = arr.reduceRight((pre, item) => {
    console.log(pre, item)
    return pre + item
}, 0)
console.log(re)
//输出结果
//0 3
//3 2
//5 1
//6

22. includes()

作用：判断一个数组是否包含一个指定的元素，返回值true或false,不会改变原数组

 let arr = [1, 2, 3]
 console.log(arr.includes(3)) //true
 console.log(arr.includes(4)) //false

23. Array.form()

作用：将伪数组(类数组)、迭代对象，创建一个新的浅拷贝的数组实例，返回值一个新的数组实例

伪数组：

1. 拥有length属性，可以获取长度;
2. 有元素可索引，可以获取元素值
3. 但是不可以使用数组的内置方法（push() 、map()）。

常见的伪数组：arguments、Element NodeList

//用途1：将伪数组转换为真数组
function fn() {
    return Array.from(arguments).push(4)
}
const re = fn(1, 2, 3)
console.log(re) //4

//用途2：浅克隆一个数组
const arr = [1, 2, 3]
const re = Array.from(arr)
console.log(re) //[1,2,3]
console.log(arr === re)  //false

//用途3：数组去重
//补充:从一个数据集合中按照一定顺序不断取数据的过程叫做迭代
//Set()集合会删除重复项，因为Set是可迭代的，所以可以用Array.from()将其转换为一个新数组
const arr = Array.from(new Set([1, 1, 2, 3, 4, 3]))
console.log(arr) //[1, 2, 3, 4]

24. find()

作用：遍历数组，从头开始查找出现的目标元素

返回值：数组中满足提供的测试函数的第一个元素的值。否则返回 undefined

说明：find（）找到满足条件直接退出，若要进行统计字符串出现的字数，可以设置一个循环

//快速查找目标元素
 const re = [1, 2, 3, 4].find(item => item > 1)
 console.log(re) //2
console.log([1, 2, 3, 4].find(item => item > 4))//undefined

//快速查找数组中的对象
 const arr = [{ id: 1, name: '小峰' },{ id: 2, name: '小章' },]
 const re = arr.find(item => item.id === 1)
 console.log(re)  //{id: 1, name: '小峰'}

25. findIndex()

作用：遍历数组，从头开始查找出现的目标元素，返回满足条件的第一个元素下标，找不到返回-1

返回值：数组满足条件的第一个元素下标，找不到返回-1

indexOf()和findIndex()

相同点：返回值一样

不同点：indexOf(ES5):查找值作为第一个参数，findIndex(ES6): 比较函数作为第一个参数

//findIndex()和indexOf()
const re = [1, 2, 3, 4].findIndex(item => item > 2)
console.log(re) //2 (第一个满足条件的索引)
console.log([1, 2, 3, 4].indexOf(3)) //2 (查找到第一个元素为3的索引)

//快速查找数组满足条件的索引
 const arr = [{ id: 1, name: '小峰' },{ id: 2, name: '小王' },]
 const res = arr.findIndex(item => item.id === 1)
 console.log(res) //0

26. fill()

作用：

返回值：修改后的数组

参数：

value(必选)：填充的值。

start (可选):开始填充的位置，默认值为 0。

end( 可选):停止填充的位置，默认值为 arr.length

console.log([1, 2, 3].fill(4)) //[4,4,4]
console.log([1, 2, 3].fill(4, 1)) //[1,4,4]
console.log([1, 2, 3].fill(4, 1, 2)) //[1,4,3]
console.log([1, 2, 3].fill(4, 1, 1)) //[1,2,3]
console.log([1, 2, 3].fill(4, -3, -2)) //[4,2,3]
console.log([1, 2, 3].fill(4, -2, -3)) //[1,2,3]

27. flat()

作用：将嵌套的数组“拉平”，变成一维数组，

默认拉平一次，填写参数(需要拉平的次数)，如果原数组有空位，flat()方法会跳过空位。

返回值：处理后的新数组

//如果原数组有空位，flat()方法会跳过空位
console.log([1, 2, , 4, 5].flat())  // [1, 2, 4, 5]

//拉平一次和拉平两次
const arr = [1, 2, [3, 4, [5]]]
console.log(arr.flat()) // [1, 2, 3, 4, Array(1)] 默认拉平一次
console.log(arr.flat()) //[1, 2, 3, 4, 5] 手动拉平两次

28. floatMap()

作用：float()和map()的组合版，先通过map()返回一个新数组，在将数组拉平（这个只能拉平一次）

const arr = [1, 2, 3].flatMap(item => [item, item * 2])
console.log(arr) // [1, 2, 2, 4, 3, 6]
//执行过程：
//1. 先执行map()-------->[[1,1*2],[2,2*2],[3,3*2]]
//2. 在执行flat()拉平--->【1，2，2，4，3，6]