跟大家分享一下，前端不算es6，就有八种循环，你用过几种呢

清疚 2021-09-17 13:14 101阅读 0赞

let arr = [{title:'aaaa',read:1000,hot:true},
               {title:'bbbb',read:300,hot:false},
               {title:'cccc',read:2000,hot:true},
               {title:'dddd',read:1900,hot:false}
        ];
     
     
    // 第一种for
    for(let i=0; i<arr.length;i++){
        console.log(arr[i]);
    }
     
     
    // 第二种forEach
    // forEach就是代替普通的for
    arr.forEach(function(item,index,arr){// item:循环结果 index:下标 arr:原数组
        console.log(item);
    },'this指向，如果使用的是箭头函数无法改变this指向');
     
     
    // 第三种map
    // 它可以重新整理数据结构,可以返回一个新的数组
    let newarr = arr.map((item,index,arr)=>{// item:循环结果 index:下标 arr:原数组
        // console.log(item,index,arr);
        let json = {};
        json.t = `随便加点${item.title}----`;
        json.r = `随便加点${item.read}----`;
        json.h = `随便加点${item.hot}----`;
        return json;
    })
    console.log(newarr)
     
     
    // 第四种filter
    // 过滤，过滤一些不合格或者不想要的元素，如果返回结果为true，就留下来
    let newarr = arr.filter((item,index,arr)=>{// item:循环结果 index:下标 arr:原数组
        return item.hot == true;//判断即可
    })
    console.log(newarr)
     
     
    // 第五种some
    // 类似查找,数组里面某一个元素符合条件，返回true
    let newarr = arr.some((item,index,arr)=>{
        return item.title == 'dddd';
    })
    console.log(newarr)
     
     
    // 第六种every
    // 类似查找,数组里面所有的元素都要符合条件，才返回true
    arr2 = [1,3,5,7,9]
    let newarr = arr2.every((item,index,arr)=>{
        return item%2 == 1;//判断我的数组里面是否有偶数
    })
    console.log(newarr)
     
     
    // 第七种reduce
    // 求数组的和、阶乘，从左往右计算
    arr3 = [1,2,3,4,5,6,7,8,9,10];
    arr4 = [2,2,3];
    let newarr = arr3.reduce((prev,cur,index,arr)=>{//prev:前一个 cur:当前 index:下标 arr:原数组
        return prev+cur;
        return Math.pow(prev,cur);//调用arr4的数组
        return prev**cur;//或者使用幕运算符
    })
    console.log(newarr)
     
     
    // 第八种reduceRight
    // 求数组的和、阶乘,跟reduce正好相反，从右往左计算
    arr3 = [2,2,3];
    let newarr = arr3.reduceRight((prev,cur,index,arr)=>{//prev:前一个 cur:当前 index:下标 arr:原数组
        // return prev+cur;
        return Math.pow(prev,cur);
    })
    console.log(newarr)
     
    ps:怎么样是不是又涨知识了，大家不要学我let声名这么多次newarr，我是注释这写的，大家要用的话直接，用哪个拿那个就OK。
    这里给大家留一个坑，接下来给大家分享es6，的循环。
    --------------------- 
    作者：王海虎 
    来源：CSDN 
    原文：https://blog.csdn.net/xiaohu12685/article/details/80623622 
    版权声明：本文为博主原创文章，转载请附上博文链接！

发表评论取消回复

表情：

评论列表（有 0 条评论，101人围观）

还没有评论，来说两句吧...

相关阅读

相关 ES6常用解构赋值有哪几种？

ES6常用解构赋值有哪几种？ a.数组的解构赋值 //数组解析赋值，模式匹配 { let [a, b, c] =

左手的ㄟ右手/ 2024年03月26日 12:08/ 0 赞/ 54 阅读

相关 RocketMQ重平衡策略你用过几种？

前言我们简单讲述了`RocketMQ`消费者是如何实现重平衡的，我们在源码中发现默认的重平衡策略是平均分配策略`AllocateMessageQueueAveragel

川长思鸟来/ 2024年03月25日 19:27/ 0 赞/ 128 阅读

相关工作中常见的 6 种设计模式，你用过几种？

前言哈喽，大家好。平时我们写代码呢，多数情况都是流水线式写代码，基本就可以实现业务逻辑了。如何在写代码中找到乐趣呢，我觉得，最好的方式就是：使用设计模式优化自己的业务代

曾经终败给现在/ 2023年09月27日 11:07/ 0 赞/ 179 阅读

相关工作中常见的 6 种设计模式，你用过几种？

前言哈喽，大家好。平时我们写代码呢，多数情况都是流水线式写代码，基本就可以实现业务逻辑了。如何在写代码中找到乐趣呢，我觉得，最好的方式就是：使用设计模式优化自己的业务代

短命女/ 2023年09月27日 10:53/ 0 赞/ 163 阅读

相关工作中常见的 6 种设计模式，你用过几种？

以下文章来源于捡田螺的小男孩，作者捡田螺的小男孩前言哈喽，大家好。平时我们写代码呢，多数情况都是流水线式写代码，基本就可以实现业务逻辑了。如何在写代码中找到乐趣呢

我会带着你远行/ 2023年09月26日 09:08/ 0 赞/ 206 阅读

相关前端开发中JS调试技巧，你知道几种？用过几种？

调试技巧，在任何一项技术研发中都可谓是必不可少的技能。掌握各种调试技巧，必定能在工作中起到事半功倍的效果。譬如，快速定位问题、降低故障概率、帮助分析逻辑错误等等。而在互联网前端

你的名字/ 2023年02月13日 08:59/ 0 赞/ 1 阅读

相关 SpringMVC-方法四种类型返回值总结，你用过几种？

SpringMVC 现在算是 Java 领域的一个基础性框架了，很多人天天用，可是对于 SpringMVC 方法的返回值，你又是否完全清楚呢？今天松哥就来和大家聊一聊 Spri

Myth丶恋晨/ 2022年04月25日 05:34/ 0 赞/ 231 阅读

相关 SpringMVC 方法三种类型返回值总结，你用过几种？

SpringMVC 现在算是 Java 领域的一个基础性框架了，很多人天天用，可是对于 SpringMVC 方法的返回值，你又是否完全清楚呢？今天松哥就来和大家聊一聊 Spri

女爷i/ 2021年10月15日 12:47/ 0 赞/ 381 阅读

相关 SpringMVC 方法三种类型返回值总结，你用过几种？

SpringMVC 现在算是 Java 领域的一个基础性框架了，很多人天天用，可是对于 SpringMVC 方法的返回值，你又是否完全清楚呢？今天松哥就来和大家聊一聊 Spri

港控/mmm°/ 2021年09月25日 15:00/ 0 赞/ 318 阅读

相关跟大家分享一下，前端不算es6，就有八种循环，你用过几种呢

let arr = [{title:'aaaa',read:1000,hot:true}, {title:'bbbb',read:300,

清疚/ 2021年09月17日 13:14/ 0 赞/ 102 阅读