ES6新语法之数组迭代(遍历)方法map,filter,forEach,some,every,findIndex,reduce

167 阅读4分钟

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(res1)

2.filter

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

  2. filter方法特点
    2.1  回调函数执行次数  ==    数组长度
    2.2  回调函数内部的return
        * return true : 符合筛选条件,放入新数组中
        * return false : 不符合筛选条件,不放入新数组中
    2.3  filter方法的返回值
        * 返回筛选之后的新数组
 let arr = [ 88,90,100,20,50 ]
       //需求:找出50以上的元素
    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=>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]
        //判断是否都大于零,是则返回true
        let res = arr.every((item, index) => item > 0)

6.findIndex

数组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=>item.name == '王五')
      console.log(res)

7.reduce

1.数组reduce方法 :  数组累加器方法
        * 对数组每一个元素执行一次回调函数,累加最后一次回调的结果 
2.reduce场景: 数组元素求和、求数组元素最大值
3.参数 :
    第一个参数:回调   (上一次值,当前值,当前下标)=>{}
        * 默认下标不是从0开始,而是从1开始。 开发中一般需要设置默认值
        * return 值 就是下一次 sum的值
    第二个参数: 初始值
        * 一般需要设置初始值为0, 如果不设置遇到空数组则会报错
    reduce方法返回值是 : 最后一次sum的结果
        let res = arr.reduce( ( sum,item )=>sum + item , 0 )

        console.log( res )