JavaScript中数组常用的24种方法详细汇总（超级详细！！）

数组常用方法：

就是 JS 自带一些操作数组得方法

数组常用方法得使用格式, 必须是数组.xxx()

数组和伪数组得区别

length 和索引都一样, 循环遍历都一样，长得也一样，唯独数组常用方法, 伪数组用不了

数组常用方法总结

01_数组常用方法

=> 数组基础方法

=> push()

=> pop()

=> unshift()

=> shift()

1. push()

=> 语法: 数组.push(数据1, 数据2, 数据3, …)

=> 作用: 把所有得参数按照顺序追加到数组得末尾位置

=> 返回值: 追加以后数组的长度

=> 直接操作原始数组

// 1. push()
    var arr = ['hello', 'world', '你好', '世界']
    var res = arr.push('新来的', '新来的2', [10, 20], 1)
    console.log(res) // 8  代表的就是arr的长度
    console.log(arr)
            // 0: "hello"
            // 1: "world"
            // 2: "你好"
            // 3: "世界"
            // 4: "新来的"
            // 5: "新来的2"
            // 6: (2) [10, 20]
            // 7: 1
            // length: 8

2. pop()

=> 语法: 数组.pop()

=> 作用: 删除数组得最后一个数据

=> 返回值: 被删除得数据

=> 直接操作原始数组

// 2. pop()
    var arr = ['hello', 'world', '你好', '世界']
    var res = arr.pop()
    console.log(res) // 世界
    console.log(arr)
    // 0: "hello"
    // 1: "world"
    // 2: "你好"
    // length: 3

3. unshift()

=> 语法: 数组.unshift(数据1, 数据2, 数据3, …)

=> 作用: 从数组得最前面插入一些数据

=> 返回值: 插入后得数组长度

=> 直接操作原始数组

// 3. unshift()
    var arr = ['hello', 'world', '你好', '世界']
    var res = arr.unshift('新来的', '新来的2')
    console.log(res) //6
    console.log(arr)
    // 0: "新来的"
    // 1: "新来的2"
    // 2: "hello"
    // 3: "world"
    // 4: "你好"
    // 5: "世界"
    // length: 6

4. shift()

=> 语法: 数组.shift()

=> 作用: 删除数组得最前面一个数据

=> 返回值: 被删除得数据

=> 直接操作原始数组

// 4. shift()
    var arr = ['hello', 'world', '你好', '世界']
    var res = arr.shift()
    console.log(res) //hello
    console.log(arr)
    // 0: "world"
    // 1: "你好"
    // 2: "世界"
    // length: 3

02_数组常用方法

=> ES3.0, IE 6 7 8 可以使用

=> reverse()

=> sort()

=> splice()

=> join()

=> slice()

=> concat()

5. reverse()

=> 语法: 数组.reverse()

=> 作用: 反转数组

=> 返回值: 反转后得数组

=> 直接操作原始数组

// 5. reverse()
    var arr = ['hello', 'world', '你好', '世界']
    var res = arr.reverse()
    console.log(res) //['世界', '你好', 'world', 'hello']
    console.log(arr) //['世界', '你好', 'world', 'hello']

6. sort()

=> 语法:

1. arr.sort()

-> 按照每一个数据中得每一位数据得 ASCII 码进行排列

2. arr.sort(function (a, b) { return a - b })

-> 升序排列

3. arr.sort(function (a, b) { return b - a })

-> 降序排列

=> 作用: 数组排序

=> 返回值: 排序后得数组

=> 直接操作原始数组

// 6. sort()
    var arr = [1, 11, 33, 26, 51, 19, 32, 27, 15, 100]
    var res = arr.sort()
    console.log(res) // [1, 100, 11, 15, 19, 26, 27, 32, 33, 51]
    console.log(arr) // [1, 100, 11, 15, 19, 26, 27, 32, 33, 51]
 
    var res = arr.sort(function (a, b) { return a - b })
    console.log(res) //[1, 11, 15, 19, 26, 27, 32, 33, 51, 100]
    console.log(arr) //[1, 11, 15, 19, 26, 27, 32, 33, 51, 100]
    //可以使用箭头函数
    //arr.sort((a, b) => a - b)
    
 
    var res = arr.sort(function (a, b) { return b - a })
    console.log(res) //[100, 51, 33, 32, 27, 26, 19, 15, 11, 1]
    console.log(arr) //[100, 51, 33, 32, 27, 26, 19, 15, 11, 1]

