美文网首页前端开发es6入门基础
ES6基础入门教程(十一)遍历对象

ES6基础入门教程(十一)遍历对象

作者: 党云龙 | 来源:发表于2019-11-05 13:44 被阅读0次

    核心:


    所有的循环方法 都是为了脱离传统的for循环的控制。原来的for循环实在是太low了。

    1.forEach


    作用:根据数组元素的个数,循环一个函数。有两种写法。
    理论上来说,这个循环就是用来遍历数组中的值的。
    第一种用法,

    forEach只能对数组对象使用,如果你只传一个function,function可以包含三个参数,
    第一个是下标,第二个是当前循环的内容,第三个是当前数组
    let arr=["laodang","laowang","laoma"]
    
    arr.forEach((item,index,arr)=>{
        console.log(item,index,arr);
    })
    

    第二种方法跟map循环遍历非常相似。

    // array.forEach(callback,[ thisObject])
    // 第二种用法,循环往方法中注入参数并执行
    // 注意第一个参数为必须的函数 第二个参数 为你要注入第一个函数的数组
    let arrObj={
        user:["laodang","laowang","laozhang"],
        fun:function(user){
            console.log("hello:"+ user);
        }
    }
    arrObj.user.forEach(arrObj.fun,arrObj.user)
    // hello:laodang
    // hello:laowang
    // hello:laozhang
    

    2.map


    作用:根据数组元素的个数,循环一个函数。有两种写法。
    这个循环是用来对数组执行方法的。
    说明:map循环跟forEach的第二种用法很相似,不同的是forEach是可以没有return的值
    但是map如果没有,就会返回一个undefined。

    返回undefined

    这里注意,你应该使用一个对象去接收return出来的值。
    因为map不会改变原来的数组,会生成一个新的数组。

    //array.map(callback,[ thisObject]);
    //item就是当前循环的内容
    let arr=[1,"laohu",3,8]
    let fun =arr.map((item)=>{
        return "hello:"+item;
    })
    console.log(fun);
    

    3.filter


    filter用于过滤数据。会返回一个新数组。
    这个循环是用来对数组进行过滤的。

    //filter 会过滤掉不符合条件的数据 然后生成一个新的数组
    //array.filter(callback,[ thisObject]); 也可以跟forEach第二种用法一样
    let arr=[1,2,3,4]
    let newArr = arr.filter((item)=>{
        return item>2;
    })
    console.log(newArr);
    

    4.reduce


    叠加或者叠减数组中的每一项,(会返回最终计算的值)。
    其实它还有一个兄弟函数reduceRight,它本身是从左往右加,那个是顺序反过来,但是实际意义不太大。
    这个循环是用来对数据进行叠加 叠减的。

    //reduce 叠加/叠减函数
    let arr = [1,2,3,4,5]
    
    // 第一个参数是本次的值,第二个是下一次加的值
    // 跟sort函数有点像
    let Newarr=arr.reduce((benci,xiaci)=>{
        console.log(benci);
        return benci+xiaci
    })
    console.log(Newarr);
    // 15
    
    // 这个方法还可以设置一个初始的值 相当于从5开始加
    // 相当于数组变成了[5,1,2,3,4,5] 相加
    let Newarr2=arr.reduce((benci,xiaci)=>{
        return benci+xiaci
    },5)
    console.log(Newarr);
    //20
    

    特殊操作:获取额度最高的优惠券
    你要注意,只有这个循环是返回一个值,而不是返回数组,我们利用它这个原理
    可以做一个操作,那就是例如:获取优惠券中额度最高的那张

    let quan=[
        {"id":"10001","name":"优惠券1","qian":1000},
        {"id":"10002","name":"优惠券2","qian":900}
    ]
    let keyongquan = quan.reduce((a,b)=>{
        return b.qian > a.qian ? {"id":b.id,"qian":b.qian} : {"id":a.id,"qian":a.qian};
    })
    // 直接返回额度最高的那张券 返回一个对象
    console.log(keyongquan);
    

    5.some


    用于查看数组中是否包含某个值,返回true
    循环遍历,如果数组中包含有符合条件的值,结束循环,并且返回一个true。
    这个循环是用来检查数组是是否包含数据的。

    // 通常用来查看数组中是否包含某个值
    let arr=[1,2,3,4,5]
    // some 只要循环中出现一个符合条件的 就停止循环
    // 最后返回一个true
    console.log(arr.some((val,index,arr)=>{
        console.log(val);
        return val>2
    }))
    

    6.every


    用于查看数组中是否包含某个值,
    如果每一项都符合条件,最后返回一个true;
    如果有一项不符合,结束循环,返回false
    这个循环是用来检查数组是是否包含数据的。

    let arr=[1,2,3,4,5]
    
    console.log(arr.every((val,index,arr)=>{
        console.log(val);
        return val>2
    }))
    
    // 1
    // fales
    

    相关文章

      网友评论

        本文标题:ES6基础入门教程(十一)遍历对象

        本文链接:https://www.haomeiwen.com/subject/bxisbctx.html