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);

最后补充小知识点

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

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

相关文章
|
2天前
|
存储 JavaScript 索引
js开发:请解释什么是ES6的Map和Set,以及它们与普通对象和数组的区别。
ES6引入了Map和Set数据结构。Map的键可以是任意类型且有序,与对象的字符串或符号键不同;Set存储唯一值,无重复。两者皆可迭代,支持for...of循环。Map有get、set、has、delete等方法,Set有add、delete、has方法。示例展示了Map和Set的基本操作。
16 3
|
15天前
|
存储 JavaScript 索引
JS中数组的相关方法介绍
JS中数组的相关方法介绍
|
15天前
|
JavaScript Java
JS有趣的灵魂 清空数组
JS有趣的灵魂 清空数组
|
4天前
|
JavaScript 前端开发 开发者
JavaScript中的错误处理:try-catch语句与错误对象
【4月更文挑战第22天】JavaScript中的错误处理通过try-catch语句和错误对象实现。try块包含可能抛出异常的代码,catch块捕获并处理错误,finally块则无论是否出错都会执行。错误对象提供关于错误的详细信息,如类型、消息和堆栈。常见的错误类型包括RangeError、ReferenceError等。最佳实践包括及时捕获错误、提供有用信息、不忽略错误、利用堆栈信息和避免在finally块中抛错。
|
8天前
|
JavaScript 前端开发 索引
JavaScript 数组中的增、删、改、查
JavaScript 数组中的增、删、改、查
|
10天前
|
JavaScript
【Js】检查Date对象是否为Invalid Date
【Js】检查Date对象是否为Invalid Date
14 0
|
10天前
|
存储 JavaScript 前端开发
JavaScript的引用数据类型主要包括对象
【4月更文挑战第16天】JavaScript的引用数据类型主要包括对象
16 4
|
JavaScript 前端开发 索引
|
2月前
|
JavaScript
Node.js【GET/POST请求、http模块、路由、创建客户端、作为中间层、文件系统模块】(二)-全面详解(学习总结---从入门到深化)
Node.js【GET/POST请求、http模块、路由、创建客户端、作为中间层、文件系统模块】(二)-全面详解(学习总结---从入门到深化)
27 0
|
2月前
|
消息中间件 Web App开发 JavaScript
Node.js【简介、安装、运行 Node.js 脚本、事件循环、ES6 作业队列、Buffer(缓冲区)、Stream(流)】(一)-全面详解(学习总结---从入门到深化)
Node.js【简介、安装、运行 Node.js 脚本、事件循环、ES6 作业队列、Buffer(缓冲区)、Stream(流)】(一)-全面详解(学习总结---从入门到深化)
77 0