【JavaScript】数组的常用方法

数组的20种常用方法

💡 Tips：本篇文章将详细介绍20个数组的常用方法供大家学习

1.push()

push()

• 语法： 数组.push(数据)
• 作用：向数组的末尾追加数据
• 返回值：追加数据之后，返回数组的新长度

var arr = [100, 200, 300, 400, 500]
  console.log("原始数组", arr)
  var res = arr.push("新来的")
  console.log("push后", arr)
  console.log("返回值", res)

2.pop()

pop() 方法从数组中删除最后一个元素，并返回该元素的值。此方法会更改数组的长度。

• 语法 数组.pop()
• 作用 删除数组的最后一个数据
• 返回值 被删除的数据

  var arr = [100, 200, 300, 400, 500]
    console.log("原始数组", arr)
    var res = arr.pop()
    console.log("pop后", arr)
    console.log("返回值", res)

3.unshift()

unshift() 方法将一个或多个元素添加到数组的开头，并返回该数组的新长度。

• 语法 数组.unshift()
• 作用 向数组的最前面插入一个数据
• 返回值 修改后的新数组的长度

  var arr = [100, 200, 300, 400, 500]
  console.log("原始数组", arr)
  var res = arr.unshift("新来的")
  console.log("unshift后", arr)
  console.log("返回值", res)

4.shift()

shift() 方法从数组中删除第一个元素，并返回该元素的值。此方法更改数组的长度。

• 语法 数组.shift()
  - 作用 删除数组里面的第一个数据
  - 返回值 被删除的数据

  var arr = [100, 200, 300, 400, 500]
  console.log("原始数组", arr)
  var res = arr.shift()
  console.log("shift后", arr)
  console.log("返回值", res)

5.reverse()

reverse() 方法将数组中元素的位置颠倒，并返回该数组。数组的第一个元素会变成最后一个，数组的最后一个元素变成第一个。该方法会改变原数组。

• 语法 数组.reverse()
  - 作用 反转数组
  - 返回值 反转以后的数组

  var arr = [100, 200, 300, 400, 500]
  console.log("原始数组", arr)
  var res = arr.reverse()
  console.log("reverse后", arr)
  console.log("返回值", res)

6.sort()

sort() 方法用原地算法对数组的元素进行排序，并返回数组。默认排序顺序是在将元素转换为字符串，然后比较它们的 UTF-16 代码单元值序列时构建的

• 语法
  -> 数组.sort()
  排序的时候按照 unicode 编码进行排序
  0 - 9 48-57
  A - Z 65-90
  a - z 97-122
  -> 数组.sort( function(a, b) { return a-b } )
  按照数字大小进行升序排序
  -> 数组.sort( function(a,b) { return b-a } )
  按照数字大小进行降序排序
  - 作用 排序
  - 返回值： 排序好的数组

var arr = [1, 2, 100, 3, 20, 201, 400, 101]

// -> 数组.sort()

// 排序的时候按照 unicode 编码进行排序
// 0 - 9     48-57
// A - Z     65-90
// a - z     97-122  
  arr.sort( function(a, b) { return a-b } )
// 按照数字大小进行升序排序
  arr.sort( function(a,b) { return b-a } )

  var arr = [1, 2, 100, 3, 20, 201, 400, 101]

    var arr = ["apple", "Bana", "orange"]
    console.log("原始数组", arr)

    var res = arr.sort()

  // 升序
    var res = arr.sort(function (a, b) {
      return a - b
    })

  // 降序
    var res = arr.sort(function (a, b) {
      return b - a
    })

    console.log("sort后", arr)
    console.log("返回值", res)

7.splice()

splice() 方法通过删除或替换现有元素或者原地添加新的元素来修改数组，并以数组形式返回被修改的内容。此方法会改变原数组。

• 语法
  -> 数组.splice(开始索引, 多少个)
  -> 数组.splice(开始索引, 多少个, 插入的数据1, 插入的数据2…)
  - 作用 截取数组部分内容，并选择性插入内容
  取 从开始索引的位置开始，向后截取指定个数的内容
  - 返回值 必然是一个新数组
  面包含截取出来的部分

// splice 实现删除
  var arr = [100, 200, 300, 400, 500, 600, 700]
  console.log("原始数组", arr)
  var res = arr.splice(2, 3)


// 删除 数组最后一个
  var res = arr.splice(arr.length - 1, 1)


// 删除 数组的第一个
  var res = arr.splice(0, 1)
  console.log("splice后", arr)
  console.log("返回值", res)


// splice实现插入
var arr = [100, 200, 300, 400, 500, 600, 700]
console.log("原始数组", arr)


// 插入  -> 数组.splice(开始索引, 多少个, 插入的数据1, 插入的数据2....)
  var res = arr.splice(2, 3, "新来的")
  var res = arr.splice(2, 0, "新来的")


// 实现 在数组的最后一个插入一项
  var res = arr.splice(arr.length, 0, "新来的")


// 实现  在数组的开始位置插入一项
var res = arr.splice(0, 0, "新来的")

