你想要的数组方法大全，来咯！

最新推荐文章于 2024-11-04 17:05:06 发布

mmmaim

最新推荐文章于 2024-11-04 17:05:06 发布

阅读量148

点赞数 2

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/wfewan/article/details/128056904

版权

本文详细介绍了JavaScript中数组的增删改查操作，如push、unshift、pop、shift、splice和slice，并展示了它们在实际场景中的应用。此外，还讲解了数组的额外用法，如join和reverse。接着，文章阐述了数组的遍历方法，包括map、forEach、filter和reduce，分别用于映射数组、遍历修改、筛选元素和求和等任务。这些方法在处理数组数据时非常实用。

摘要由CSDN通过智能技术生成

一. 数组的增删改查

1. arr.push（...元素）

向数组后面添加元素，返回值是数组的长度

let arr = [10, 20, 30, 40, 50]
        let res = arr.push(60, 70, 80)
        console.log(arr)//[10,20,30,40,50,60,70,80]
        console.log(res)//8

2. arr.unshift（...元素）

向数组前面添加元素，返回值是数组的长度

let arr = [10, 20, 30, 40, 50]
        let res = arr.unshift(60, 70, 80)
        console.log(arr)//[60, 70, 80, 10, 20, 30, 40, 50]
        console.log(res)//8

3. arr.pop（）

删除数组中最后一个元素，返回值是删除的那个元素

let arr = [10, 20, 30, 40, 50]
        let res = arr.pop()
        console.log(arr)//[10, 20, 30, 40]
        console.log(res)//50

4. arr.shift（）

删除数组中第一个元素，返回值是删除的那个元素

let arr = [10, 20, 30, 40, 50]
        let res = arr.shift()
        console.log(arr)//[20, 30, 40, 50]
        console.log(res)//10

5. arr.splice（起始下标,删除数量）

从起始位置的下标，输入删除的个数，返回值是被删除的数组

let arr = [10, 20, 30, 40, 50]
        let res = arr.splice(2.4)
        console.log(arr)//[10, 20]
        console.log(res)//[30, 40, 50]

6. arr.slice（起始下标,结束下标）

查询指定范围的元素，返回的是查询到的数组

let arr = [10, 20, 30, 40, 50]
        let res = arr.slice(2.4)
        console.log(arr)//[10, 20, 30, 40, 50]
        console.log(res)//[30, 40, 50]

数组的额外用法

1. arr.join（‘分隔符’）

把数组元素拼接成字符串，返回值是用分隔符拼接的新数组

let str = arr.join('|')
        console.log(str)//10|20|30|40|50|60|70|80

2. arr.reverse（）

翻转数组

let arr = [10,20,30,40,50]
    arr.reverse()
    console.log( arr )//[50,40,30,20,10]

二. 数组的遍历方法

1. arr.map（）

let arr = [20, 50, 88, 60, 56]
    /* 
    0.  map应用场景 : 根据规则映射数组，得到 "新数组"
        * 后台返回的数组 和  页面元素 的数据不一致，需要映射成一致（例如echarts图表）
    1.  循环次数 ===  数组长度
    2.  回调函数内部返回值
      return 新数组元素
    3.  方法自身返回值
      return 映射后的数组
    */
    const res = arr.map(item => item * 0.5)
    console.log(res) //[10, 25, 44, 30, 28]

2. arr.forEach（）

let arr = [
      { name: '商品1', select: false },
      { name: '商品2', select: true },
      { name: '商品3', select: false },
      { name: '商品4', select: false },
    ]
    /* 
    0.  forEach应用场景 : 循环遍历数组元素
        * 遍历修改数组每一个元素值(不需要得到新数组，仅仅只是修改数组自身元素)
    1.  循环次数 ===  数组长度
    2.  回调函数内部返回值
      无return
    3.  方法自身返回值
      无return
    */
    // 需求： 全选(设置每一个元素的select值为true)
    arr.forEach(item => item.select = true)
    console.log(arr)

3. arr.filter（）

filter应用场景 : 根据条件筛选数组, 将满足条件的元素放入新数组

let arr = [
      { name: '商品1', select: false },
      { name: '商品2', select: true },
      { name: '商品3', select: false },
      { name: '商品4', select: false },
      { name: '商品5', select: true },
    ]
    /*
    0.  filter应用场景 : 根据条件筛选数组, 将满足条件的元素放入新数组
       * 筛选数组元素
       * 批量删除数组元素(相当于筛选出不需要删除的元素)
    1.  循环次数 ===  数组长度
    2.  回调函数内部返回值
        return true : 满足条件,放入新数组
        return false : 不满足条件,不放入新数组
    3.  方法自身返回值
        return 新数组
    */
    const res = arr.filter(item => item.select)
    console.log(res) //商品2 商品5

4. arr.reduce（）

为每一个元素执行一次回调,并得到最终结果

let arr = [20,50,18,30]
      
     /* 
     第一个参数: 执行回调
        (sum,item,index)=>{
          return 下一次的sum值
        }
     第二个参数： sum初始值
      * 建议一定要传初始值，一般为0.  （不传遇到空数组就会报错）
     reduce返回值： 最后一次sum结果
     */
    const res =  arr.reduce( (sum,item)=> sum + item, 0 )
    console.log( res ) //118