ES6数组迭代方法

数组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 res = arr.map(item => item * 0.8)
        console.log(res)

数组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, 3]
        //需求:找出50以上的元素
        //完整写法
        let aee = arr.filter(item => item > 80)
        console.log(aee)
        let aee1 = arr.filter((item, value) => {
            if (item % 2 == 0) {
                return true
            }

        })
        console.log(aee1)

数组forEach遍历

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

 /* 
    
 
        2. forEach方法特点
         2.1  回调函数执行次数  ==    数组长度
         2.2  回调函数内部的return
             * 没有返回值
         2.3  forEach方法的返回值
             * 没有返回值
        */
        //交互不用 遍历尽量用forEach
        let arr = [30, 40, 50, 60]
        arr.forEach((item, index) => {
            console.log(item)
        })

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

数组every方法

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

     * ` 2. every方法特点
    2.1  回调函数执行次数  !=  数组长度
    2.2  回调函数内部的return
        * return true : 循环继续, 满足条件,如果所有的元素全部遍历还是true,则最终的结果就是true
        * return false : 循环结束。 只要找 X到不满足条件的元素,循环结束。最终的结果false
    2.3  every方法的返回值
        * true : 所有的元素 都符合条件
        * false : 有元素 不符合条件
   */
    //开关思想 用every(满足所有条件)  和   some      
    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)
    let res1 = arr.every(item => item > 0)
    console.log(res1)

数组findlndex方法

** 1.数组findIndex方法作用: 查找元素的下标
* 数组的findIndexindexOf异同点
相同点:功能一致,都是查找元素下标。 有则返回下标,无则返回固定值-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)
      

数组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 )
        
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

All rivers run in to the sea

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值