我发现使用 .filter（） .map（） 和 .reduce（） Array方法 能够帮助减少代码的复杂性和简化许多典型的阵列的数据处理任务。查看#test-Array_methods，您可以确认这些方法几乎与任何现代桌面/移动浏览器兼容。

一个好的方法来了解如何使用 .filter（）.map（） 和 。reduce（） 与 SQL数据操作 的SELECT语句进行比较。请考虑以下SQL查询：

SELECT
category, SUM(amount) as total
FROM transactions
WHERE status = 'active'
GROUP BY category
 

一个常见的SQL命令可以有三种类型的数据操作:映射或选择要显示的字段(category, total)，使用条件过滤数据(status = ‘ active ‘)，以及使用指定某些聚合组(category)的聚合函数(SUM)减少生成汇总数据的结果。在Javascript中，可以使用.filter() .map()和.reduce()执行这些操作

给定Javascript 对象数组中 的以下数据集，我将解释并向您展示每个数组方法的一些用法示例：

var transactions = [
{ id: 4534, date: "2019–01–08", product: 112, price: 21, quantity: 2, taxes: 1.12, declined: false },
{ id: 4535, date: "2019–01–08", product: 232, price: 32, quantity: 3, taxes: 2.19, declined: false },
{ id: 4536, date: "2019–01–08", product: 554, price: 7, quantity: 100, taxes: 10.55, declined: true },
{ id: 4537, date: "2019–01–08", product: 433, price: 21, quantity: 2, taxes: 1.12, declined: false },
{ id: 4538, date: "2019–01–08", product: 112, price: 21, quantity: 4, taxes: 2.24, declined: false }
];
 

filter（）

我们使用 filter（） 作为第一个执行的操作，因为它减少了处理信息的行数。

result = myArray.filter( filterFunc )
 

filterFunc 每次都接受 数组的一个元素 ，并且必须返回** true 以包含 （或** false 以排除） 结果中的该项。

例如：

var activeTransactions = transactions.filter( function (item){
 return !item.declined
})
 

现在activeTransactions将只包含交易，其中declined为true。在此示例中，5个中的4个。这相当于以下SQL查询：

SELECT * FROM transactions WHERE NOT declined
 

map（）

我们可以使用 map（） 来 选择******哪些字段 将成为结果的一部分。

result = myArray.map( mapFunc )
 

mapFunc每次都 占用一个元素myArray，并且必须返回值或对象映射元素属性。

var totals = transactions.map(function(item){
 return { 
 productId: item.product, 
 totalAmount : item.price * item.quantity + item.taxes 
 }
})
 

现在totals将包含一个对象数组，每个对象 只有2个字段 ：productId（别名.product）和totalAmount（从.price .quantity计算.taxes）。这相当于以下SQL查询：

SELECT product as productId, price*quantity+taxes as totalAmount 
FROM transactions
 

reduce（）

最后，我们可以从数据集中获取值的 summary （或只是一个最终值），将行减少为单个元素。

result = myArray.reduce( reduceFunc, initialAccum )
 

reduceFunc 接受一个 累加器 和myArray的 每个元素 ，累积值，并返回最终的summary。initialAccum是结果的初始值，从要累积的值开始（例如， 从零开始 ）。

var total = transactions.reduce(function(accum, item){
 return { 
 total: accum.total + item.quantity*item.price+item.taxes,
 count: accum.count + 1
 }
}, {total: 0, count: 0} )
 

现在total将包含总金额total以及处理了多少笔交易（count）。这相当于以下SQL查询：

SELECT 
SUM(price*quantity+taxes) as 'total', count(1) as 'count' 
FROM transactions
 

有时，您只需返回一个 最终值 ，在这种情况下，您的累加器必须是单个值（0在下一个示例中）：

var total = transactions.reduce(function(accum, item){
 return accum + item.quantity*item.price+item.taxes
}, 0 )
 

混合在一起

最后，由于 .filter（） .map（） 和 .reduce（） 返回数组，你可以在调用链把一切融合在一起，使这样的最终结果：

// Total amount of transactions not declined
var total = 
 transactions
 .filter(function(item){ 
 return !item.declined 
 })
 .map(function(item){ 
 return { 
 totalAmount : item.price * item.quantity + item.taxes 
 }
 })
 .reduce(function(accum, item){
 return accum + item.totalAmount
 }, 0 )
 

这相当于以下SQL查询的结果：

SELECT 
SUM(price*quantity+taxes) 
FROM transactions
WHERE NOT declined
 

自己做

您可以尝试自己运行并修改以下Javascript演示以及更多示例：

var transactions = [
{ id: 4534, date: "2019–01–08", product: 112, price: 21, quantity: 2, taxes: 1.12, declined: false },
{ id: 4535, date: "2019–01–08", product: 232, price: 32, quantity: 3, taxes: 2.19, declined: false },
{ id: 4536, date: "2019–01–08", product: 554, price: 7, quantity: 100, taxes: 10.55, declined: true },
{ id: 4537, date: "2019–01–08", product: 433, price: 21, quantity: 2, taxes: 1.12, declined: false },
{ id: 4538, date: "2019–01–08", product: 112, price: 21, quantity: 4, taxes: 2.24, declined: false }
]
// Total amount of transactions not declined
var total1 = 
 transactions
 .filter(function(item){ 
 return !item.declined 
 })
 .map(function(item){ 
 return { 
 totalAmount : item.price * item.quantity + item.taxes 
 }
 })
 .reduce(function(accum, item){
 return accum + item.totalAmount
 }, 0 )
 
 
document.body.innerText += '\ntotal1: '+ JSON .stringify(total1)
// Total amount of not declined transactions per product
var total2 = 
 transactions
 .filter(function(item){ 
 return !item.declined 
 })
 .map(function(item){ 
 return { 
 product: item.product,
 totalAmount : item.price * item.quantity + item.taxes 
 }
 })
 .reduce(function(accum, item){
 if (!accum[item.product]){
 accum[item.product] = 0 
 }
 accum[item.product] += item.totalAmount
 return accum
 }, { } )
document.body.innerText += '\ntotal2: '+JSON.stringify(total2)
 
// Min and max total amount of not declined transactions
var total3 = 
 transactions
 .filter(function(item){ 
 return !item.declined 
 })
 .map(function(item){ 
 return item.price * item.quantity + item.taxes
 })
 .reduce(function(accum, item){
 accum.min = Math.min(item, accum.min)
 accum.max = Math.max(item, accum.max)
 return accum
 }, { min:999999999, max: 0 })
 
document.body.innerText += '\ntotal3: '+JSON.stringify(total3)
 

翻译自：