7.splice()

=> 语法:

数组.splice(开始索引, 多少个)

-> 从开始索引, 截取多少个

-> 第二个参数可以不写, 直接到末尾

数组.splice(开始索引, 多少个, 替换数据1, 替换数据2, 替换数据3, …)

-> 把替换数据按照顺序插入到你截取得位置

-> 注意: 从哪个索引开始删除, 替换数的第一个就插入哪个位置

=> 作用: 有两个

截取数组

替换新内容

=> 返回值: 一定是一个数组

-> 如果你截取多个数据, 数组里面有多个

-> 如果你截取一个数据, 数组里面有一个

-> 如果你一个都不截取, 那么是一个空数组

=> 直接操作原始数组

// 7. splice()
    var arr = ['hello', 'world', '你好', '世界']
    var res = arr.splice(1, 2)
    console.log('res: ', res) //res:  (2) ['world', '你好']
    console.log('arr: ', arr) //arr:  (2) ['hello', '世界']
 
 
    var res = arr.splice(1, 0, '新来的', '新来的2')
    console.log('res: ', res) // 空数组
    console.log('arr: ', arr) //['hello', '新来的', '新来的2', 'world', '你好', '世界']

8. concat()

=> 语法: 数组.concat(数组1, 数据2, …)

=> 作用:

-> 如果参数是数组, 那么把数组拆开, 里面每一项追加到原数组后面

-> 如果参数数数据, 那么直接追加

=> 返回值: 追加好得数组

=> 不改变原始数组

// 8. concat()
    var arr = ['hello', 'world', '你好', '世界', 1]
    var res = arr.concat([10, 20], [30, 40], 100)
    console.log(res) //['hello', 'world', '你好', '世界', 1, 10, 20, 30, 40, 100]
    console.log(arr) //['hello', 'world', '你好', '世界', 1]

9. slice()

=> 语法:

1. 数组.slice(开始索引, 结束索引) - 包前不包后

-> 第一个参数可以不写, 表示从头

-> 第二个参数可以不写, 表示到尾

2. 数组.slice(开始索引, 结束索引) - 包前不包后

-> 参数可以写一个负整数

-> 当你书写了一个负整数以后, 表示 length + 负整数

=> 作用: 获取数组里面得某些数据

=> 返回值: 一个数组

-> 如果你获取多个数据, 数组里面有多个

-> 如果你获取一个数据, 那么数组里面有一个

-> 如果你一个都不获取, 那么是个空数组

=> 不改变原始数组

// 9. slice()
    var arr = ['hello', 'world', '你好', '世界']
    var res = arr.slice(1, 3)
    console.log('res : ', res) //['world', '你好']
    console.log('arr : ', arr) //['hello', 'world', '你好', '世界']
 
    // 因为 length 是 4, -2 得位置实际上相当于 4 + -2, 2
    var res2 = arr.slice(1, -2)
    console.log('res2 : ', res2) //['world']
    console.log('arr : ', arr)//['hello', 'world', '你好', '世界']

10. join()

=> 语法: 数组.join(‘连接符号’)

-> 不传递, 是按照逗号(,) 连接

-> 你传递什么, 按照什么连接

=> 作用: 把数组里面得每一个数据使用连接符号连接在一起

=> 返回值: 是一个连接好得内容, 是一个 String 类型

不改变原始数组

// 10. join()
    var arr = ['hello', 'world', '你好', '世界']
    var res = arr.join('abcd')
    console.log(res) // helloabcdworldabcd你好abcd世界
    console.log(arr) //['hello', 'world', '你好', '世界']

03_数组常用方法

=> ES5.0, IE 6 7 8 不好使了

=> indexOf()

=> lastIndexOf()

=> forEach()

=> map()

=> fliter()

=> every()

=> some()

