27个JavaScript数组常见方法汇总与实例说明

1. push()

• 概括：数组末位增加
• 参数：需要增加的数据
• 返回值：数组更新后的长度

 let arr = [1,2,3]
 arr.push(1) // 返回新增后的数组长度 4
 arr.push() // 不传参数默认不新增 4
 arr.push(1,2,3) // 新增多条数据时，返回新增完成后的数组长度 7

2. pop()

• 概括：数组末位删除
• 参数：无
• 返回值：删除的数据

 let arr = [3]
 arr.pop() // 返回已删除的数据 3
 arr.pop() // 当数组数据为空时，返回 undefined

3. unshift()

• 概括：数组首位新增
• 参数：需要新增的数据
• 返回值：数组的长度

 let arr = [1,2,3]
 arr.unshift(1) // 返回新增后的数组长度 4
 arr.unshift() // 不传参数默认不新增 4
 arr.unshift(1,2,4) // 新增多条数据时，返回新增完成后的数组长度 7

4. shift()

• 概括：数组首位删除
• 参数：无
• 返回值：数组的长度

 let arr = [3]
 arr.shift() // 返回已删除的数据 3
 arr.shift() // 当数组数据为空时，返回 undefined

5. reverse()

• 概括：反转数组
• 参数：无
• 返回值：会将原数组修改成反转之后的数组

 let arr = [1,2,3]
 arr.reverse() // 返回反转之后的数组 [3,2,1]

 let arr = []
 arr.reverse() // 当数组数据为空时返回 []

6. sort()

• 概括：将数组进行排序
• 参数：排序函数

 // 当参数1 - 参数2时，为正序
 function justSort(a,b) {
    return a-b
 }

 // 当 参数2 - 参数1 时，为倒序
 function backSort(a,b) {
    return b-a
 }

• 返回值：排序后的数组

 let arr = [1,2,3]
 arr.sort() // 不传参默认通过Unicode（万国码）进行排序 [1,2,3]
 arr.sort(backSort) // 通过排序函数进行排序 [3,2,1]

7. join()

• 概括：将数组转化成字符串
• 参数：根据指定字符（可用空字符串）进行转化
• 返回值：返回转化成字符串后的字符串

 let arr = [1,2,3]
 arr.join() // 不传参默认根据逗号进行转化 1,2,3
 arr.join('') // 根据空字符串进行转化 123
 arr.join(',') // 根据逗号进行转化 1,2,3

8. splice()

• 概括：删除并替换指定单元的数据
• 参数：该方法默认有几种传参情况
  • 一个参数：数组中保留几位，其余删除
  • 两个参数：参数1（开始索引）、参数2（删除个数）
  • 三个参数：参数1（开始索引）、参数2（删除个数）、参数3+（插入的数据，第三个参数以后可以传多个参数）
• 返回值：已删除的数组数据

 let arr = [1,2,3,4]
 arr.splice() // 不传参默认不删除不插入，返回空数组 []
 arr.splice(3) // 数组中默认保留3位数据, 返回删除后的数据 [4]
 arr.splice(0,1) // 从数组首位删除一条数据 [1]
 arr.splice(0,1,9) // 从首位删除一条数据，并插入一条数据 [2]
 arr.splice(0,1,9,8,7,6,5,4,3,2,1) // 从首位删除一条数据并插入多条数据（参数3之后的为插入 [9]

9. slice()

• 概括：截取并拷贝出子数组
• 参数：两个参数
  • 参数1：起始位置，不传参数2默认截取起始位置之后的数据
  • 参数2：结束位置前一位
• 返回值：截取的数组

 let arr = [1,2,3,4]
 arr.slice() // 不传参默认截取全部 [1,2,3,4]
 arr.slice(1) // 从索引为1的位置默认截取到末尾 [2,3,4]
 arr.slice(1,3) // 从索引为1的位置截取到索引为3的位置前一位 [2,3]

10. concat()

• 概括：将数据合并到新数组中并返回
• 参数：参数1+（参数可以设置多个，每个参数都将合并到原数组中，如果入参是一个数组会将入参数据合并到原数组中）
• 返回值：合并后的新数组

 let arr = [1,2,3,4]
 arr.concat(5) // 会将入参数据合并到原数组中 [1,2,3,4,5]
 arr.concat(5,6,7,8) // 可以入参多条数据 [1,2,3,4,5,6,7,8]
 arr.concat([5,6,7,8]) // 可以入参数组进行合并，合并至原数组 [1,2,3,4,5,6,7,8]

