【JavaScript】数组常用方法及实用场景详解

 1.增删改查

    增: 返回新数组长度

      arr.push(  )  : 在数组 末尾 新增元素

let arr = [10,20,30,40,50]
    const newArr =  arr.push(60)// 
    console.log( arr)//[10,20,30,40,50,60]
    console.log( newArr )//6

      arr.unshift()  :    在数组 开头 新增元素

let arr = [10,20,30,40,50]
    const newArr =  arr.unshift(5)
    console.log( arr)//[5,10,20,30,40,50]
    console.log( newArr )//6

    删: 返回删除的那个元素 

      arr.pop()  :   删除数组 最后一个 元素

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

      arr.shift()  : 删除数组 第一个 元素

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

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

 let arr = [10,20,30,40,50]
    const newArr =  arr.splice(1,2)
    console.log( arr)//[10,40,50]
     console.log( newArr ) // [20,30]

const newArr1 =  arr.splice(1,2,25,35)
    console.log( arr)//[10,25,35,40,50]
     console.log( newArr1 ) // [20,30]

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

      arr.slice(起始下标,结束下标) : 查询指定范围的元素

 
    let arr = [10,20,30,40,50]
    const newArr =  arr.slice(2,5)// 2 <= 范围 < 5
    console.log( newArr)//[30,40,50]

 arr.concat( 数组 )  : 连接数组

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

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

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

arr.reverse()  : 翻转数组

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

 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)

  数组map方法应用场景 : 根据规则映射数组，得到 "新数组"

         后台返回的数组 和  页面元素 的数据不一致，需要映射成一致（例如echarts图表）

    1.  循环次数 ===  数组长度

    2.  回调函数内部返回值

              return 新数组元素

    3.  方法自身返回值

              return 映射后的数组

// 需求： 求五折数据
    // 箭头函数的函数体只有一行,则可以省略大括号。 此时也必须要省略return
    let arr = [ 20,50,88,60,56 ]
    const res =  arr.map( item => item*0.5 )
    console.log(res)

  数组forEach方法应用场景 : 循环遍历数组元素

         遍历修改数组每一个元素值(不需要得到新数组，仅仅只是修改数组自身元素)

    1.  循环次数 ===  数组长度

    2.  回调函数内部返回值

      无return

    3.  方法自身返回值

      无return

 let arr = [ 
      { name:'商品1', select:false }, 
      { name:'商品2', select:true }, 
      { name:'商品3', select:false }, 
      { name:'商品4', select:false }, 
    ]
    // 需求： 全选(设置每一个元素的select值为true)
    // 箭头函数的函数体只有一行,则可以省略大括号。 此时也必须要省略return
    arr.forEach( item => item.select = true )

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

        筛选数组元素

        批量删除数组元素(相当于筛选出不需要删除的元素)

    1.  循环次数 ===  数组长度

    2.  回调函数内部返回值

        return true : 满足条件,放入新数组

        return false : 不满足条件,不放入新数组

    3.  方法自身返回值

        return 新数组

 let arr = [
      { name: '商品1', select: false },
      { name: '商品2', select: true },
      { name: '商品3', select: false },
      { name: '商品4', select: false },
      { name: '商品5', select: true },
    ]
    // 需求： 筛选用户选中的商品
    const res = arr.filter(item => item.select)
    console.log(res)

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

数组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 arr = [
      { name:'商品1', price:123,select:true },
      { name:'商品2', price:234,select:false },
      { name:'商品3', price:888,select:true },
      { name:'商品4', price:666,select:false }
    ]

    //需求：求选中商品的和
    // const res = arr.reduce( (sum,item)=>{
    //   if( item.select ){
    //     return sum+item.price//如果选中就累加
    //   }else{
    //     //如果没有选中，就返回sum自己（保持sum值不变.如果省略你的下一次sum就会变成undefined）
    //     return sum
    //   }
    // } , 0 )
    // console.log( res )

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


    /* 原理 */
    // let sum = 0
    // for(let i = 0;i<arr.length;i++){
    //   if( arr[i].select ){
    //     sum += arr[i].price
    //   }
    // }
    // console.log(sum )