11. indexOf()

=> 语法:

1. 数组.indexOf(数据)

2. 数组.indexOf(数据, 开始索引)

-> 从哪个索引开始向后查找

=> 作用: 正向查看数组里面指定这个数据得索引

=> 返回值:

-> 如果有这个数据, 是第一个满足条件的数据的索引

-> 如果没有这个数据, 那么是 -1

// 11. indexOf()
    var arr = ['hello', 'world', '你好', '世界', 'hello']
    var res = arr.indexOf('hello')
    console.log(res) // 0
    console.log(arr) //['hello', 'world', '你好', '世界', 'hello']
 
 
    var res2 = arr.indexOf('hello', 1)
    console.log(res2)// 4
    console.log(arr)//['hello', 'world', '你好', '世界', 'hello']

12. lastIndexOf()

=> 语法:

1. 数组.lastIndexOf(数据)

2. 数组.lastIndexOf(数据, 开始索引)

-> 从哪一个索引开始向前查找

=> 作用: 反向查看数组里面指定这个数据得索引

=> 返回值:

-> 如果有, 就是找到得第一个数据得索引

-> 如果没有就是 -1

-> 注意: 虽然是从后向前查找, 但是索引还是正常索引

// 12. lastIndexOf()
    var arr = ['hello', 'world', '你好', '世界', 'hello']
    var res = arr.lastIndexOf('hello')
    console.log(res) // 4
    console.log(arr) //['hello', 'world', '你好', '世界', 'hello']
 
    var res2 = arr.lastIndexOf('hello', 3)
    console.log(res2)// 0

13. forEach()

=> 语法: 数组.forEach(function (item, index, arr) {})

-> item: 数组得每一项

-> index: 数组每一项得索引

-> arr: 原始数组

=> 作用: 取代 for 循环得作用, 遍历数组

=> 没有返回值

// 13. forEach()
    var arr = ['hello', 'world', '你好', '世界']
    var res = arr.forEach(function (item, index, arr) {
      // 这个函数, 会根据数组里面有多少个数据执行多少回
      // console.log('我执行了')
      // 这个函数每一次执行得时候, item 分别是数组里面得每一项
      // 这个函数每一次执行得时候, index 分别是数组里面得每一项得索引
      // 这个函数每一次执行得时候, arr 每一次都是原始数组
      console.log(item, '-----', index, '-----', arr)
      // hello ----- 0 ----- (4) ['hello', 'world', '你好', '世界']
      // world ----- 1 ----- (4) ['hello', 'world', '你好', '世界']
      // 你好 ----- 2 ----- (4) ['hello', 'world', '你好', '世界']
      // 世界 ----- 3 ----- (4) ['hello', 'world', '你好', '世界']
    })

14. map()

=> 语法: 数组.map(function (item, index, arr) {})

-> item: 数组得每一项

-> index: 数组每一项得索引

-> arr: 原始数组

=> 作用: 映射数组

=> 返回值: 是一个新的数组

-> 里面是对原始数组每一个数据得操作

-> 返回值数组, 一定和原始数组长度一样

=> 不改变原始数组

// 14. map()
    var arr = [10, 100, 1000]
    var res = arr.map(function (item, index, arr) {
      console.log(item, '-----', index, '-----', arr)
      // 10 '-----' 0 '-----' (3) [10, 100, 1000]
      // 100 '-----' 1 '-----' (3) [10, 100, 1000]
      // 1000 '-----' 2 '-----' (3) [10, 100, 1000]
      return item * 1.3
    })
 
    console.log(res) // [13, 130, 1300]
 
    /*
      map 底层封装
        1. 准备一个新的数组
        2. 遍历原始数组, 分别执行函数
        3. 把每依次函数执行候得返回值放在新数组里面
        4. 把新数组当作 map 得返回值给出来
    */
    
    // 我自己写的一个函数
    // 我要想用, 必须是 myMap(a, b, c)
    // 我为了可以想数组常用方法一样
    // 我需要把这个方法放在 Array.prototype 上
    function myMap(fn) {
      // fn 就是你调用 myMap 得时候传递得函数
      // this 就是调用 myMap 得那个数组
      // 只要我写 fn()
      // 如果我写 fn(1, 10, 100)
      // 都是在调用你书写 myMap 得时候传递得那个函数
      var newArr = []
      // this 是调用 myMap 得数组
      // 遍历调用 myMap 得数组
      for (var i = 0; i < this.length; i++) {
        // 这里得代码会根据数组得长度来执行
        // 在 for 循环里面, this[i] 就是数组得每一项
        // 在 for 循环里面, i 就是数组得每一项得索引
        var res = fn(this[i], i, this)
        newArr.push(res)
      }
      // 当循环结束, newArr 就是里面有三个数据, 分别是对原始数组每一个数据得操作
      return newArr
    }
 
    Array.prototype.myMap = myMap
    var res = arr.myMap(function (item, index, arr) {
      // console.log(item, index, arr)
      return item * 1.3
    })
 
    console.log(res) // [13, 130, 1300]

