filter ,map ,reduce三个高阶函数的使用

普通方法解决数据问题

  1.  const nums1= [10,20,111,222,444,40,50]
    
         // 需求1.取出小于100的数字
    // 常规思想,用一个数组保存取出的数字,遍历里面的项,小于100的追加进新数组
    let newNums = []
    for(let n of nums1){
    if(n<100){
    newNums.push(n)
    }
    }
    console.log(newNums) // 需求2.再将所有小于100的数字进行转化:全部乘2
    let newNums2 = []
    for(let n of newNums){
    newNums2.push(n*2)
    }
    console.log(newNums2) // 需求3.再将所有数据相加
    let total =0 ;
    for(let n of newNums2){
    total +=n
    }
    console.log(total);
  2. 经过三次创建新数组和对数组的操作拿到了最终想要的数据

引入三个高阶函数

  1.     const nums2 = [10,20,111,222,444,40,50]
    // filter (数组数据过滤)
    // arr.filter( callbackfn(n) ) ->回调函数有一个要求,必须返回一个boolean值
    // 回调函数中的参数n会依此拿arr数组中的每一项
    // 当返回true的时候,函数内部会自动将这次回调的n加入到新的数组中
    // 当返回的false的时候,函数内部会过滤这次的 let new1 = nums2.filter(function(n){
    return n < 100
    })
    console.log(new1); // map (数组数据变异)
    // arr.map( callbackfn(n) ) ->回调函数与filter不同,有返回值,但是不是boolean值
    // 每次返回的值都作为内部创建的数组的项依此添加进去
    let new2 = new1.map(function(n){
    return n*2
    })
    console.log(new2); // reduce (数组数据汇总(相乘,相加))
    // arr.reduce( callbackfn (preValue , n) , num )
    // preValue上一次返回的值,n为调用该方法数组的每一项 num为perValue的初始值
    let sum = new2.reduce((preValue,n)=>{
    return preValue + n
    },0)
    console.log(sum);

高阶函数的链式调用

  1.  // 链式调用
    // 高阶函数的高阶用法:因为这三个函数都会返回一个数组,那我门是不是连续使用此方法
    let sum1 = nums2.filter((n)=>{
    return n<100
    }).map((n)=>{
    return n*2
    }).reduce((e,n)=>{
    return e+n
    },0)
    console.log(sum1);

filter,map,reduce三个数组高阶函数的使用的更多相关文章

  1. JavaScript系列--JavaScript数组高阶函数reduce()方法详解及奇淫技巧

    一.前言 reduce() 方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值. reduce() 可以作为一个高阶函数,用于函数的 compose. reduce()方 ...

  2. JavaScript(1)高阶函数filter、map、reduce

    前言 需求:有这样一个数组[10, 20, 110, 200, 60, 30, 40] 1.筛选出数组中小于100的元素 2.将筛选出的每个元素的值x2 3.完成第2步之后,将数组中的所有元素加起来 ...

  3. 8.Javascript-map、reduce、filter 等高阶函数

    高阶函数 高阶函数是对其他函数进行操作的函数,可以将它们作为参数或通过返回它们.简单来说,高阶函数是一个函数,它接收函数作为参数或将函数作为输出返回. 例如Array.prototype.map,Ar ...

  4. Swift 烧脑体操(三) - 高阶函数

    前言 Swift 其实比 Objective-C 复杂很多,相对于出生于上世纪 80 年代的 Objective-C 来说,Swift 融入了大量新特性.这也使得我们学习掌握这门语言变得相对来说更加困 ...

  5. 5. vue常用高阶函数及综合案例

    一. 常用的数组的高阶函数 假设, 现在有一个数组, 我们要对数组做如下一些列操作 1. 找出小于100的数字: 2. 将小于100的数字, 全部乘以2: 3. 在2的基础上, 对所有数求和: 通常我 ...

  6. 【python】python函数式编程、高阶函数

    1.map() : python内置的高阶函数,接收一个函数f和一个list,并通过把函数f依次作用在list的每个元素上,得到一个新的list并            返回. def f(x): r ...

  7. scala中的高阶函数

    版权申明:转载请注明出处. 文章来源:http://bigdataer.net/?p=332 排版乱?请移步原文获得更好阅读体验 1.scala中的函数 scala是一门面向对象和函数式编程相结合的语 ...

  8. 高阶组件&&高阶函数(一)

    antd里面的form表单方面,遇到一个高阶函数,以及高阶组件,于是看了一下这方面内容,前辈们的文章写得也非常详细,这里就稍微kobe一下 高阶函数与高阶组件 高阶函数: 高阶函数,是一种特别的函数, ...

  9. JavaScript学习笔记(十)——高阶函数之map,reduce,filter,sort

    在学习廖雪峰前辈的JavaScript教程中,遇到了一些需要注意的点,因此作为学习笔记列出来,提醒自己注意! 如果大家有需要,欢迎访问前辈的博客https://www.liaoxuefeng.com/ ...

