我发现使用.filter（） .map（）和.reduce（） Array方法能够帮助减少代码的复杂性和简化许多典型的阵列的数据处理任务。查看http://kangax.github.io/compat-table/es5/#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)

翻译自：https://medium.com/@franciscoigor/how-to-explain-javascript-filter-map-and-reduce-to-sql-users-8f5b2d9726e6