javascript的4种数组循环的方法

01-数组map方法

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

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

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

2. 回调函数内部返回值 return 新数组元素

3. 方法自身返回值 return 映射后的数组

let arr = [ 20,50,88,60,56 ] 
// 需求： 全场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)

02-数组forEach方法

应用场景：循环遍历数组元素

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

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

2.回调函数内部返回值无return

3.方法自身返回值无return

let arr = [
            { name: '商品1', select: false },
            { name: '商品2', select: false },
            { name: '商品3', select: false },
            { name: '商品4', select: false },

        ]
        //需求：全选（设置每一个元素的select值为true)
        arr.forEach((item, index) => {
            item.select = true
        })
        console.log(arr);

        //箭头函数的函数体只有一行，则可以省略大括号。此时也必须要省略return
        arr.forEach(item => item.select = true)

        console.log(arr);

03-数组的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: true },
            { name: '商品5', select: false },


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

        //需求：删除选中的商品（把true的别除，保留false的商品）
        //等价于：筛选用户没有选中的商品

        arr = arr.filter(item => !item.select)
        console.log(arr);

07-数组的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 )