Map、Filter、Reduce 与 For 循环（语法）
地图
筛选
减少
结尾
这篇文章的目的并非要评判哪种范式更好，而只是为了展示一些常见的命令式模式及其功能等效形式。
有时，如果能将新事物与你已经熟悉的事物联系起来，并得到一份来回转换的路线图，学习起来就会更容易。
之前，我曾在 JavaScript 的函数式编程模式与命令式编程模式的文章中做过类似的事情。
地图
map接受一个列表，并对列表中的每个元素运行一个函数，返回相同长度的列表。
至关重要的
const double = x => x * 2
const input = [ 1, 2, 3 ]
const output = []
for (let i = 0; i < input.length; i++) {
output.push(double(input[i]))
}
output //=> [ 2, 4, 6 ]
功能
const double = x => x * 2
const input = [ 1, 2, 3 ]
const output = input.map(double)
output //=> [ 2, 4, 6 ]
筛选
filter接受一个列表作为参数，并返回一个包含所有与谓词匹配的项的列表。在本例中，isEven谓词为 `$($)`。
至关重要的
const isEven = x => x % 2 === 0
const input = [ 1, 2, 3, 4, 5 ]
const output = []
for (let i = 0; i < input.length; i++) {
if (isEven(input[i])) {
output.push(input[i])
}
}
output //=> [ 2, 4, 6 ]
功能
const isEven = x => x % 2 === 0
const input = [ 1, 2, 3, 4, 5 ]
const output = input.filter(isEven)
output //=> [ 2, 4, 6 ]
减少
reduce接受一个列表作为参数，并返回任意数据结构。它可以是另一个列表，也可以是一个对象。
简单的
至关重要的
const add = (x, y) => x + y
const input = [ 1, 2, 3 ]
const initial = 0
let output = initial
for (let i = 0; i < input.length; i++) {
output = add(output, input[i])
}
output //=> 6
功能
const add = (x, y) => x + y
const input = [ 1, 2, 3 ]
const initial = 0
const output = input.reduce(add, initial)
output //=> 6
复杂的
至关重要的
const isEven = x => x % 2 === 0
const double = x => x * 2
const input = [ 1, 2, 3, 4, 5 ]
const initial = []
let output = initial
for (let i = 0; i < input.length; i++) {
if (isEven(input[i])) {
output.push(double(input[i]))
}
}
output //=> [ 4, 8 ]
功能
可以像下面这样写，但要注意它会遍历数组两次。
const isEven = x => x % 2 === 0
const double = x => x * 2
const input = [ 1, 2, 3, 4, 5 ]
const initial = []
let output =
input
.filter(isEven)
.map(double)
output //=> [ 4, 8 ]
或者，您可以创建一个 reducer，在一次迭代中filter同时实现这两个功能。map
const isEven = x => x % 2 === 0
const double = x => x * 2
const input = [ 1, 2, 3, 4, 5 ]
const initial = []
const reducer = (filter, map) => (acc, x) => {
if (filter(x)) {
acc.push(map(x))
}
return acc
}
const output = input.reduce(reducer(isEven, double), initial)
output //=> [ 4, 8 ]
结尾
我目前可以承接兼职合同工作（C#、JavaScript、React）。请通过Twitter或LinkedIn联系我。
我的文章大量运用了函数式 JavaScript，如果您需要更多函数式编程方面的知识，请在这里或在 Twitter 上关注我@joelnet！
更多文章：
解构 Map、Filter 和 Reduce；
问我一些关于函数式编程的傻问题；
让我们一起打造一个 DEV.to CLI；
我们来聊聊 JavaScript 的自动生成文档工具。
