filter,map,reduce三个数组高阶函数的使用
filter ,map ,reduce三个高阶函数的使用
普通方法解决数据问题
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);
- 经过三次创建新数组和对数组的操作拿到了最终想要的数据
引入三个高阶函数
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);
高阶函数的链式调用
// 链式调用
// 高阶函数的高阶用法:因为这三个函数都会返回一个数组,那我门是不是连续使用此方法
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三个数组高阶函数的使用的更多相关文章
- JavaScript系列--JavaScript数组高阶函数reduce()方法详解及奇淫技巧
一.前言 reduce() 方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值. reduce() 可以作为一个高阶函数,用于函数的 compose. reduce()方 ...
- JavaScript(1)高阶函数filter、map、reduce
前言 需求:有这样一个数组[10, 20, 110, 200, 60, 30, 40] 1.筛选出数组中小于100的元素 2.将筛选出的每个元素的值x2 3.完成第2步之后,将数组中的所有元素加起来 ...
- 8.Javascript-map、reduce、filter 等高阶函数
高阶函数 高阶函数是对其他函数进行操作的函数,可以将它们作为参数或通过返回它们.简单来说,高阶函数是一个函数,它接收函数作为参数或将函数作为输出返回. 例如Array.prototype.map,Ar ...
- Swift 烧脑体操(三) - 高阶函数
前言 Swift 其实比 Objective-C 复杂很多,相对于出生于上世纪 80 年代的 Objective-C 来说,Swift 融入了大量新特性.这也使得我们学习掌握这门语言变得相对来说更加困 ...
- 5. vue常用高阶函数及综合案例
一. 常用的数组的高阶函数 假设, 现在有一个数组, 我们要对数组做如下一些列操作 1. 找出小于100的数字: 2. 将小于100的数字, 全部乘以2: 3. 在2的基础上, 对所有数求和: 通常我 ...
- 【python】python函数式编程、高阶函数
1.map() : python内置的高阶函数,接收一个函数f和一个list,并通过把函数f依次作用在list的每个元素上,得到一个新的list并 返回. def f(x): r ...
- scala中的高阶函数
版权申明:转载请注明出处. 文章来源:http://bigdataer.net/?p=332 排版乱?请移步原文获得更好阅读体验 1.scala中的函数 scala是一门面向对象和函数式编程相结合的语 ...
- 高阶组件&&高阶函数(一)
antd里面的form表单方面,遇到一个高阶函数,以及高阶组件,于是看了一下这方面内容,前辈们的文章写得也非常详细,这里就稍微kobe一下 高阶函数与高阶组件 高阶函数: 高阶函数,是一种特别的函数, ...
- JavaScript学习笔记(十)——高阶函数之map,reduce,filter,sort
在学习廖雪峰前辈的JavaScript教程中,遇到了一些需要注意的点,因此作为学习笔记列出来,提醒自己注意! 如果大家有需要,欢迎访问前辈的博客https://www.liaoxuefeng.com/ ...
随机推荐
- 6种微服务RPC框架,你知道几个?
开源 RPC 框架有哪些呢? 一类是跟某种特定语言平台绑定的,另一类是与语言无关即跨语言平台的. 跟语言平台绑定的开源 RPC 框架主要有下面几种. Dubbo:国内最早开源的 RPC 框架,由阿里巴 ...
- Spring Cloud第九篇 | 分布式服务跟踪Sleuth
本文是Spring Cloud专栏的第九篇文章,了解前八篇文章内容有助于更好的理解本文: Spring Cloud第一篇 | Spring Cloud前言及其常用组件介绍概览 Spring Cl ...
- 【原创】这道Java基础题真的有坑!我也没想到还有续集。
前情回顾 自从我上次发了<这道Java基础题真的有坑!我求求你,认真思考后再回答.>这篇文章后.我通过这样的一个行文结构: 解析了小马哥出的这道题,让大家明白了这题的坑在哪里,这题背后隐藏 ...
- 《Java数据结构》树形结构
树形结构是一层次的嵌套结构. 一个树形结构的外层和内层有相似的结构, 所以这种结构多可以递归的表示.经典数据结构中的各种树形图是一种典型的树形结构:一颗树可以简单的表示为根, 左子树, 右子树. 左子 ...
- 两个变量值交换的方法总结(js,python)
方法一: 临时变量法 <script> var num1 = 10; var num2 = 20; var temp;//定义临时变量 temp = num1; num1 = num2; ...
- 如何下载Vimeo视频
MediaHuman YouTube Downloader是应用在Mac上的一款非常优秀的YouTube视频下载工具,YouTube Downloader破解版将帮助你快速完成视频下载,而不会挂断.您 ...
- 去掉 Idea 中注入 Mapper 警告的方法
使用 Idea 的时候,自动装配 Mybatis 的 mapper.会一直出现红色波浪线的警告.看着难受.下面提供几种方式 方式一 为 @Autowired 注解设置required = false ...
- wx-一个简单页面
一个具有顶部,底部和中间的html页面,但没有js <view class="root"> <!-- 标签栏的页签 固定高度 --> <view cl ...
- 关于选用ccflow你所担心的问题都在这里为您解答
致ccflow客户 感谢大家ccbpm的认可,我们会一如既往的以踏实的技术来回应大家的支持. 针对大家疑问最多的几个问题,在这里我我为大家一一解答. 代码一直在更新,不稳定问题 版本控制我们做的差,是 ...
- 【译】浅谈SOLID原则
SOLID原则是一种编码的标准,为了避免不良设计,所有的软件开发人员都应该清楚这些原则.SOLID原则是由Robert C Martin推广并被广泛引用于面向对象编程中.正确使用这些规范将提升你的代码 ...