console.log("修改后", arr)
console.log("返回值", res)

8.concat()

concat() 方法用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组。

• 语法 原始数组.concat(数组1, 数组2, … )
  - 作用 进行数组拼接，把()中的数据拼在数组后面
  - 返回 拼接好的数组
  - 和 push的区别
  1. 是否修改原数组
  数组
  concat 不修改原数组
  2. 插入数据
  把数据插入
  concat 如果遇到数组，会把数组拆开，把每一项依次放入

  var arr = [100, 200, 300, 400, 500]
    var res = arr.concat("新来的")
    arr.push("新来的")
    console.log(arr)
    console.log("修改后", res)

  // concat 和 push的区别
    arr.push(["新来的1", "新来的2"]) //  [100, 200, 300, 400, 500 , ['新来的1' , '新来的2'] ]
    console.log(arr)

    var res = arr.concat(["新来的1", "新来的2"])
    console.log(res)

9.join()

join() 方法将一个数组（或一个类数组对象）的所有元素连接成一个字符串并返回这个字符串，用逗号或指定的分隔符字符串分隔。如果数组只有一个元素，那么将返回该元素而不使用分隔符。

• 语法 数组.join(‘连接符’)
  - 作用 使用连接符，把数组里面的每一个数据都连接起来，变成一个字符串, (连接符不写 默认 逗号)
  - 返回值 拼接好的字符串

  var arr = [100, 200, 300, 400, 500]
  var arr = [2022, 12, 21]
  var arr = [16, 28, 30]
  // var res = arr.join("-")
  // var res = arr.join(":")
  // var res = arr.join("aaaaaaaaaaaa")
  var res = arr.join()
  console.log(res)

10.slice()

slice() 方法返回一个新的数组对象，这一对象是一个由 begin 和 end 决定的原数组的浅拷贝（包括 begin，不包括end）。原始数组不会被改变。

• 语法 数组.slice(开始索引, 结束索引)
  - 作用 截取数组的部分内容
  - 返回值 必然是一个新数组
  就是截取出的东西
  - 参数特点
  前不包后， 包含开始索引位置，不包含结束索引位置
  -> 开始索引可以不写， 默认从0开始， 结束索引不写，默认到数组最后
  -> 可以写负数， 表示倒数第几个

  var arr = [100, 200, 300, 400, 500, 600, 700]
    console.log("原始数组", arr)
    // 从索引2 的位置 ，截取到索引5的位置
    //   var res = arr.slice(2, 5)

    //   var res = arr.slice(2)

    var res = arr.slice(2, -1)
    console.log(res)

11.indexOf()

indexOf() 方法返回在数组中可以找到给定元素的第一个索引，如果不存在，则返回 -1。

• 语法
  -> 数组.indexOf(数据)
  -> 数组.indexOf(数据，开始索引)
  - 作用 从前向后查找该数据在数组中第一次出现的位置
  - 返回
  果数组中找到了该数据，那么返回第一次出现的索引
  -> 如果没找到, 那么返回-1

<script>
    var arr = [100, 200, 200, 300, 300, 400, 200, 500]

  // 数组.indexOf(数据)
    var i = arr.indexOf(200)
    var i = arr.indexOf(2000)
    console.log(i)

  // 数组.indexOf(数据，开始索引)
    var i = arr.indexOf(200, 1)
    var i = arr.indexOf(200, 3)
    console.log(i)
</script>

12.lastIndexOf()

lastIndexOf() 方法返回指定元素（也即有效的 JavaScript 值或变量）在数组中的最后一个的索引，如果不存在则返回 -1。从数组的后面向前查找，从 fromIndex 处开始。

• 语法
  -> 数组.lastIndexOf(数据)
  -> 数组.lastIndexOf(数据, 开始索引)
  - 作用 从后向前查找数据第一次在该数组中出现的位置
  - 返回值
  找到 返回索引
  -> 找不到 返回-1

 var arr = [100, 200, 200, 300, 300, 400, 200, 500]

  //   var res = arr.lastIndexOf(200)
  var res = arr.lastIndexOf(200, 5)
  console.log(res)

13. forEach()

 - 语法 数组.forEach(function(item, index, origin) {})
           -> item  数组的每项
           -> index 数组每一项的索引
           -> origin  表示原始数组
       - 作用 遍历数组(和for一样)
       - 返回值  没有(undefined)
       - 注意 不能中断 break continue

var arr = [100, 200, 300, 400, 500]
    arr.forEach(function (item, index, origin) {
      console.log(item, index, origin)
    })

  // break 报错
  //    arr.forEach(function (item, index, origin) {
  //      if(index>3) {
  //          break
  //      }
  //      console.log(item, index, origin)
  //    })

  // continue
  //   arr.forEach(function (item, index, origin) {
  //        if(index>3) {
  //            continue
  //        }
  //        console.log(item, index, origin)
  //      })

案例一:求数组中所有数据的和

 // forEach 案例
  // 1. 求数组中所有数据的和
    var arr = [100, 200, 300, 400, 500]
    var sum = 0

    arr.forEach(function (item) {
      sum += item
    })
    console.log(sum)