11. indexOf()

• 概括：返回指定单元的索引
• 参数：参数1（要查找的数组数据），参数2（查找的起始位置）
• 返回值：找到指定数据返回索引，未找到返回 -1

 let arr = [1,2,3,4]
 arr.indexOf(3) // 查找数组中指定数据的下标 2
 arr.indexOf(5) // 未找到数组中指定数据 -1

12. forEach()

• 概括：遍历数组（需要配合函数使用）
• 参数（入参函数参数）：
  • 参数1：数组单元数据
  • 参数2：每个单元索引
  • 参数3：数组本身
• 返回值：undefined

 let arr = [1,2,3,4]
 arr.forEach((data,index,array) => {
     console.log(data) // 数组每个单元数据
     console.log(index) // 数组下标
     console.log(array) // 原数组本身
 })

13. map()

• 概括：遍历数据（进行映射）
• 参数（入参函数参数）：
  • 参数1：数组单元数据
  • 参数2：每个单元索引
  • 参数3：数组本身
• 返回值：返回映射后的新数组

  let arr = [1,2,3,4]
  arr.map((data,index,array) => {
      console.log(data) // 数组每个单元数据
      console.log(index) // 数组下标
      console.log(array) // 原数组本身
  })

14. filter()

• 概括：过滤数组（过滤出返回为true的数据）
• 参数（入参函数参数）：
  • 参数1：数组单元数据
  • 参数2：每个单元索引
  • 参数3：数组本身
• 返回值：返回过滤后的新数组

  let arr = [1,2,3,4]
  arr.filter((data,index,array) => {
      console.log(data) // 数组每个单元数据
      console.log(index) // 数组下标
      console.log(array) // 原数组本身
      return data == 1 // 过滤返回为true的数据
  })

15. some()

• 概括：检测数组（只要有一个数据符合条件时,返回true）
• 参数（入参函数参数）：
  • 参数1：数组单元数据
  • 参数2：每个单元索引
  • 参数3：数组本身
• 返回值：返回检测后的新数组

  let arr = [1,2,3,4]
  arr.some((data,index,array) => {
      console.log(data) // 数组每个单元数据
      console.log(index) // 数组下标
      console.log(array) // 原数组本身
      return data == 1 // 检测指定数据是否符合条件
  })

16. eveny()

• 概括：检测数组（只有数组中所有数据符合条件时,才返回true,否则反回false）
• 参数（入参函数参数）：
  • 参数1：数组单元数据
  • 参数2：每个单元索引
  • 参数3：数组本身
• 返回值：返回检测后的新数组

  let arr = [1,2,3,4]
  arr.eveny((data,index,array) => {
      console.log(data) // 数组每个单元数据
      console.log(index) // 数组下标
      console.log(array) // 原数组本身
      return data == 1 // 检测所有条件是否符合条件
  })

17. reduce()

• 概括：迭代数组所有项(累加器)
• 参数：两个参数
  • 参数1（入参函数参数）：回调函数（必选）
    • 回调参数1：上一次回调返回值，或者初始值（必选）
    • 回调参数2：数组中被处理的数据项（必选）
    • 回调参数3：数据项在数组中的索引（可选）
    • 回调参数4：原数组（可选）
  • 参数2：初始值（可选）
• 返回值：返回数组计算后的结果

 let arr = [1,2,3,4]
 arr.reduce((pre,data,index,array) => {
     console.log(pre) // 数组上一次计算结果，如果未计算则是初始值
     console.log(data) // 数组中被处理的数据项
     console.log(index) // 数据项在数组中的索引
     console.log(array) // 原数组
     return pre + data // 将每次累加结果进行累加下一项
 }, 0) // 设置遍历初始值

• 扩展用法：

• 计算数组中每个元素出现的次数

 let names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];
 let nameNum = names.reduce((pre,cur)=>{
    if(cur in pre){
       pre[cur]++
    }else{
       pre[cur] = 1
    }
    return pre
 },{})
 console.log(nameNum); //{Alice: 2, Bob: 1, Tiff: 1, Bruce: 1}