如果对于Map方法还想要更深入的了解，欢迎访问我的另外一篇博客

JavaScript中Map方法的详解_yjxkq99的博客-CSDN博客

15. filter()

=> 语法: 数组.filter(function (item, index, arr) {})

-> item: 数组得每一项

-> index: 数组每一项得索引

-> arr: 原始数组

=> 作用: 过滤原始数组中得数据, 把满足条件得放在新数组里面

=> 返回值: 新数组, 里面是所有原始数组中满足条件得项

=> 不改变原始数组

// 15. filter
    var arr = [10, 20, 30, 40, 50]
    var res = arr.filter(function (item, index, arr) {
      return item > 20
    })
    console.log(res) //[30, 40, 50]
 
    /*
      底层封装
        1. 准备一个新数组
        2. 循环遍历原始数组
          -> 数组有多少项, 函数执行多少回
          -> 每一回, 如果返回值是 true, 那么就把这一项放在新数组里面
          -> 如果返回值是 false, 那么就不把这一项放在新数组里面
        3. 把新数组当作 filter 得返回值
        newArr = [30, 40, 50]
        函数第一次执行
          => item === 10, return item > 20, return false
          => 10 这个数据就不放在新数组里面
        函数第二次执行
          => item === 20, return item > 20, return false
          => 20 这个数据就不放在新数组里面
        函数第三次执行
          => item === 30, return item > 20, return true
          => 把 30 放在新数组里面
        函数第四次执行
          => item === 40, return item > 20, return true
          => 把 40 放在新数组里面
        函数第五次执行
          => item === 50, return item > 20, return true
          => 把 50 放在新数组里面
        循环结束
        把 newArr 当作 filter 方法得返回值给你
    */

16. every()

=> 语法: 数组.every(function (item, index, arr) {})

-> item: 数组得每一项

-> index: 数组每一项得索引

-> arr: 原始数组

=> 作用: 判断原始数组里面是不是每一个都满足条件

=> 返回值: 是一个布尔值

-> 如果原始数组中每一个都满足条件, 那么返回 true

-> 只要原始数组中有任意一个不满足条件, 那么就返回 false

// 16. every()
    var arr = [10, 20, 30, 40, 50]
    var res = arr.every(function (item, index, arr) {
      console.log(item, index, arr)
      // 10 0 (5) [10, 20, 30, 40, 50]
      // 20 1 (5) [10, 20, 30, 40, 50]
      // 30 2 (5) [10, 20, 30, 40, 50]
      // 40 3 (5) [10, 20, 30, 40, 50]
      return item < 40
    })
    console.log(res) //false
 
    /*
      底层原理
        1. 假设一个变量为 true, 表示所有数据都满足条件
        2. 循环遍历数组
          => 执行传递进来得函数
          => 如果函数返回得是 true, 那么循环继续
          => 如果函数返回的是 false, 那么把我的假设改成 false, 结束循环
        3. 循环结束以后, 把我的假设当作 every 得返回值
      var flag = false
        函数第一次执行
          item === 10, return item < 40, return true
          什么也不做, 循环继续
        函数第二次执行
          item === 20, return item < 40, return true
          什么也不做, 循环继续
        函数第三次执行
          item === 30, return item < 40, return true
          什么也不做, 循环继续
        函数第四次执行
          item === 40, return item < 40, return false
          把 flag 赋值为 false
          break 结束循环
      循环结束以后
      把 flag 得值返回
    */