随机推荐

  1. 轻松构建基于 Serverless 架构的弹性高可用音视频处理系统

    前言 随着计算机技术和 Internet 的日新月异,视频点播技术因其良好的人机交互性和流媒体传输技术倍受教育.娱乐等行业青睐,而在当前, 云计算平台厂商的产品线不断成熟完善, 如果想要搭建视频点播类 ...

  2. 详解 TCP 超时与重传机制——长文预警

    上一篇介绍 TCP 的文章「TCP 三次握手,四次挥手和一些细节」反馈还不错,还是蛮开心的,这次接着讲一讲关于超时和重传那一部分. 我们都知道 TCP 协议具有重传机制,也就是说,如果发送方认为发生了 ...

  3. 【玩转SpringBoot】看似复杂的Environment其实很简单

    喜欢写代码,讨厌配环境 我相信这十个字的小标题代表了大多数码农的心声. 十年前读大学时,学校开设了C语言还有C++.但是学习这两种语言,对于新手来说非常没有成就感. 于是我就在校门口买个光盘,装个VS ...

  4. Linux vi与vim使用

    vi与vimvi编辑器是所有Unix及Linux系统下标准的编辑器,他就相当于windows系统中的记事本一样,它的强大不逊色于任何最新的文本编辑器.他是我们使用Linux系统不能缺少的工具.由于对U ...

  5. 浅析堆栈段,BBS段,数据段,代码段

    文章目录 1. 进程,线程 2. 堆栈段 3. BBS段 4. 代码段 5. 数据段 6. 例子 7. 总结 1. 进程,线程 所谓进程是指在系统中能独立运行并作为资源分配的基本单位,程序段,数据段和 ...

  6. IDEA 解决Project SDK is not defined

    IDEA 解决Project SDK is not defined 问题如下: 点击蓝字Setup SDK. 点击configure... 点击+,选择JDK. 选择jdk所在路径,点击确定. 选中, ...

  7. Linux上用IP转发使内部网络连接互联网

    IP转发的概念: 使 Linux 机器像路由器一样将数据从一个网络发送到另一个网络.所以,它能作为一个路由器或者代理服务器,实现将一个连接的互联网或者网络连接共享给多个客户端机器. 1. 启用 IPv ...

  8. 《Web Development with Go》Mangodb查询一条记录

    select加where package main import ( "fmt" "log" "time" "gopkg.in/m ...

  9. Azure 上通过Automation 实现定时开关虚拟机

    更多内容,请关注公众号: Azure Automation 可以提供一些自动化的功能,比如我们可以指定在每天早上6点开启虚拟机,每天晚上8点关闭虚拟机.同时还提供一些基于监控参数的自动化配置.今天的主 ...

  10. (八十)c#Winform自定义控件-分割线标签-HZHControls

    官网 http://www.hzhcontrols.com 前提 入行已经7,8年了,一直想做一套漂亮点的自定义控件,于是就有了本系列文章. GitHub:https://github.com/kww ...