• 数组去重

 // 单数组去重
 let arr = [1,2,3,4,4,1]
 let newArr = arr.reduce((pre,cur)=>{
     if(!pre.includes(cur)){
       return pre.concat(cur)
     }else{
       return pre
     }
 },[])
 console.log(newArr);// [1, 2, 3, 4]

 // 数组对象去重
 let arr = [{a: 0, name: 'zhangsan'}, {b: 0, name: 'lisi'}]
 let Obj = {}
 person = person.reduce((cur,next) => {
    obj[next.id] ? "" : obj[next.id] = true && cur.push(next);
    return cur;
 },[])

• 将二维数组转化为一维数组

 let arr = [[0, 1], [2, 3], [4, 5]]
 let newArr = arr.reduce((pre,cur)=>{
     return pre.concat(cur)
 },[])
 console.log(newArr); // [0, 1, 2, 3, 4, 5]

• 将多维数组转化为一维数组

let arr = [[0, 1], [2, 3], [4,[5,6,7]]]
 const newArr = function(arr){
    return arr.reduce((pre,cur)=>{
        pre.concat(Array.isArray(cur) ? newArr(cur) : cur
    }),[])
 }
 console.log(newArr(arr)); // [0, 1, 2, 3, 4, 5, 6, 7]

• 对象里面属性求和

 var result = [
    {
        subject: 'math',
        score: 10
    },
    {
        subject: 'chinese',
        score: 20
    },
    {
        subject: 'english',
        score: 30
    }
 ];

 var sum = result.reduce(function(prev, cur) {
     return cur.score + prev;
 }, 0);
 console.log(sum) //60

18. reduceRight()

• 概括：迭代数组所有项（从右至左进行计算，同数组reduce方法）
• 参数：同数组的reduce方法参数
• 返回值：数组计算结果

 let arr = [1,2,3,4]
 arr.reduceRight((pre,data,index,array) => {
     console.log(pre) // 数组上一次计算结果，如果未计算则是初始值
     console.log(data) // 数组中被处理的数据项
     console.log(index) // 数据项在数组中的索引
     console.log(array) // 原数组
     return pre + data // 将每次累加结果进行累加下一项
 }, 0) // 设置遍历初始值

19. Array.from()

• 概括：将伪数组转化成数组，只要含length属性的都可转化成数组（ES6）
• 参数：需要转化的伪数组
• 返回值：转化后的数组

 let str = 'asdf'
 console.log(Array.from(str)) // 将字符串转化成数组 [a,s,d,f]

 let obj = {0:'a',1:'b',length:2}
 console.log(Array.from(obj))   // 含索引并length属性的对象也可以转化成数组 ['a', 'b']

20. Array.of()

• 概括：将一组值转化成数组，类似于生明数组（ES6）
• 参数：需要转化的值
• 返回值：转化后的数组

 console.log(Array.of('11')) // 将字符串转化成数组 ['11']
 console.log(Array.of({a:1,b:2})) // 将对象转化成数组 [{a:1,b:2}]
 console.log(new Array('11')) // 类似于构造函数声明数组
 console.log(new Array(2)) // 构造函数生明因为入参问题容易容易引起重载  [empty × 2] 空数组

21. copyWithin()

• 概括：在数组内部将指定位置的数组赋值到其他位置，会覆盖原数组项，返回当前数组
• 参数：三个参数
  • 参数1：开始位置，从该位置开始替换数组项（必传）
  • 参数2：从指定索引开始读取数组项，默认为0，如果为负值，则从右往左读（可选）
  • 参数3：从指定索引结束读取数组项，默认为数组长度，如果是负值表示倒数（可选）
• 返回值：处理好的数组

 let arr = [1,2,3,4,5]
 arr.copyWithin(3) // 从下标3的位置上开始，默认将整个数组作为数据项进行替换，长度不够默认截取 [1, 2, 3, 1, 2]
 arr.copyWithin(0, 2) // 从下标为0位置开始，默认将从下标2位置截取到末尾作为数据项进行替换，长度不够默认截取  [3, 4, 5, 4, 5]
 arr.copyWithin(0, 2, 3) // 从下标0位置开始，默认将从下标2位置截取到下标3位置之前作为数据项进行替换，长度不够默认截取 [3, 2, 3, 4, 5]

 arr.copyWithin(-1) // 从倒数倒数第一位开始，默认将整个数组作为数据项进行替换，长度不够默认截取 [1, 2, 3, 4, 1]
 arr.copyWithin(-1, -2) // 从倒数第一位置开始，默认将从倒数第二位置默认截取到末尾作为数据项进项替换，长度不够默认截取 [1, 2, 3, 4, 4]
 arr.copyWithin(-1, -4, -2) // 从倒数第一位置开始，默认将从倒数第四的位置开始截取到倒数第二的位置作为数据项项进项替换，长度不够默认截取 [1, 2, 3, 4, 2]

