使用 JavaScript 对数组中的多个元素进行分组

Question

我有一个数组

[
  { price: 10 },
  { price: 10 },
  { price: 10 },
  { price: 10 },
  { price: 20 },
  { price: 20 },
]

我想把它变成

[
  { numElements: 4, price: 10 },
  { numElements: 2, price: 20 },
]

我已经尝试使用 arr.reduce((prev, curr) => ..., []) 来完成此操作，但我不知道该怎么做。

Answer 1

var hash = {}, result = [];

 arr.forEach(function(el){
   if(hash[el.price]){
     hash[el.price].numElements++;
   }else{
     result.push(hash[el.price]={price:el.price,numElements:1});
  }
});

Run

可以使用散列 table 进行价格查询。或者使用 reduce 和 find:

 arr.reduce((res,{price})=>
  (( res.find(el=>el.price===price) || res[res.push({price,numElements:0})-1] )
  .numElements++,res)
);

Run

Answer 2

传统方法可能会使用 for/loop 来处理数据，但现在 JavaScript 有许多功能方法可以提供帮助。此代码使用 reduce 和 map。以您想要的格式获取数据是一个两个阶段的过程。

首先，使用 reduce 创建一个散列 table，使用价格作为键（因为您知道每个价格都是唯一的：

const obj = arr.reduce((p, c) => {

  // If price exists as a key its value by 1
  // otherwise set it to 1.
  p[c.price] = ++p[c.price] || 1;
  return p;
}, {});

输出

{
  "10": 4,
  "20": 2
}

就目前而言，您已经获得了一个非常好的对象，您可以通过 key/price 访问它，我可能会停在那里：

obj['10'] // 4

但是，如果您想将该数据转换为问题中的格式，map 对象键指向 return 新对象数组。

const out = Object.keys(obj).map(key => {
  return { price: +key, numElements: obj[key] };
});

DEMO

Answer 3

你可以试试这个：

let arr = [
  { price: 10 },
  { price: 10 },
  { price: 10 },
  { price: 10 },
  { price: 20 },
  { price: 20 },
]

let result = []

let counter = {}

arr.forEach( el => {

  if (!counter[el.price]) counter[el.price] = 1
  else counter[el.price]++

  console.log(counter[el.price])

})

for (let id in counter) {
  result.push({numElements: counter[id], price: id})
}

Answer 4

假设数据是按 price 属性排序的，对于单个 .reduce()，您可以按如下方式进行；

var data   = [{ price: 10 }, { price: 10 }, { price: 10 }, { price: 10 }, { price: 20 }, { price: 20 }],
    result = data.reduce((r,d,i) => i ? r[r.length-1].price === d.price ? (r[r.length-1].numElemenets++, r)
                                                                        : (r.push(Object.assign({}, d, {numElemenets: 1})),r)
                                      : [Object.assign({}, d, {numElemenets: 1})], {});
console.log(result);

Answer 5

您可以在结果数组中查找价格，如果找不到则插入一个新对象。

var data = [{ price: 10 }, { price: 10 }, { price: 10 }, { price: 10 }, { price: 20 }, { price: 20 }],
    grouped = data.reduce((r, { price }) => {
        var t = r.find(p => price === p.price);
        t || r.push(t = { numElements: 0, price });
        t.numElements++;
        return r;
    }, []);
    
console.log(grouped);

使用 JavaScript 对数组中的多个元素进行分组

Group multiple elements in array with JavaScript

javascript

arrays

array-reduce