17. some()

=> 语法: 数组.some(function (item, index, arr) {})

-> item: 数组得每一项

-> index: 数组每一项得索引

-> arr: 原始数组

=> 作用: 判断数组中是不是有某一个满足条件

=> 返回值: 一个布尔值

-> 如果数组中有任意一个数据满足条件, 那么返回 true

-> 如果数组中所有数据都不满足条件, 那么返回 false

// 17. some()
    var arr = [10, 20, 30, 40, 50]
    var res = arr.some(function (item, index, arr) {
      console.log(item, index, arr)
      // 10 0 (5) [10, 20, 30, 40, 50]
      // 20 1 (5) [10, 20, 30, 40, 50]
      return item > 10
    })
    console.log(res) //true
 
    /*
      底层原理
        1. 准备一个假设变量, 赋值为 false, 表示所有得都不满足条件
        2. 循环遍历数组
          => 执行传递进来得函数
          => 如果函数返回得是 false, 那么什么也不做, 循环继续
          => 如果函数返回得是 true, 那么结束循环, 改变假设变量
        3. 在循环结束以后, 把假设变量当作 some 得返回值
      var flag = true
        函数第一次执行
          item === 10, return item > 10, return false
          什么也不做, 循环继续
        函数第二次执行
          item === 20, return item > 10, return true
          把 flag 赋值为 true
          break 结束循环
      循环结束后, 把 flag 得值当作 some 方法得返回值
    */

04_数组常用方法

=> ES2015(ES6) 以后, 标准浏览器, IE 10 以上

=> fill()

=> copyWithin()

=> includes()

=> flat()

=> flatMap()

=> find()

=> findIndex()

18. copyWithin()

=> 语法: 数组.copyWithin(目标位置, 开始索引, 结束索引)

-> 目标位置: 当你替换内容得时候, 从哪一个索引位置开始替换

-> 开始索引: 数组哪一个索引位置开始当作替换内容, 默认值是 0

-> 结束索引: 数组哪一个索引位置结束当作替换内容, 默认是末尾

-> 包前不包后

=> 作用: 使用数组里面得内容替换数组里面得内容

=> 返回值: 是一个新的数组

-> 替换后得数组

// 18. copyWithin()
    var arr = [100, 200, 300, 400, 500]
    // 第一个参数 0, 表示不管将来我用什么东西替换, 都从 0 位置开始替换
    //    例子: 比如我要用 'a', 'b', 'c' 来替换, 从索引 [0] 开始替换
    var res = arr.copyWithin(0)
    console.log(res) // [100, 200, 300, 400, 500]
 
    // 第二个参数 3, 表示原始数组索引 [3] 位置开始向后查找
    // 因为没有写第三个参数, 默认到末尾
    // 找到得就是 400 和 500
    // 把 400 和 500 两个数据从 [0] 开始替换
    var res = arr.copyWithin(0, 3)
    console.log(res)//[400, 500, 300, 400, 500]
 
    // 第三个参数 4, 表示原始数组索引 [4] 位置结束查找
    // 找到的就是 [3] 开始 [4] 结束, 包前不包后, 找到得就是 400
    // 把 400 从 0 开始替换
    var res = arr.copyWithin(0, 3, 4)
    console.log(res) //[400, 200, 300, 400, 500]

19. fill()

=> 语法: 数组.fill(要填充得数据, 开始索引, 结束索引)

-> 要填充得数据: 你想用什么数据填充数组里面每一位

-> 开始索引: 从哪一个索引开始填充, 默认值是 0

-> 结束索引: 填充到哪一个索引位置, 默认值是末尾

-> 前提: 数组要有 length

-> 包前不包后

=> 作用: 使用指定数据区填充数组

=> 返回值: 填充好得数组