22. find()

• 概括：找到第一个符合条件的数组数据项
• 参数（入参函数参数）：
  • 参数1：数组数据项
  • 参数2：数据项下标
  • 参数3：原数组
• 返回值：符合条件的数组数据项

 let arr = [1,2,3,4,5]
 arr.find((item, index, array) => {
     console.log(item) // 数组数据项
     console.log(index) // 数据项下标
     console.log(array) // 原数组
     return item > 1 // 此条件不会校验数组所有数据项，只会校验第一条符合条件的数据
 })

23. findIndex()

• 概括：找到第一个符合条件的数组数据项下标
• 参数（入参函数参数）：同数组find方法
• 返回值：符合条件数据项下标

 let arr = [1,2,3,4,5]
 arr.findIndex((item, index, array) => {
     console.log(item) // 数组数据项
     console.log(index) // 数据项下标
     console.log(array) // 原数组
     return item > 1 // 此条件不会校验数组所有数据项，只会校验第一条符合条件的数据
 })

24. fill()

• 概括：使用指定值填充整个数组
• 参数：
  • 参数1：待填充的数据
  • 参数2：开始填充的位置
  • 参数3：结束填充的位置（该位置前一位）
• 返回值：填充后的数组

 let arr = [1,2,3,4]
 arr.fill(1) // 默认将数组所有项填充成该数据 [1,1,1,1]
 arr.fill(1,2) // 以参数1为填充项，将数据从坐标为2位置开始填充至数组末尾 [1,2,1,1]
 arr.fill(1,2,4) // 以参数1为填充项，将是数据从坐标2位置开始填充至下标为4位置 [1,2,1,4]

25. keys()

• 概括：遍历数组的键名（一般针对于Set、Map数据集合使用）
• 参数：无
• 返回值：在日志层面显示Array Iterator {}（数组迭代器），在数据层面显示数组下标

 let arr = [1,2,3,4]
 let arr2 = arr.keys()
 console.log(arr2) // Array Iterator {}

 for (let key of arr2) {
    console.log(key);   // 0,1,2,3
 }

26. value()

• 概括：遍历数组键名（一般针对于Set、Map数据集合使用）
• 参数：无
• 返回值：在日志层面显示Array Iterator {}（数组迭代器），在数据层面显示数组每个数据项

 let arr = [1,2,3,4]
 let arr2 = arr.value()
 console.log(arr2) // Array Iterator {}

 for (let val of arr2) {
    console.log(val);   // 1,2,3,4
 }

27. entries()

• 概括：遍历数组的键值和键名（迭代数组，一般针对于Set、Map数据集合使用）
• 参数：无
• 返回值：在日志层面显示Array Iterator {}（数组迭代器），在数据层面显示数组每个单元的数据项和下标作为一个数组

 let arr = [1,2,3,4]
 let arr1 = arr.entries()
 console.log(arr1) // Array Iterator {}

 for (let e of arr1) {
     console.log(e);   // [0,1] [1,2] [2,3] [3,4]
 }

总结

• 变异方法（改变原数组方法）：
  push()、pop()、unshift()、shift()、reverse()、sort() 、copyWithin()、fill()
• 非变异方法（不改变原数组方法）：
  join()、splice()、slice()、concat()、indexOf()、forEach()、map()、filter()、some()、eveny()、reduce()、reduceRight()、find()、findIndex()、keys()、value()、entries()
• ES6新增方法：
  find()、findIndex()、includes()、keys()、values()、entries()、fill()、Array.of()、copyWithin()、Array.from()、reduce()、reduceRight()、filter()、map()

本文件为大家讲了27个JavaScript数组常见方法汇总并配上了源码实例，更多关于JS数组操作请查看下面的相关链接