案例二:找数组中最大的数字的索引

 // 2. 找数组中最大的数字的索引
    var arr = [100, 200, 300, 400, 500, 20, 10, 201, 302]
    var maxIndex = 0
    arr.forEach(function (item, index) {
      // 比较当前项和 [maxIndex], 如果当前项大 maxIndex 等于 当前项的索引
      if (item > arr[maxIndex]) {
        maxIndex = index
      }
    })
    console.log(maxIndex)

案例三:去重

 // 3. 去重
    var arr = [100, 200, 100, 200, 2, 1, 3, 3, 400, 400, 55, 55, 555, 600]
    // 有一个新数组，去重之后的内容放到新数组中
    // 判断当前项在新数组中存在吗，不存在，放到新数组中

    var newArr = []
    arr.forEach(function (item) {
      // 判断  item 在不在newArr  indexOf
      if (newArr.indexOf(item) === -1) {
        newArr.push(item)
      }
    })
    console.log(newArr)

14. map()

• 语法 数组.map(function(item, index, origin) {})
  -> item 数组的每项
  -> index 数组每一项的索引
  -> origin 表示原始数组
  - 作用 映射
  - 返回值 返回一个新数组，和原始数组一样的长度，只不过内部数据进行映射加工
  - 注意 映射条件用return 形式书写

  var arr = [100, 200, 300, 400, 500]

  var res = arr.map(function (item, index) {
    // return item * 10
    // return 100
    // return "哈哈哈"

    if (index % 2 === 0) {
      return item * 10
    } else {
      return item
    }
  })
  console.log(res)

15. filter ()

• 语法 数组.filter(function(item, index, origin){})
  -> item 数组的每一项
  -> index 数组的每一项的索引
  -> origin 原始数组
  - 作用 过滤数组
  - 返回值 是一个新数组，内部存储的是经过筛选后的内容
  - 注意 过滤条件用return形式书写

  var arr = [100, 200, 300, 400, 500]
    var res = arr.filter(function (item) {
      // 得到arr中 > 200 的数据
      return item > 200
      // return item > 1000
    })
    console.log(res)

16. find()

• 语法 数组.find(function( item, index, origin ){})
  -> item 数组的每一项
  -> index 数组每一项的索引
  -> origin 原始数组
  - 作用 在原始数组中查找满足条件的第一项
  - 返回值 找到的数据 , 找不到返回undefined
  - 注意 查找条件用return形式书写

  var arr = [100, 200, 300, 400, 500]
  var res = arr.find(function (item, index) {
    // return item > 300
    return item > 3000
  })
  console.log(res)

  var arr = [
    { name: "小花", id: 1 },
    { name: "小红", id: 2 },
    { name: "tom", id: 3 },
    { name: "jerry", id: 4 },
    { name: "nick", id: 5 },
  ]

// 查找id===3 这一项
  var res = arr.find(function (item) {
    return item.id === 3
  })
  console.log(res)

17. findIndex()

• 语法 数组.findIndex(function(item, index, origin){})
  -> item 数组的每一项
  -> index 数组每一项的索引
  -> origin 原始数组
  - 作用 查找数组满足条件的第一项的索引
  - 返回值 找到的数据的索引, 没找到返回-1
  - 注意 查找条件用return形式书写

  var arr = [100, 200, 300, 400, 500]
    var res = arr.findIndex(function (item) {
      // return item > 300
      return item > 3000
    })
    console.log(res)

18. includes()

• 语法 数组.includes(数据)
  - 作用
  据在不在数组中
  - 返回值 找到 true 没找到 false

  var arr = [100, 200, 300, 400, 500]
    var res = arr.includes(300)
    console.log(res)

19. some()

• 语法 数组.some(function(item, index, origin){})
  -> item 数组的每一项
  -> index 数组每一项的索引
  -> origin 原始数组
  - 作用 判断数组中是否有一个满足条件
  - 返回值
  至少有一个满足条件
  false 每一个都不满足条件
  - 注意
  用return形式书写

  var arr = [100, 200, 300, 400, 500]
  var res = arr.some(function (item) {
    // return item > 400
    return item > 4000
  })
  console.log(res)

20. every

• 语法 数组.every(function(item, index, origin){})
  - 作用 判断数组中每一项是否满足条件
  - 返回值
  数组每一项都满足条件
  false 数组中至少有一项不满足条件
  - 注意 判断条件用return形式书写

var list = [
    { name: "小花", id: 1, score: 100 },
    { name: "小红", id: 2, score: 30 },
    { name: "tom", id: 3, score: 10 },
    { name: "jerry", id: 4, score: 2 },
    { name: "nick", id: 5, score: 59 },
  ]

  // 判断 所有学生的成绩 是否 > 0

    var res = list.every(function (item) {
      return item.score > 0
    })
    console.log(res)

  // 判断 所有学生的成绩 是否 > 60
    var res = list.every(function (item) {
      return item.score > 60
    })
    console.log(res)