JavaScript(1)高阶函数filter、map、reduce
前言
需求:有这样一个数组[10, 20, 110, 200, 60, 30, 40]
1.筛选出数组中小于100的元素
2.将筛选出的每个元素的值x2
3.完成第2步之后,将数组中的所有元素加起来
普通方法
如果我们还没接触过filter
、map
、reduce
,那么就是用for
循环
<script>
list = [10, 20, 30, 40, 60, 110, 200]
newList = []
newList2 = []
total = 0
// 第1次for循环把小于100的数加入新的数组newList
for (item of list){
if (item<100){
newList.push(item)
}
}
// 第2次for循环把所有的元素值乘以2
for (item of newList){
newValue = item * 2
newList2.push(newValue)
}
// 第3次for循环把数组中的全部元素加起来
for (item of newList2){
total += item
}
console.log(total)
</script>
以上写起来非常繁琐,还要定义很多变量,代码阅读起来也不是很好,其实我们有更好的方式,下面介绍
filter
检测数值元素,并返回符合条件所有元素的数组。
定义和用法
filter()
方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素
注意
filter()
不会对空数组进行检测。
filter()
不会改变原始数组。
语法
array.filter(function(currentValue,index,arr), thisValue)
参数说明如下:
- function(currentValue, index, arr):必填函数,数组中的每个元素都会执行这个函数
- currentValue:必填,当前元素的值
- index:可选。当前元素的索引值
- arr:可选。当前元素属于的数组对象
- thisValue:可选。对象作为该执行回调时使用,传递给函数,用作
this
的值。如果省略了thisValue
,this
的值为undefined
小练习
使用filter
函数筛选出[10, 20, 110, 200, 60, 30, 40]
小于100的
list = [10, 20, 30, 40, 60, 110, 200]
newList = list.filter(function (n) {
return n < 100
})
console.log(newList)
打印结果
[10, 20, 30, 40, 60]
map
通过指定函数处理数组的每个元素,并返回处理后的数组。
定义和用法
map()
方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。
map()
方法按照原始数组元素顺序依次处理元素。
注意
注意: map()
不会对空数组进行检测。
注意: map()
不会改变原始数组。
语法
array.map(function(currentValue,index,arr), thisValue)
参数说明如下:
- function(currentValue, index, arr):必填函数,数组中的每个元素都会执行这个函数
- currentValue:必填,当前元素的值
- index:可选。当前元素的索引值
- arr:可选。当前元素属于的数组对象
- thisValue:可选。对象作为该执行回调时使用,传递给函数,用作
this
的值。如果省略了thisValue
,或者传入null
、undefined
,那么回调函数的this
为全局对象。
小练习
将数组[10, 20, 30, 40, 60]
中的每个元素值乘以2
<script>
list = [10, 20, 30, 40, 60]
newList = list.map(function (n) {
return n * 2
})
console.log(newList)
</script>
打印结果
[20, 40, 60, 80, 120]
reduce
将数组元素计算为一个值(从左到右)
定义和用法
reduce()
方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。
reduce()
可以作为一个高阶函数,用于函数的 compose
。
注意:reduce()
对于空数组是不会执行回调函数的。
语法
array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
参数说明如下:
- function(total,currentValue, index,arr):必填函数,数组中的每个元素都会执行这个函数
- total:必填。初始值, 或者计算结束后的返回值。
- currentValue:必填,当前元素的值
- index:可选。当前元素的索引值
- arr:可选。当前元素属于的数组对象
- initialValue:可选。传递给函数的初始值
小练习
计算数组之和[20, 40, 60, 80, 120]
<script>
list = [20, 40, 60, 80, 120]
newList = list.reduce(function (total, n) {
return total + n
}, 0)
console.log(newList)
</script>
打印结果
320
使用filter和map和reduce完成案例
上面我们分别介绍了3个高阶函数,接下来结合起来使用
方式1
<script>
list = [10, 20, 110, 200, 60, 30, 40]
newList = list.filter(function (n) {
return n < 100
}).map(function (n) {
return n * 2
}).reduce(function (total, n) {
return total + n
})
console.log(newList)
</script>
方式2
<script>
list = [10, 20, 110, 200, 60, 30, 40]
newList = list.filter(n => n < 100).map(n => n * 2).reduce((total, n) => total+n);
console.log(newList)
</script>
以后我们就可以一行代码完成上面的需求,而不需要使用for循环了
JavaScript(1)高阶函数filter、map、reduce的更多相关文章
- 高阶函数 filter map reduce
const app=new Vue({ el:'#app', data:{ books:[{ id:1, name:"算法导论", data: '2006-1', price:39 ...
- python 函数式编程:高阶函数,map/reduce
python 函数式编程:高阶函数,map/reduce #函数式编程 #函数式编程一个特点就是,允许把函数本身作为参数传入另一个函数,还允许返回一个函数 #(一)高阶函数 f=abs f print ...
- js基础--高阶函数(map,reduce,filter,sort)
高阶函数 一个函数可以接收另一个函数作为参数,这种函数就称之为高阶函数,编写高阶函数,就是让函数的参数能够接收别的函数. function add (x,y,f){return f(x)+f(y)} ...
- Python进阶:函数式编程(高阶函数,map,reduce,filter,sorted,返回函数,匿名函数,偏函数)...啊啊啊
函数式编程 函数是Python内建支持的一种封装,我们通过把大段代码拆成函数,通过一层一层的函数调用,就可以把复杂任务分解成简单的任务,这种分解可以称之为面向过程的程序设计.函数就是面向过程的程序设计 ...
- (转)Python进阶:函数式编程(高阶函数,map,reduce,filter,sorted,返回函数,匿名函数,偏函数)
原文:https://www.cnblogs.com/chenwolong/p/reduce.html 函数式编程 函数是Python内建支持的一种封装,我们通过把大段代码拆成函数,通过一层一层的函数 ...
- [py][lc]python高阶函数(匿名/map/reduce/sorted)
匿名函数 - 传入列表 f = lambda x: x[2] print(f([1, 2, 3])) # x = [1,2,3] map使用 传入函数体 def f(x): return x*x r ...
- Python学习笔记系列——高阶函数(map/reduce)
一.map #变量可以指向函数,函数的参数能接受变量,那么一个函数就可以接受另一个函数作为参数,这种函数被称之为高阶函数 def add(x,y,f): return f(x)+f(y) print( ...
- 高阶函数:map()/reduce()
Python内建了map()和reduce()函数. 如果你读过Google的那篇大名鼎鼎的论文“MapReduce: Simplified Data Processing on Large Clus ...
- python的高阶函数(map,reduce,filter)
Map函数 Map()函数接受两个参数,第一个参数是函数,第二个参数是序列(list,tuple),map将函数依次作用到序列上的每一个元素上,并发结果作为新的list返回 其中map的第一个参数的函 ...
- js 高阶函数(map/reduce/filter/sort)
1.map - 方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值(注:map不会对空数组进行检测,不会改变原始数组) 语法:array.map(function(currentValu ...
随机推荐
- linux跨文件复制粘贴
跨文件是这样的: 复制a.txt的第20行至第30行到b.txt中vi a.txt:2010yy:e b.txtp
- 网络编程-UDP的服务器和客户端----keep on going never give up
1 //**************************************服务器********************************************** 2 #inclu ...
- 查看 swappiness 值
Swap的使用频率 发表于 2017-06-02 | 分类于 Linux | 评论数: 通过调整swappiness的值, 可以调整系统使用 swap 的频率 该值越小, 表示越大限度的使用物理 ...
- keepalived的脑裂问题与解决
Keepalived的作用是检测服务器的状态,如果有一台web服务器宕机,或工作出现故障,Keepalived将检测到,并将有故障的服务器从系统中剔除,同时使用其他服务器代替该服务器的工作,当服务器工 ...
- Java中JDK,JRE和JVM之间的关系-(转载)
初学JAVA很容易被其中的很多概念弄的傻傻分不清楚,首先从概念上理解一下吧,JDK(Java Development Kit)简单理解就是Java开发工具包,JRE(Java Runtime Envi ...
- nginx 配置 conf stream
nginx从1.9.0版本开始,新增了ngx_stream_core_module模块,使nginx支持四层负载均衡.默认编译的时候该模块并未编译进去,需要编译的时候添加--with-stream参数 ...
- 使用python实现钉钉告警通知功能
前言:日常工作中告警通知是必不可少的,一般会使用邮件.钉钉.企业微信等,今天分享一下使用python实现钉钉告警 一. 钉钉机器人创建 登录钉钉客户端,创建一个群,把需要收到报警信息的人员都拉到这个群 ...
- .Net RabbitMQ实战指南——客户端开发
开发中关键的Class和Interface有Channel.Connection.ConnectionFactory.Consumer等,与RabbitMQ相关的开发工作,基本上是围绕Connecti ...
- Xilinx FPGA全局介绍
Xilinx FPGA全局介绍 现场可编程门阵列 (FPGA) 具有诸多特性,无论是单独使用,抑或采用多样化架构,皆可作为宝贵的计算资产:许多设计人员并不熟悉 FPGA,亦不清楚如何将这类器件整合到设 ...
- nvJPEG库
nvJPEG库 GPU加速的JPEG解码器,编码器和代码转换器 nvJPEG库是高性能的GPU加速库,用于解码,编码和转码JPEG格式的图像.nvJPEG2000库用于解码JPEG 2000格式的图像 ...