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. rails gem ransack 之模糊搜索

    gem 'ransack' eq: "等于" eq_any: "等于任意值" eq_all: "等于所有值" not_eq: "不 ...

  2. 201871010119-帖佼佼《面向对象程序设计(java)》第十二周学习总结

    博客正文开头格式: 项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://www.cnblogs.com/nw ...

  3. 什么是RMI?

    RMI(Remote Method Invocation,远程方法调用)是用Java在JDK1.2中实现的,它大大增强了Java开发分布式应用的能力.Java作为一种风靡一时的网络开发语言,其巨大的威 ...

  4. 2016/10/21 java中的参数传方式

    参考:http://blog.sina.com.cn/s/blog_59ca2c2a0100qhjx.html http://www.cnblogs.com/caiyao/p/4964176.html

  5. 如何使用charles抓包H5页面内容

    安装charles 这里推荐直接去官网下载 https://www.charlesproxy.com/latest-release/download.do 根据自己的电脑选择合适的安装包,我这里选择m ...

  6. LeetCode刷题总结-树篇(上)

          引子:刷题的过程可能是枯燥的,但程序员们的日常确不乏趣味.分享一则LeetCode上名为<打家劫舍 |||>题目的评论: 如有兴趣可以从此题为起点,去LeetCode开启刷题之 ...

  7. 一起学MyBatis之入门篇(2)

    概述 本文主要讲解MyBatis中类型转换的功能,其实在MyBatis中,提供了默认的数据类型之间的转换,但只是基本数据类型的转换,如果跨类型进行转换,则需要自定义转换类,如java中是boolean ...

  8. JVM 学习笔记一 :JVM类加载机制

    前言: 最近在看JVM相关资料,这里记录下学习笔记,希望自己能坚持学完,打牢基础.   一.类加载过程 1,类从被加载到JVM中开始,到卸载为止,整个生命周期包括:加载.验证.准备.解析.初始化.使用 ...

  9. PyTorch-网络的创建,预训练模型的加载

    本文是PyTorch使用过程中的的一些总结,有以下内容: 构建网络模型的方法 网络层的遍历 各层参数的遍历 模型的保存与加载 从预训练模型为网络参数赋值 主要涉及到以下函数的使用 add_module ...

  10. js反爬学习(一)谷歌镜像

    1. url:https://ac.scmor.com/ 2. target:如下链接 3. 过程分析: 3.1 打开chrome调试,进行元素分析.随便定位一个“现在访问” 3.2 链接不是直接挂在 ...