接受map_[译] 图解 Map、Reduce 和 Filter 数组方法
- 原文地址:An Illustrated (and Musical) Guide to Map, Reduce, and Filter Array Methods
- 原文作者:Una Kravets
- 译文出自:掘金翻译计划
- 本文永久链接:github.com/xitu/gold-m…
- 译者:熊贤仁
- 校对者:Endone、Reaper622
图解 Map、Reduce 和 Filter 数组方法
map、reduce 和 filter 是三个非常实用的 JavaScript 数组方法,赋予了开发者四两拨千斤的能力。我们直接进入正题,看看如何使用(并记住)这些超级好用的方法!
Array.map()
Array.map()
根据传递的转换函数,更新给定数组中的每个值,并返回一个相同长度的新数组。它接受一个回调函数作为参数,用以执行转换过程。
let newArray = oldArray.map((value, index, array) => {...
});
一个帮助记住 map 的方法:Morph Array Piece-by-Piece(逐个改变数组)
你可以使用 map 代替 for-each 循环,来遍历并对每个值应用转换函数。这个方法适用于当你想更新数组的同时保留原始值。它不会潜在地删除任何值(filter 方法会),也不会计算出一个新的输出(就像 reduce 那样)。map 允许你逐个改变数组。一起来看一个例子:
[1, 4, 6, 14, 32, 78].map(val => val * 10)
// the result is: [10, 40, 60, 140, 320, 780]
上面的例子中,我们使用一个初始数组([1, 4, 6, 14, 32, 78]
),映射每个值到它自己的十倍(val * 10
)。结果是一个新数组,初始数组的每个值被这个等式转换:[10, 40, 60, 140, 320, 780]
。
Array.filter()
当我们想要过滤数组的值到另一个数组,新数组中的每个值都通过一个特定检查,Array.filter()
这个快捷实用的方法就派上用场了。
类似搜索过滤器,filter 基于传递的参数来过滤出值。
举个例子,假定有个数字数组,想要过滤出大于 10 的值,可以这样写:
[1, 4, 6, 14, 32, 78].filter(val => val > 10)
// the result is: [14, 32, 78]
如果在这个数组上使用 map 方法,比如在上面这个例子,会返回一个带有 val > 10
判断的和原始数组长度相同的数组,其中每个值都经过转换或者检查。如果原始值大于 10,会被转换为真值。就像这样:
[1, 4, 6, 14, 32, 78].map(val => val > 10)
// the result is: [false, false, false, true, true, true]
但是 filter 方法,只返回真值。因此如果所有值都执行指定的检查的话,结果的长度会小于等于原始数组。
把 filter 想象成一个漏斗。部分混合物会从中穿过进入结果,而另一部分则会被留下并抛弃。
假设宠物训练学校有一个四只狗的小班,学校里的所有狗都会经过各种挑战,然后参加一个分级期末考试。我们用一个对象数组来表示这些狗狗:
const students = [{name: "Boops",finalGrade: 80},{name: "Kitten",finalGrade: 45},{name: "Taco",finalGrade: 100},{name: "Lucy",finalGrade: 60}
]
如果狗狗们的期末考试成绩高于 70 分,它们会获得一个精美的证书;反之,它们就要去重修。为了知道证书打印的数量,要写一个方法来返回通过考试的狗狗。不必写循环来遍历数组的每个对象,我们可以用 filter
简化代码!
const passingDogs = students.filter((student) => {return student.finalGrade >= 70
})/*
passingDogs = [{name: "Boops",finalGrade: 80},{name: "Taco",finalGrade: 100}
]
*/
你也看到了,Boops 和 Taco 是好狗狗(其实所有狗都很不错),它们取得了通过课程的成就证书!利用箭头函数的隐式返回特性,一行代码就能实现。因为只有一个参数,所以可以删掉箭头函数的括号:
const passingDogs = students.filter(student => student.finalGrade >= 70)/*
passingDogs = [{name: "Boops",finalGrade: 80},{name: "Taco",finalGrade: 100}
]
*/
Array.reduce()
reduce()
方法接受一个数组作为输入值并返回一个值。这点挺有趣的。reduce 接受一个回调函数,回调函数参数包括一个累计器(数组每一段的累加值,它会[像雪球一样增长](Understanding the Almighty Reducer | CSS-Tricks)),当前值,和索引。reduce 也接受一个初始值作为第二个参数:
let finalVal = oldArray.reduce((accumulator, currentValue, currentIndex, array) => {...
}), initalValue;
来写一个炒菜函数和一个作料清单:
// our list of ingredients in an array
const ingredients = ['wine', 'tomato', 'onion', 'mushroom']// a cooking function
const cook = (ingredient) => {return `cooked ${ingredient}`
}
如果我们想要把这些作料做成一个调味汁(开玩笑的),用 reduce()
来归约!
const wineReduction = ingredients.reduce((sauce, item) => {return sauce += cook(item) + ', '}, '')// wineReduction = "cooked wine, cooked tomato, cooked onion, cooked mushroom, "
初始值(这个例子中的 ''
)很重要,它决定了第一个作料能够进行烹饪。这里输出的结果不太靠谱,自己炒菜时要当心。下面的例子就是我要说到的情况:
const wineReduction = ingredients.reduce((sauce, item) => {return sauce += cook(item) + ', '})// wineReduction = "winecooked tomato, cooked onion, cooked mushroom, "
最后,确保新字符串的末尾没有额外的空白,我们可以传递索引和数组来执行转换:
const wineReduction = ingredients.reduce((sauce, item, index, array) => {sauce += cook(item)if (index < array.length - 1) {sauce += ', '}return sauce}, '')// wineReduction = "cooked wine, cooked tomato, cooked onion, cooked mushroom"
可以用三目操作符、模板字符串和隐式返回,写的更简洁(一行搞定!):
const wineReduction = ingredients.reduce((sauce, item, index, array) => {return (index < array.length - 1) ? sauce += `${cook(item)}, ` : sauce += `${cook(item)}`
}, '')// wineReduction = "cooked wine, cooked tomato, cooked onion, cooked mushroom"
记住这个方法的简单办法就是回想你怎么做调味汁:把多个作料归约到单个。
和我一起唱起来!
我想要用一首歌来结束这篇博文,给数组方法写了一个小调,来帮助你们记忆:
Video
如果发现译文存在错误或其他需要改进的地方,欢迎到 掘金翻译计划 对译文进行修改并 PR,也可获得相应奖励积分。文章开头的 本文永久链接 即为本文在 GitHub 上的 MarkDown 链接。
掘金翻译计划 是一个翻译优质互联网技术文章的社区,文章来源为 [掘金](掘金 - juejin.im - 一个帮助开发者成长的社区) 上的英文分享文章。内容覆盖 Android、iOS、前端、后端、区块链、产品、设计、人工智能等领域,想要查看更多优质译文请持续关注 掘金翻译计划、[官方微博](Sina Visitor System)、知乎专栏。
接受map_[译] 图解 Map、Reduce 和 Filter 数组方法相关推荐
- 用scheme重写Python的三大函数map reduce 和filter
重写过程中,发现这种做法能加深对递归的理解,而且reduce还体现了函数式编程是如何通过参数传递来实现命令式编程中的状态改变的. (define (imap f x . y)(if (null? y) ...
- Python自学记录——高阶函数map/reduce、filter、sorted
Python内置了四个强大的函数,如标题所示,下面来记录说明下: map 看见此 map 需要注意,python中的 map 和 java 中的 map,是不同的,java中的 map 与 pytho ...
- Python基础(六)—函数式编程(内部函数、闭包、lambda、filter/map/reduce/sorce、偏函数)
内部函数 Python中函数的作用域由def关键字界定,函数内的代码访问变量的方式是从其所在层级由内向外,若往外直至全局作用域都查找不到的话代码会抛异常. 主要看以下代码的差别~~ "&qu ...
- Python高级特性: 函数编程 lambda, filter,map,reduce
一.概述 Python是一门多范式的编程语言,它同时支持过程式.面向对象和函数式的编程范式.因此,在Python中提供了很多符合 函数式编程 风格的特性和工具. 以下是对 Python中的函数式编程 ...
- python进阶:闭包、map/reduce/filter函数、lambda函数、装饰器
函数式编程 一.闭包 python一切皆对象 一切皆对象意味着,所有类型均可被赋值,传参~:函数可以当做参数传递,也可以被当做返回值返回:在其他一些语言中函数仅是一段代码块. 闭包的定义与用法 如何验 ...
- Python基础-map/reduce/filter
一.map Python内置函数,用法及说明如下: class map(object):"""map(func, *iterables) --> map objec ...
- Python进阶:函数式编程(高阶函数,map,reduce,filter,sorted,返回函数,匿名函数,偏函数)...啊啊啊...
函数式编程 函数是Python内建支持的一种封装,我们通过把大段代码拆成函数,通过一层一层的函数调用,就可以把复杂任务分解成简单的任务,这种分解可以称之为面向过程的程序设计.函数就是面向过程的程序设计 ...
- Python函数式编程,map/reduce,filter和sorted
什么是函数式编程? 与面向对象编程(Object-oriented programming)和过程式编程(Procedural programming)并列的编程范式. 最主要的特征是,函数是第一等公 ...
- py函数式编程(高阶函数map/reduce/filter/sorted、闭包函数/返回函数、匿名函数lamber、@装饰器decorator、偏函数functool.partial())
#py函数式编程.py #高阶函数map/reduce/filter/sorted.闭包函数/返回函数.匿名函数lamber.@装饰器decorator.偏函数functool.partial()# ...
最新文章
- [Dynamic Language] Python File Operator
- java中的排序算法——插入排序详解
- PowerShell【变量篇】
- 关于JWT(Json Web Token)的思考及使用心得
- order by 中 使用decode
- 太赞了!超炫的页面切换动画效果【附源码下载】
- Groovy入门教程
- 单独计算机械台班费套什么定额,2017年造价《工程计价》:预算定额中机械台班消耗量的计算...
- 仿淘宝头像上传功能(一)——前端篇。
- 共享锁(S锁)和排它锁(X锁)
- 如何在SVN中忽略某个文件或文件夹
- 匀思电商:抖音短视频四大主流变现方式,你都知道哪些?
- 尚硅谷-宋红康-MySQL高级性能篇
- linux jfs文件名长度,Linux环境下使用JFS文件系统
- sql语句执行顺序及简单优化
- php保留两位小叔_PHP价格格式化,保留两位小数
- 9个offer,12家公司
- Taday——文件操纵(1)
- 《STL源码剖析》读书笔——(1)空间配置器
- 【遗传规划/计算智能】 彻底学会 DEAP 框架,从零搭建 GP
热门文章
- GC之G1垃圾收集器
- ACL 2019 | 图表示解决长文本关系匹配问题:腾讯提出概念交互图算法
- k8s 基础介绍及概念
- 极其实用的sql脚本【建议收藏】
- Hadoop权威指南 _03_第I部分Hadoop基础知识_第1章初识Hadoop.
- JAVA程序设计----数组基础
- 哈夫曼编解码(C语言)
- 【Java】多线程SynchronizedVolatile、锁升级过程 - 预习+第一天笔记
- 【Centos】CentOS7 安装 JDK11.0.3
- leetcode 69. x 的平方根(C语言)