数组常用方法大全

1、增删改查：

增：返回新数组长度

arr.push(元素)  在数组 末尾 新增元素
arr.unshift(元素)  在数组 开头 新增元素

删：返回删除的那个元素

arr.pop()  删除数组 最后一个 元素
arr.shift()  删除数组 第一个 元素
arr.splice(起始下标,删除数量)

改：返回修改后的新数组

arr.splice(起始下标,删除数量,...插入元素)

查：返回查询到的元素数组

arr.slice(起始下标,结束下标)  查询指定范围的元素
const newArr = arr.slice(2, 5)// 2 <= 范围 < 5
console.log(newArr)// [30,40,50]

2、连接数组：arr.concat( 数组 )

// 应用场景： 移动端列表 上拉加载更多
const arr = [30, 40, 50]
const newArr1 = arr.concat([60, 70, 80])
console.log(newArr1)// [30, 40, 50, 60, 70, 80]

3、arr.join('分隔符')：把数组元素按照分隔符拼接成一个字符串

// 应用场景： 把数组元素拼接成一个字符串显示
const nameArr = ['罗文', '甄妮']
console.log(nameArr.join('&'))//罗文&甄妮

4、翻转数组：arr.reverse( )

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

5、数组排序：arr.sort( ) 

let dataArr = [
    { name: '张三', age: 18 },
    { name: '李四', age: 22 },
    { name: '王五', age: 16 },
    { name: '赵六', age: 30 },
    { name: '刘琦', age: 25 },
]
// 排序
dataArr.sort((a, b) => {
    console.log(a, b)//数组中相邻的元素
    return a.age - b.age
})
console.log(dataArr)

6、遍历数组得到新数组：arr.map( )

let arr = [ 20,50,88,60,56 ]

    /* 
    0.  map应用场景 : 根据规则映射数组，得到 "新数组"
        * 后台返回的数组 和  页面元素 的数据不一致，需要映射成一致（例如echarts图表）
    1.  循环次数 ===  数组长度
    2.  回调函数内部返回值
      return 新数组元素
    3.  方法自身返回值
      return 映射后的数组
    */

    // 需求： 全场5折
    // const res =  arr.map( (item,index) => {
    //   return item*0.5
    // } )
    // console.log(res)
    
    // 箭头函数的函数体只有一行,则可以省略大括号。 此时也必须要省略return
    const res =  arr.map( item => item*0.5 )
    console.log(res)

7、循环遍历数组：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,index) => {
      item.select = true
    } )
    console.log( arr )

8、筛选数组获得新数组：arr.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,index)=>{
    //   if( item.select ){
    //     return true
    //   }else{
    //     return false
    //   }
    // } )
    // console.log( res )

    const res = arr.filter(item => item.select)
    console.log(res)

    // 需求 : 删除选中的商品(把true的剔除，保留false的商品)
    // 等价于： 筛选用户没有选中的商品
    arr = arr.filter(item => !item.select)
    console.log(arr)

9、求累加和：arr.reduce( )

/* 
    1.数组reduce方法 : 为每一个元素执行一次回调,并得到最终结果
      经典应用 :  求累加和
    */

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

    const res =  arr.reduce( (sum,item)=> sum + item, 0 )
    console.log( res )

    //  let sum = 0
     
    //  for(let i = 0;i<arr.length;i++){
    //   sum = sum + arr[i]
    //  }

    //  console.log( sum )