如何使用 reduce 函数 javascript 对对象进行分组

Posted

技术标签:

【中文标题】如何使用 reduce 函数 javascript 对对象进行分组【英文标题】:How To Group Object Using reduce Function javascript 【发布时间】:2018-12-16 09:04:56 【问题描述】:

我已经坚持了 8 天了。

假设这是我的响应对象数组:

var items = [

    name: 'dell-66',
    price: 200,
    id: 12,
,

    name: 'hp-44',
    price: 100,
    id: 10,
,

    name: 'acer-33',
    price: 250,
    id: 33,
,

    name: 'dell-66',
    price: 200,
    id: 12,
,

    name: 'acer-33',
    price: 250,
    id: 33,
,

    name: 'dell-66',
    price: 200,
    id: 12,
,
]

到目前为止,我已经设法使用 reduce 来累积价格。这是执行此操作的代码:

var obj = items.reduce( function (allItems, currentItem) 
var item_name = currentItem.name;
var item_price = currentItem.price;


var total_prices = allItems[item_price] = (allItems[item_price] || 0) +   
item_price;


var result = ;

result[item_name] = 
    item_price:  total_prices,



return Object.assign(allItems, result);
,  )

虽然这可行,但它不会返回我想要的结果,而是返回:


'100': 100,
'200': 600,
'250': 500,
'dell-66':  item_price: 600 ,
'hp-44':  item_price: 100 ,
'acer-33':  item_price: 500  
 

这是我想要的并且需要它(顶部没有额外的键/值):


'dell-66':  item_price: 600 ,
'hp-44':  item_price: 100 ,
'acer-33':  item_price: 500  
 

请问我该如何实现?

【问题讨论】:

【参考方案1】:

你可以这样做。

const items = [
    name: 'dell-66',
    price: 200,
    id: 12,
  , 
    name: 'hp-44',
    price: 100,
    id: 10,
  , 
    name: 'acer-33',
    price: 250,
    id: 33,
  , 
    name: 'dell-66',
    price: 200,
    id: 12,
  , 
    name: 'acer-33',
    price: 250,
    id: 33,
  , 
    name: 'dell-66',
    price: 200,
    id: 12,
  ,
].reduce((res, obj) => 
  res[obj.name] =  
    item_price: (obj.name in res ? res[obj.name].item_price : 0) + obj.price 
  
  return res;
, )

console.log(items);
.as-console-wrapper  max-height: 100% !important; top: 0; 

【讨论】:

天哪!这有效!谢谢!但是你能解释一下我的代码有什么问题吗? @ViveeOmomi 好吧,首先,allItems[item_price]allItems 中寻找item_price 的密钥。又名: '100': value 不是(正如我认为你想要的那样)其值为 item_price 的键,又名: key: 100 【参考方案2】:

您可以使用以下代码:

var items = [

    name: 'dell-66',
    price: 200,
    id: 12,
,

    name: 'hp-44',
    price: 100,
    id: 10,
,

    name: 'acer-33',
    price: 250,
    id: 33,
,

    name: 'dell-66',
    price: 200,
    id: 12,
,

    name: 'acer-33',
    price: 250,
    id: 33,
,

    name: 'dell-66',
    price: 200,
    id: 12,
,
]

let result = items.reduce((result, current) => 
	if(!result[current.name])
		result[current.name] =  item_price: 0 ;
	
	result[current.name].item_price += current.price;
	return result;
, )

console.log(result);

【讨论】:

【参考方案3】:

您可以为此使用地图功能。 请尝试以下代码。

var items = [

    name: 'dell-66',
    price: 200,
    id: 12,
,

    name: 'hp-44',
    price: 100,
    id: 10,
,

    name: 'acer-33',
    price: 250,
    id: 33,
,

    name: 'dell-66',
    price: 200,
    id: 12,
,

    name: 'acer-33',
    price: 250,
    id: 33,
,

    name: 'dell-66',
    price: 200,
    id: 12,
,
]

var rlt = ;

items.map(item => 
  let price = item.price
  let name = item.name
  if (rlt[name]) 
    rlt[name] = rlt[name] + price
   else 
    rlt[name] = price;
  
);
console.log(rlt);

【讨论】:

为什么不使用Array#reduce? 我们也可以为此使用reduce。但我打算展示几个解决方案。 我知道 :) 我只是在问你为什么不选择。我很好奇。 谢谢你,很高兴你的回答,我想知道 Array#map 是否可以做到这一点,现在我知道了,很高兴有多种解决方案。 @ViveeOmomi 很高兴这对您有帮助。

以上是关于如何使用 reduce 函数 javascript 对对象进行分组的主要内容,如果未能解决你的问题,请参考以下文章

JavaScript的Reduce如何分配其价值?

如何形象地解释 JavaScript 中 map,foreach,reduce 间的区别

Javascript中使用reduce

javascript reduce方法用的多么

如何形象地解释 JavaScript 中 map,foreach,reduce 间的区别

如何形象地解释 JavaScript 中 map,foreach,reduce 间的区别