【问题标题】:How To Group Object Using reduce Function javascript如何使用 reduce 函数 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 } 
 }

请问我该如何实现?

【问题讨论】:

    标签: javascript ecmascript-6 functional-programming reduce


    【解决方案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 很高兴这对您有帮助。
      猜你喜欢
      • 1970-01-01
      • 2018-10-19
      • 1970-01-01
      • 2018-12-07
      • 2023-01-12
      • 1970-01-01
      • 2021-11-21
      • 2020-08-24
      相关资源
      最近更新 更多