登陆

如何向SQL用户解释Javascript .filter(),map() 和 reduce()

admin 2019-10-28 222人围观 ,发现0个评论



我发现运用.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指令如何向SQL用户解释Javascript .filter(),map() 和 reduce()能够有三种类型的数据操作:映射或挑选要显现的字段(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", produc渔船公媳妇t: 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
如何向SQL用户解释Javascript .filter(),map() 和 reduce()}
})
.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.ma如何向SQL用户解释Javascript .filter(),map() 和 reduce()x)
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

请关注微信公众号
微信二维码
不容错过
Powered By Z-BlogPHP