JavaScript高阶函数遍历迭代对象与数组,forEach,map,filter,reduce

简介: JavaScript高阶函数遍历迭代对象与数组,forEach,map,filter,reduce

下面演示下面四个常用遍历

循环(迭代):forEach((item(值),index(下标))=>{});


foreach遍历数组的话,使用break不能中断循环,使用return也不能返回到外层函数。


过滤器:filter()


汇总:reduce()


映射:map()


现在假设我们有这三个需求

1.需求:将所有小于100的数字


2.需求:将所有小于100的数字进行转化:全部*2


3.需求:将所new2Nums数字相加,得到最终结果


直接代码详细注释

    // filter/map/reduce
    // filter中回调函数有一个要求:必须返回一个boolean值
    // true:当返回true时,函数内部会自动将这次回调的n加入到新的数组中
    // false:当返回false时,函数内部会过滤掉这次的n
    // 下面都是 函数式编程(第一公民:函数)
    const nums = [10, 20, 111, 222, 444, 40, 50]
    // 一、链式编程
    // let total = nums.filter(n => n < 100).map(n => n * 2).reduce((pre, n) => pre + n);
    // console.log(total);
    //二、普通写法
    // 1.filter函数的使用
    // 把小于100的都筛选出来了
    // 10,20,40,50
    let newNums = nums.filter(function (n) {
      return n < 100
    })
    console.log(newNums);
    // 2.map函数的使用
    // 有几个数就循环几次,返回新数组
    //20,40,80,100
    let new2Nums = newNums.map(function (n) {   //20
      return n * 2
    })
    console.log(new2Nums);
    // 3.reduce函数的使用
    // 数组几个值遍历几次
    // reduce作用对数组中所有内容进行汇总
    let total = new2Nums.reduce(function (preValue, n) {
      return preValue + n
    }, 0)
    // 第一次:preValue 0 n 20
    // 第二次:preValue 20 n 40
    // 第三次:preValue 60 n 80
    // 第四次:preValue 140 n 100
    //240
    console.log(total);

最后补充小知识点

编程范式:命令式编程/声明式编程

编程范式:面向对象编程(第一公民:对象)/函数式编程(第一公民:函数)

相关文章
ES5常见的数组方法:forEach ,map ,filter ,some ,every ,reduce (除了forEach,其他都有回调,都有return)
ES5常见的数组方法:forEach ,map ,filter ,some ,every ,reduce (除了forEach,其他都有回调,都有return)
564 154
|
存储
`map()`方法在什么场景下会比 `forEach()`方法更高效?
综上所述,当需要对数组元素进行复杂的转换并生成新数组、进行链式调用和函数式编程、处理元素之间存在明确映射关系的情况以及与其他数组方法结合使用时,`map()`方法比`forEach()`方法更高效,能够使代码更加简洁、清晰和易于维护。
227 32
|
存储 JavaScript 前端开发
如何选择使用`map()`方法和`forEach()`方法?
选择使用`map()`方法还是`forEach()`方法主要取决于操作的目的、是否需要返回值、代码的可读性和维护性等因素。在实际开发中,需要根据具体的业务需求和场景来灵活选择合适的方法,以实现更高效、更易读和更易维护的代码。
206 3
|
存储 JavaScript 前端开发
`forEach()`方法和`map()`方法哪个执行效率更高?
`forEach()`方法和`map()`方法哪个执行效率更高?
数组方法中的`forEach()`方法和`map()`方法有什么区别?
数组方法中的`forEach()`方法和`map()`方法有什么区别?
|
JavaScript 前端开发
JavaScript 中 五种迭代数组的方法 every some map filter forEach
本文介绍了JavaScript中五种常用数组迭代方法:every、some、filter、map和forEach,并通过示例代码展示了它们的基本用法和区别。
|
8月前
|
安全 Java 数据库连接
让我们讲解一下 Map 集合遍历的方式
我是小假 期待与你的下一次相遇 ~
318 43
|
11月前
使用 entrySet 遍历 Map 类集合 KV
使用 entrySet 遍历 Map 类集合 KV
|
存储 前端开发 API
ES6的Set和Map你都知道吗?一文了解集合和字典在前端中的应用
该文章详细介绍了ES6中Set和Map数据结构的特性和使用方法,并探讨了它们在前端开发中的具体应用,包括如何利用这些数据结构来解决常见的编程问题。
ES6的Set和Map你都知道吗?一文了解集合和字典在前端中的应用
|
存储 安全 Java
java集合框架复习----(4)Map、List、set
这篇文章是Java集合框架的复习总结,重点介绍了Map集合的特点和HashMap的使用,以及Collections工具类的使用示例,同时回顾了List、Set和Map集合的概念和特点,以及Collection工具类的作用。
java集合框架复习----(4)Map、List、set