// 19. fill()
    var arr = new Array(30)
    // 使用 '填充内容' 去把数组填满
    var res = arr.fill('填充内容')
    console.log(res)
    //['填充内容', '填充内容', '填充内容', '填充内容', '填充内容', '填充内容', '填充内容', '填充内容', '填充内容', '填充内容', '填充内容', '填充内容', '填充内容', '填充内容', '填充内容', '填充内容', '填充内容', '填充内容', '填充内容', '填充内容', '填充内容', '填充内容', '填充内容', '填充内容', '填充内容', '填充内容', '填充内容', '填充内容', '填充内容', '填充内容']
 
    // 使用 '填充内容' 从 [5] 开始填充数组, 填充到末尾
    var res = arr.fill('填充内容', 5)
    console.log(res)
    // [空属性 × 5, '填充内容', '填充内容', '填充内容', '填充内容', '填充内容', '填充内容', '填充内容', '填充内容', '填充内容', '填充内容', '填充内容', '填充内容', '填充内容', '填充内容', '填充内容', '填充内容', '填充内容', '填充内容', '填充内容', '填充内容', '填充内容', '填充内容', '填充内容', '填充内容', '填充内容']
 
    // 使用 '填充内容' 从 [5] 开始填充到数组 [25]
    var res = arr.fill('填充内容', 5, 25)
    console.log(res)
    // [空属性 × 5, '填充内容', '填充内容', '填充内容', '填充内容', '填充内容', '填充内容', '填充内容', '填充内容', '填充内容', '填充内容', '填充内容', '填充内容', '填充内容', '填充内容', '填充内容', '填充内容', '填充内容', '填充内容', '填充内容', '填充内容', 空属性 × 5]

20. includes()

=> 语法: 数组.includes(数据)

=> 作用: 查看数组中是不是有某一个数据

=> 返回值: 一个布尔值

-> 有这个数据, 就是 true

-> 没有这个数据, 就是 false

// 20. includes()
    var arr = [10, 20, 30, 40, 50]
    var res = arr.includes(50)
    console.log(res)//true

21. flat()

=> 语法: 数组.flat(数字)

-> 数字: 表示扁平化多少层, 默认是 1

-> 数字这个参数还可以填写 Infinity（无限）

=> 作用: 拍平数组

=> 返回值: 拍平以后得数组

// 21. flat()
    var arr = [
      10, 20, 30,
      [40, 50],
      [60, 70, [80, [90, [100, [100, [120]]]]]]
    ]
    // var res = arr.flat() //[10, 20, 30, 40, 50, 60, 70, Array(2)]
    // var res = arr.flat(2) // [10, 20, 30, 40, 50, 60, 70, 80, Array(2)]
    // var res = arr.flat(3) // [10, 20, 30, 40, 50, 60, 70, 80, 90, Array(2)]
    // var res = arr.flat(4) // [10, 20, 30, 40, 50, 60, 70, 80, 90, 100, Array(2)]
    var res = arr.flat(Infinity) // [10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 120]
    console.log(res)

22. flatMap()

=> 语法: 数组.flatMap(function (item, index, arr) {})

=> 作用: 拍平数组, 但是只能拍一层

=> 返回值: 是一个新的数组

-> 一边拍平, 一边映射

// 22. flatMap()
    var arr = [[10, 21, 30], [40, 51, 60]]
    var res = arr.flatMap(function (item) {
      return item.filter(function (item) { return item % 2 === 0 })
    })
    console.log(res) // [10, 30, 40, 60]

23. find()

=> 语法: 数组.find(function (item) {})

=> 作用: 根据条件找到数组里面满足条件得数据

=> 返回值: 找到得那个数据

只返回第一个

// 23. find()
    var arr = [10, 20, 30, 40, 50]
    var res = arr.find(function (item) {
      return item > 20
    })
    console.log(res) // 30

24. findIndex()

=> 语法: 数组.findIndex(function (item) {})

=> 作用: 根据条件找到数组里面满足条件得数据

=> 返回值: 找到得那个数据得索引

只返回第一个

// 24. findIndex()
    var arr = [10, 20, 30, 40, 50]
    var res2 = arr.findIndex(function (item) {
      return item > 20
    })
    console.log(res2)