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

最后补充小知识点

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

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

相关文章
|
5月前
|
索引
ES5常见的数组方法:forEach ,map ,filter ,some ,every ,reduce (除了forEach,其他都有回调,都有return)
ES5常见的数组方法:forEach ,map ,filter ,some ,every ,reduce (除了forEach,其他都有回调,都有return)
|
5月前
|
JavaScript 前端开发
js map和reduce
js map和reduce
|
4月前
|
存储 JavaScript 前端开发
js中map属性
js中map属性
37 0
|
4月前
|
前端开发 JavaScript 索引
JavaScript 数组常用高阶函数总结,包括插入,删除,更新,反转,排序等,如map、splice等
JavaScript数组的常用高阶函数,包括遍历、插入、删除、更新、反转和排序等操作,如map、splice、push、pop、reverse等。
33 0
|
5月前
|
JavaScript 前端开发
JavaScript 中 五种迭代数组的方法 every some map filter forEach
本文介绍了JavaScript中五种常用数组迭代方法:every、some、filter、map和forEach,并通过示例代码展示了它们的基本用法和区别。
|
9月前
|
JavaScript 前端开发 索引
问js的forEach和map的区别
JavaScript中的`forEach`和`map`都是数组迭代方法。`forEach`遍历数组但不修改原数组,无返回值;它接受回调函数处理元素。`map`则遍历数组并返回新数组,新数组元素为回调函数处理后的结果。两者都接收元素、索引和数组作为回调函数参数。
66 7
|
9月前
|
存储 JavaScript 前端开发
面试题:问js的forEach和map的区别
面试题:问js的forEach和map的区别
|
前端开发 JavaScript 索引
浅谈 Javascript 中的 forEach 和 map 之间的区别
在 Javascript 中数组的迭代最常用的两个函数:forEach和map。可能很多人认为这两个函数在工作方式上是相同的,它们都进行迭代并输出数组的每一项。本文就来介绍一下forEach和map的差异,并因此加深对两个函数的理解。
174 0
浅谈 Javascript 中的 forEach 和 map 之间的区别
|
3月前
|
JavaScript 前端开发
JavaScript中的原型 保姆级文章一文搞懂
本文详细解析了JavaScript中的原型概念,从构造函数、原型对象、`__proto__`属性、`constructor`属性到原型链,层层递进地解释了JavaScript如何通过原型实现继承机制。适合初学者深入理解JS面向对象编程的核心原理。
48 1
JavaScript中的原型 保姆级文章一文搞懂
|
7月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
138 2

热门文章

最新文章