数组常用方法

数组常用方法

改变原始数组

1.push()

​ （1） 后面追加

​ （2） 返回值: 追加后数组最新的长度

​ （3） 语法：数组.push(数据)

var res = arr.push('新来的')
     var res = arr.push('新来的', 100, 200)
     console.log('追加以后 : ', arr)
     console.log('返回值 : ', res)

2. pop()

​ （1）后面删除

​ （2） 返回值: 被删除的数据

​ （3） 语法：数组.pop(数据)

var res = arr.pop()
     console.log('删除以后 : ', arr)
     console.log('返回值 : ', res)

3. unshift()

​ （1） 前面添加

​ （2）返回值: 添加后数组最新的长度

​ （3） 语法：数组.unshift(数据)

var res = arr.unshift()
     console.log('添加以后:’, arr)
     console.log('返回值:', res)            

4. shift()

​ (1) 前面删除

​ (2) 返回值: 被删除的数据

​ (3) 语法：数组.shift(数据)

var res = arr.shift()
console.log('删除之后:' ,arr)
console.log('返回值:' ,res)

5. reverse()

​ （1） 数组反转

​ （2） 返回值: 反转后的数组

​ （3） 语法：数组.reverse( )

var arr = [ 1, 6, 4, 2, 9, 5, 7, 3, 8, 11, 22, 17, 10, 35, 21, 100 ]
    console.log('原始数组 : ', arr)
var res = arr.reverse()
console.log('反转之后:', arr)
console.log('返回值:', res)

6.sort()

​ 语法：

​ (1) 数组.sort() ASCII

​ (2) 数组.sort(function (a, b) { return a - b }) 升序

​ (3) 数组.sort(function (a, b) { return b - a }) 降序

​ 作用： 数组排序

​ 返回值: 排序后的数组

var arr = [ 1, 6, 4, 2, 9, 5, 7, 3, 8, 11, 22, 17, 10, 35, 21, 100 ]
    console.log('原始数组 : ', arr)
    //语法1:
     var res = arr.sort()
     console.log('排序之后 : ', arr)
    // 语法2:
     var res = arr.sort(function (a, b) { return a - b })
     console.log('排序之后 : ', arr)
    语法3:
     var res = arr.sort(function (a, b) { return b - a })
     console.log('排序之后 : ', arr)
     console.log('返回值: ', res)

7. splice()

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

​ (2) 数组.splice(开始索引, 多少个, 插入数据)

​ (3) 数组截取并选择性的插入数据, 注意: 从哪里删除, 从哪里插入

​ (4) 返回值: 一个新的数组, 存储的是截取出来的所有内容

var arr = [ 100, 200, 300, 400, 500, 600 ]
    //           0    1    2    3    4    5
    console.log('原始数组 : ', arr)
    // 语法1:
    // 从 [2] 开始截取 3 个 数据
     var res = arr.splice(2, 3)
     console.log('截取之后 : ', arr)
     console.log('返回值 : ', res)

    // 语法2:
    // 从 [2] 开始截取 1 个数据, 把 '新来的' 插入到 [2] 位置
     var res = arr.splice(2, 1, '新来的')

    // 从 [2] 开始截取 0 个数据, 把 '新来的' 插入到 [2] 位置, 从原先的 [2] 位置数据向后顺延
     var res = arr.splice(2, 0, '新来的')

    // 从 [2] 开始截取 1 个数据, 把 ''新来的', '又一个', '还一个' 按照顺序插入到 [2] [3] [4] 的位置, 其余的向后顺延
    var res = arr.splice(2, 1, '新来的', '又一个', '还一个')
    console.log('截取之后 : ', arr)
    console.log('返回值 : ', res)

不改变原始数组

8.concat()

​ （1） 拼接数组

​ （2） 返回值: 拼接好的新数组

​ （3） 语法： 数组.concat(数组，数据，数组)

 var arr = [ 10, 20, 30 ]
     console.log(arr)
     var a2 = [ 40, 50, 60 ]
     var a3 = [ 70, 80, 90 ]
     var res = arr.concat(a2, a3)
      console.log(arr)
     console.log(res)

9.join(连接符)

​ （1） 使用连接符连接数组内的每一项

（ 2 ） 返回值: 一个字符串类型, 使用连接符连接好的内容

​ （3） 语法：数组.join(连接符号)

​ 连接符号如果不写，默认使用’ ， ‘

 var arr = [ 2022, 2, 28 ]
     console.log(arr)
     var res = arr.join('^_^')
     console.log(arr)
     console.log(res)
     console.log(typeof res)

10.slice()

​ 1. 数组.slice(开始索引, 结束索引)

​ （1） 特点1: 包前不包后

​ (2) 特点2: 可以填写负整数

​ 2. 截取数组内的内容

​ 3.返回值: 一个新的数组, 数组内存储的是截取出来的内容

var arr = [ 10, 20, 30, 40, 50, 60, [70] ]
    // //          0   1   2   3   4   5
     console.log('原始数组 : ', arr)
    // // 从 [2] 截取到 [5], 包含 [2] 不包含 [5]
     var res = arr.slice(2, 5)
    // // 从 [1] 截取到 [-1], 这里的 [-1] 等价于 arr.length + -1
     var res = arr.slice(1, -1)
     var res = arr.slice()
     console.log(arr)
     console.log('返回值 : ', res)

     arr[2] = '修改一下'
     console.log(arr)
     console.log(res)

11.indexOf()

语法：数组.indexOf（要查找的数据）

​ 数组.indexOf( 要查找的数据，开始索引)

作用： 从前向后检索数据出现的索引位置

返回值: 如果有这个数据, 就是第一次出现的索引位置, 如果没有这个数据, 就是 -1

var arr = [ 10, 20, 30, 20, 10, 20, 30 ]
     console.log('原始数组 : ', arr)
     var res = arr.indexOf(20)
    // // 从 [2] 位置开始向后检索
     var res = arr.indexOf(20, 2)
     console.log(res)

12. lastIndexOf()

语法：数组.lastIndexOf( 要查找的数据)

​ 数组.lastIndexOf( 要查找的数据，开始索引)

作用： 从后向前检索数据出现的索引位置

返回值: 如果有这个数据, 就是第一次出现的索引位置, 如果没有这个数据, 就是 -1

var arr = [ 10, 20, 30, 20, 10, 20, 30 ]
     console.log(arr)
     var res = arr.lastIndexOf(20)
    //从 [4] 位置开始向前查找
     var res = arr.lastIndexOf(20, 4)
     console.log(res)

13. forEach(function (item, index, arr) {})

语法:

​ 数组.forEach(function (item, index, arr) {

​ item 表示数组的每一项

​ index 表示数组每一项的索引

​ arr 表示原始数组

​ })

​ 作用： 遍历数组

​ 返回值: 没有

 var arr = [ 100, 200, 300, 400, 500, 600 ]
     var arr2 = [ 10, 20, 30, 40 ]

    // a 会根据数组内有多少数据, 执行多少回
     arr.forEach(function a(item, index, arr) {
       console.log('我执行了', item, index, arr)
    //   // 可以直接书写每一次循环你要做的事情
     })

补充：封装一个方法

需求:

​ （1） 根据原始数组的长度 返回 给我一个新的数组

​ （2） 在回调函数内可以对原始数组内每一个数据进行操作(我需要的操作)

​ （3） 新数组内得到数据, 就是操作以后的数据

14. map(function (item, index, arr) {})

语法:

​ 数组.map(function (item, index, arr) {})

作用：对原始数组进行映射

返回值: 就是一个和原始数组一样长度的新的数组, 对原始数组内每一项操作后的结果，并且内部数据是被映射操作过的内容

 var arr = [ 10, 20, 30, 40 ]

    var res = arr.map(function (item) { return item * 10 })
    console.log(arr)
    console.log(res)

15.filter(function (item, index, arr) {})

语法:

​ 数组.filter(function (item, index, arr) {})

作用： 过滤数组

返回值: 一个新的数组, 原始数组内满足条件的新数组，在回调函数中以return的形式书写过滤条件

// 1. 准备方法
     Array.prototype.myFilter = function (cb) {
    //   // 1-1. 准备一个新的数组
       var ary = []

    //   // 1-2. 根据 回调函数 的条件, 向 新数组内 添加成员
       for (var i = 0; i < this.length; i++) {
    //     // 需要调用 cb
         var r = cb(this[i], i, this)

       ary.push(this内满足条件的项)
         r && ary.push(this[i])
       }

    //   // 1-3. 返回新数组
       return ary
     }

    // // 2. 将来使用的时候
     var arr = [ 10, 20, 30, 40 ]
     var res = arr.filter(function (item, index, arr) {
    //   // 过滤条件
       return item > 20
     })

     console.log('原始数组 : ', arr)
     console.log('过滤以后 : ', res)

16. every(function (item, index, arr) {})

​ 判断是否每一项都满足条件

​ 返回值:

​ 1. 如果数组内每一项都满足条件, 那么返回 true

​ 2. 只要有任何一项不满足条件, 那么返回 false

// 1. 准备方法
     Array.prototype.myFilter = function (cb) {
    //   // 1-1. 准备一个新的数组
       var ary = []

    //   // 1-2. 根据 回调函数 的条件, 向 新数组内 添加成员
       for (var i = 0; i < this.length; i++) {
    //     // 需要调用 cb
         var r = cb(this[i], i, this)

         ary.push(this内满足条件的项)
         r && ary.push(this[i])
       }

    //   // 1-3. 返回新数组
       return ary
     }

    // // 2. 将来使用的时候
     var arr = [ 10, 20, 30, 40 ]
     var res = arr.filter(function (item, index, arr) {
    //   // 过滤条件
       return item > 20
     })

     console.log('原始数组 : ', arr)
     console.log('过滤以后 : ', res)

17. some(function (item, index, arr) {})

​ 判断是否某一项满足条件

​ 返回值:

​ 1. 如果数组内有任何一项满足条件, 那么返回 true

​ 2. 只有数组内所有都不满足条件, 那么返回 false

// 1. 准备方法
    Array.prototype.mySome = function (cb) {
      // 1-1. 提前假设一个变量, 假设完全没有
      var flag = false

      // 1-2. 循环遍历数组来验证我的假设
      for (var i = 0; i < this.length; i++) {
        var r = cb(this[i], i, this)

        if (r) {
          flag = true
          break
        }
      }

      // 1-3. 返回我的 flag
      return flag
    }

    // 2. 将来使用的时候
    var arr = [ 10, 20, 30, 40, 50 ]
    var res = arr.some(function (item, index, arr) {
      console.log(item)
      return item > 10
    })
    console.log(res)

18. find(function (item, index, arr) {})

​ 根据条件查找数组中的数据

​ 返回值: 查找到的数据

 var arr = [ 10, 20, 30, 40, 50, 60 ]
     var res = arr.find(function (item) {
       return item % 3 === 0
     })
     console.log(res)

19. findIndex(function (item, index, arr) {})

​ 根据条件查找数组中的数据所在的索引位置

​ 返回值: 查找到的数据的索引位置

var arr = [ 10, 20, 30, 40, 50, 60 ]
     var res = arr.findIndex(function (item) {
       return item % 3 === 0
     })
     console.log(res)

20. flat(数字)

​ 拍平数组

​ 数组: 书写多少, 就是拍平多少层

​ 可以书写 Infinity 来表示全部拍平

​ 返回值: 一个被拍平的数组

 var arr = [10, [20, 30, [40, 50, [60, 70, [80, [90]]]]]]
     var res = arr.flat(Infinity)
     console.log(arr)
     console.log(res)

21. fill()

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

​ 作用： 填充数组

​ 特点: 包前不包后

​ 注意: 会直接改变原始数组

​ 注意: 只能填充现有索引位置数据, 不能新增数据

var arr = [ 10, 20, 30, 40, 50, 60 ]
     console.log('原始数组 : ', arr)
     arr.fill('新来的')
    // 从 [2] 开始到 [5] 结束, 包含 [2] 不包含 [5]
     arr.fill('新来的', 2, 5)
     arr.fill('新来的', 2)
     arr.fill('新来的', 2, 100)
     console.log('原始数组 : ', arr)

22. includes()

​ 语法: 数组.includes(数据)

​ 作用: 判断是否存在数据

​ 返回值: 一个布尔值

​ 如果数组内有该数据, 那么返回 true

​ 如果数组内没有该数据, 那么返回 false

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

23. reduce(function (prev, item, index, arr), init)

​ 语法: 数组.reduce(function (prev, item, index, arr) {}, init)

​ init 可以写可以不写, 不写的时候默认使用数组 [0] 位置的数据

​ 当 init 不写的时候, 遍历会从 [1] 开始

​ 当 init 书写的时候, 遍历会从 [0] 开始

​ 叠加数组

​ 返回值: 最终的叠加结果

var arr = [ 10, 20, 30, 40, 50, 60 ]
    var res = arr.reduce(function (prev, item) {
      console.log(prev, item)
      return prev + item
    }, 100)
    console.log('最终结果: ', res)