从数组中获取唯一值，但同时显示其重复的数量（javascript-reactjs）

我试图在我的组件中显示唯一的值，但它旁边还有一个计数器，告诉我它有多少个重复项

const data = [
  {id: 555, name: 'Sales', person: 'Jordan'},
  {id: 555, name: 'Sales', person: 'Bob'},
  {id: 555, name: 'Sales', person: 'John'},
  {id: 777, name: 'Accounts Payable', person: 'Rhoda'},
  {id: 777, name: 'Accounts Payable', person: 'Harry'},
  {id: 888, name: 'IT', person: 'Joe'},
  {id: 888, name: 'IT', person: 'Jake'},
]

let unique = data.filter((v,i,a)=>a.findIndex(t=>(t.id === v.id))===i)

function App() {
return (
<div>
  {unique.map((arr) => (
    <p>{arr.name}    {amount of duplicate}</p>
  ))}
  </div>
  )
 }

下面的代码片段给出了一个我在组件中映射的唯一数组——我如何修改它，使它也能像计数器一样显示，以查看它有多少重复

const data = [
  {id: 555, name: 'Sales', person: 'Jordan'},
  {id: 555, name: 'Sales', person: 'Bob'},
  {id: 555, name: 'Sales', person: 'John'},
  {id: 777, name: 'Accounts Payable', person: 'Rhoda'},
  {id: 777, name: 'Accounts Payable', person: 'Harry'},
  {id: 888, name: 'IT', person: 'Joe'},
  {id: 888, name: 'IT', person: 'Jake'},
]

let unique = data.filter((v,i,a)=>a.findIndex(t=>(t.id === v.id))===i)

function App() {
return (
<div>
  {unique.map((arr) => (
    <p>{arr.name}    {amount of duplicate}</p>
  ))}
  </div>
  )
 }

let unique=data.filter（（v，i，a）=>a.findIndex（t=>（t.id==v.id））==i）
函数App（）{
返回(
{唯一的.map（（arr）=>(
{arr.name}{重复数量}

))}
)
}

想到的第一种方法是使用

forEach（）

而不是

map（）

当遇到重复时，在相应的

唯一的
条目内增加一个计数器

一种可能效率较低的方法是对
数据运行
filter（）
查询，将其与
arr
值进行比较。
您可以使用where id作为键，如下所示：

data.reduce((acc, cur) => {
   const count =  acc[cur.id]?.count || 0;
   acc[cur.id] = {...cur, count: count + 1};
   return acc;
}, {})

或者，如果您希望使用数组格式，可以选择此选项，但效率较低：

data.reduce((acc, cur) => {
   const existingItem = acc.find(item => cur.id === item.id);
   if(existingItem) {
      existingItem.count++;
   }
   else {
      acc.push({...cur, count: 1});    
   }
   return acc;
}, [])

这是另一种选择：

var unique = {}
    data.map(r => {
      if(typeof unique[r.id] === 'undefined') unique[r.id] = {...r, duplicate:0}
      else unique[r.id].duplicate++
    })
    unique = Object.values(unique)
    console.log(unique)
var unique={}
data.map（r=>{
如果（typeof unique[r.id]==='undefined'）unique[r.id]={…r，重复：0}
else唯一[r.id]。重复++
})
唯一=对象。值（唯一）
console.log（唯一）
您可以使用以下代码

    var unique = data.filter((v,i,a)=>a.findIndex(t=>(t.id === v.id))===i)

    for(let obj of data){
        unique.find(function(item, i){
            if(item.id == obj.id){
                if(unique[i]["count"]) 
                    unique[i]["count"] += 1
                else
                    unique[i]["count"] = 1;
                
                return i;
            }
            });
        }

    return (
        <div>
        {unique.map(({id, name, count}, index)=>
            <p key={index}>{id}  {name} {count}</p>
        )}
        </div>
        
        )

顺便说一句，您实际上在寻找的是一个“groupby”函数。我决定使用array-one，这是一个非常棒的实现，完全符合我的要求。我需要研究一下reduce，以准确地理解你所做的事情。基本上，你在数组上迭代，并根据某些条件创建一个累加器，同样的事情也可以通过一个常规的for循环实现。这不是火箭科学。Reduce应该用于聚合，如果您希望获得数组的和，或者希望根据类似于本例中的字段对它们进行分组。