es6数组迭代方法

193 阅读3分钟

es6数组迭代方法

1数组map方法

  1.数组map方法作用:  映射数组
         说人话:按照某种映射关系, 把数组的每一个元素给修改了
         举例:全场8折:  数组的每一个元素 * 0.8

       2. map方法特点
        2.1  回调函数执行次数  ==    数组长度
        2.2  回调函数内部的return
            * return 新数组的元素
            * 如果没有return, 则map的返回值都是undefined
        2.3  map方法的返回值
            * 返回映射之后的新数组
       */

       let arr = [ 88,90,100,20,50 ]
        //完整写法
       let res =  arr.map( (item,index) => {
           return item*0.8
       } )
       //箭头函数如果形参只有一个可以省略小括号, 如果函数体只有一行可以省略大括号(必须省略return)
       let res1 =  arr.map( item=>item*0.8 )
       console.log( res )
       

2数组 fliter方法

     /* 
       1.数组filter方法作用:  筛选数组
         * 应用场景: 筛选数组,将符合条件的元素放入新数组中
         * 举例: 找出数组中所有大于10的元素

       2. filter方法特点
        2.1  回调函数执行次数  ==    数组长度
        2.2  回调函数内部的return
            * return true : 符合筛选条件,放入新数组中
            * return false : 不符合筛选条件,不放入新数组中
        2.3  filter方法的返回值
            * 返回筛选之后的新数组
       */

       let arr = [ 10,90,100,20,50 ]
       //需求:找出50以上的元素
        //完整写法
    //    let res = arr.filter( (item,index)=>{
    //         if( item >= 50 ){
    //             return true
    //         }else{
    //             return false
    //         }
    //    })
    //  简写
    let res = arr.filter(item=>item >= 50)
    console.log( res )

3 数组forEach方法

  /* 
       1.数组forEach方法作用:  遍历数组
         * 应用场景:  和 for(let i=0;i<arr.length;i++){} 功能一致

       2. forEach方法特点
        2.1  回调函数执行次数  ==    数组长度
        2.2  回调函数内部的return
            * 没有返回值
        2.3  forEach方法的返回值
            * 没有返回值
       */  

       let arr = [45,60,88,90,20]

       arr.forEach((item,index)=>{
           console.log(item,index)
       })

4 数组some方法

  1.数组some方法作用:   判断数组中是否有符合条件的元素
         * 应用场景:  非空判断(判断多个表单元素,有没有空文本)
         * 举例 : 判断数组中有没有负数

       2. some方法特点
        2.1  回调函数执行次数  !=  数组长度
        2.2  回调函数内部的return
            * return true : 循环结束 找到了满足条件的元素
            * return false : 循环继续 没找到,循环继续 如果所有元素全部遍历还是没找到,最终结果就是false
        2.3  some方法的返回值
            * true : 有符合条件的元素
            * false : 没有符合条件的元素
       */     

        let arr = [10,20,50,60,70,80]
       //标准写法
    //    let res = arr.some((item,index)=>{
    //        if( item < 0 ){
    //            return true
    //        }else{
    //            return false
    //        }
    //    })
        
        //简写
       let res = arr.some(item=>item < 0)
       console.log( res )
      

5数组every方法

  1.数组every方法作用:   判断数组中 是否所有的 元素都满足条件
         * 应用场景:  开关思想 (购物车全选框)
         * 举例 : 判断数组中是不是都是正数

       2. every方法特点
        2.1  回调函数执行次数  !=  数组长度
        2.2  回调函数内部的return
            * return true : 循环继续, 满足条件,如果所有的元素全部遍历还是true,则最终的结果就是true
            * return false : 循环结束。 只要要到不满足条件的元素,循环结束。最终的结果false
        2.3  every方法的返回值
            * true : 所有的元素 都符合条件
            * false : 有元素 不符合条件
       */     

        let arr = [10,20,50,60,70,80]
       //标准写法
       let res = arr.every((item,index)=>{
           if( item >= 0 ){
               return true
           }else{
               return false
           }
       })
       console.log(res)
       

6数组findIndex方法

 1.数组findIndex方法作用:   查找元素的下标
         * 数组的findIndex与indexOf异同点
            相同点:功能一致,都是查找元素下标。 有则返回下标,无则返回固定值-1
            不同点:应用场景不同
                indexOf : 查找数组中的元素都是值类型
                findIndex : 查找数组中的元素都是引用类型

       2. findIndex方法特点
        2.1  回调函数执行次数  !=  数组长度
        2.2  回调函数内部的return
            * return true : 循环结束。 找到了,此时返回值就是下标
            * return false : 循环继续。 没找到,循环继续。 如果所有元素全部遍历还是没找到,最终结果就是-1
        2.3  some方法的返回值
            * 元素下标 或者 -1
       */   
      
       let arr = [
           {name:'张三',age:20},
           {name:'李四',age:18},
           {name:'王五',age:16},
       ]

       //需求:找名字为王五的人在哪里
    //    let res = arr.findIndex(item=>{
    //        if( item.name == 'sfs' ){
    //            return true
    //        }else{
    //            return false
    //        }
    //    })

      let res = arr.findIndex(item=>item.name == '王五')
      console.log(res)
      

6数组reduce方法

    /* 1.数组reduce方法 :  数组累加器方法
            * 对数组每一个元素执行一次回调函数,累加最后一次回调的结果 
        2.reduce场景: 数组元素求和、求数组元素最大值
        
        */ 
       
        let arr = [20,55,60]

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

        /* 
        第一个参数:回调   (上一次值,当前值,当前下标)=>{}
            * 默认下标不是从0开始,而是从1开始。 开发中一般需要设置默认值
            * return 值 就是下一次 sum的值
        第二个参数: 初始值
            * 一般需要设置初始值为0, 如果不设置遇到空数组则会报错
        reduce方法返回值是 : 最后一次sum的结果
        */
    //    let res = arr.reduce( ( sum,item,index )=>{
    //         console.log( sum,item,index)
    //         return sum + item
            
    //     } , 0 )

        let res = arr.reduce( ( sum,item )=>sum + item , 0 )

        console.log( res )