前言

需求:有这样一个数组[10, 20, 110, 200, 60, 30, 40]

1.筛选出数组中小于100的元素

2.将筛选出的每个元素的值x2

3.完成第2步之后,将数组中的所有元素加起来

普通方法

如果我们还没接触过filtermapreduce,那么就是用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 的值。如果省略了 thisValuethis 的值为 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,或者传入 nullundefined,那么回调函数的 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的更多相关文章

  1. 高阶函数 filter map reduce

    const app=new Vue({ el:'#app', data:{ books:[{ id:1, name:"算法导论", data: '2006-1', price:39 ...

  2. python 函数式编程:高阶函数,map/reduce

    python 函数式编程:高阶函数,map/reduce #函数式编程 #函数式编程一个特点就是,允许把函数本身作为参数传入另一个函数,还允许返回一个函数 #(一)高阶函数 f=abs f print ...

  3. js基础--高阶函数(map,reduce,filter,sort)

    高阶函数 一个函数可以接收另一个函数作为参数,这种函数就称之为高阶函数,编写高阶函数,就是让函数的参数能够接收别的函数. function add (x,y,f){return f(x)+f(y)} ...

  4. Python进阶:函数式编程(高阶函数,map,reduce,filter,sorted,返回函数,匿名函数,偏函数)...啊啊啊

    函数式编程 函数是Python内建支持的一种封装,我们通过把大段代码拆成函数,通过一层一层的函数调用,就可以把复杂任务分解成简单的任务,这种分解可以称之为面向过程的程序设计.函数就是面向过程的程序设计 ...

  5. (转)Python进阶:函数式编程(高阶函数,map,reduce,filter,sorted,返回函数,匿名函数,偏函数)

    原文:https://www.cnblogs.com/chenwolong/p/reduce.html 函数式编程 函数是Python内建支持的一种封装,我们通过把大段代码拆成函数,通过一层一层的函数 ...

  6. [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 ...

  7. Python学习笔记系列——高阶函数(map/reduce)

    一.map #变量可以指向函数,函数的参数能接受变量,那么一个函数就可以接受另一个函数作为参数,这种函数被称之为高阶函数 def add(x,y,f): return f(x)+f(y) print( ...

  8. 高阶函数:map()/reduce()

    Python内建了map()和reduce()函数. 如果你读过Google的那篇大名鼎鼎的论文“MapReduce: Simplified Data Processing on Large Clus ...

  9. python的高阶函数(map,reduce,filter)

    Map函数 Map()函数接受两个参数,第一个参数是函数,第二个参数是序列(list,tuple),map将函数依次作用到序列上的每一个元素上,并发结果作为新的list返回 其中map的第一个参数的函 ...

  10. js 高阶函数(map/reduce/filter/sort)

    1.map - 方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值(注:map不会对空数组进行检测,不会改变原始数组) 语法:array.map(function(currentValu ...

随机推荐

  1. class的大小

    3个问题: sizeof一个空类是多大?为什么?编译器为什么这么做? 在这个类中添加一个virtual函数后再sizeof,这时是多大?为什么? 将这个类再virtual继承一个其它的空类,这是多大? ...

  2. Introduction to x265 Rate Control Algorithm

    The rate control in x265 is the same as x264's implementation, which is mostly empirical. It include ...

  3. Linux使用gcc编译时设置编码格式

    我们编写 C 程序时,可以使用 ANSI 编码,或是 UTF-8 编码:在编译程序时,可以使用以下的选项告诉编译器: -finput-charset=GB2312 -finput-charset=UT ...

  4. ES6对象的新增方法的使用

    Object.assign Object Object.assign(target, ...sources) 将所有可枚举属性的值从一个或多个源对象复制到目标对象 参数: target 目标对象 so ...

  5. [转载]性能测试工具 2 步解决 too many open files 的问题,让服务器支持更多连接数

    [转载]性能测试工具 2 步解决 too many open files 的问题,让服务器支持更多连接数 大话性能 · 2018年10月09日 · 最后由 大话性能 回复于 2018年10月09日 · ...

  6. Linux学习之路-Linux-at及cron命令【7】---20171215

    Linux学习之路-Linux-at及cron命令[7]---20171215 DannyExia000人评论986人阅读2017-12-24 17:28:03   ntpdate 命令 [root@ ...

  7. Java 事务的隔离级别

    引言 之前关于事务的文章已介绍了事务的概念以及事务的四个属性(ACID),相信你对事务应该有所认识和了解. 本篇文章是关于事务的隔离性,介绍数据库提供的多种隔离级别. 数据库访问的并发性问题 所谓事务 ...

  8. 9.8-9 nice & renice

    nice:调整程序运行时的优先级        nice命令是一个当程序启动时,修改程序运行优先级的命令. Linux的优先级范围是从-20(最大优先级)到19(最小优先级).优先级越高的程序占用CP ...

  9. 原生基础js脚本实现--在线答题系统

    全部代码在最下面----需要的直接往下翻 html方面的代码  : 正确的答案 value=s <!DOCTYPE html> <html lang="en"&g ...

  10. CSS(2)盒子模型、定位浮动

    盒子模型 盒子模型:一个盒子中主要的属性就5个.width与height.padding.border.margin.盒子模型标准有两种为标准盒模型和IE盒模型.学习上以标准盒子模型为主 width和 ...