JS array is de duplicated, the ID is the same, and a value is added and merged

Case study 1：

Suppose you need to deal with the array structure .

 let arr =[
   {
    id:'1', value:10},
   {
    id:'1', value:20},
   {
    id:'2', value:10}
 ]

// The final desired array structure , same id, hold value Value addition 
// let newArr=[
// {id:'1',value:30},
// {id:'2',value:20},
// ]

The implementation is simple , Write it down for later review

let idArr = []  // identical id Put in the same array 
let resultArr = []  // The final result array 

for(let i = 0;i < arr.length; i++){
    
  let index = idArr.indexOf(arr[i].id)
  if(index > -1){
      // It's the same id exist , obtain index Index position 
    resultArr[index].value += arr[i].value  // Take the same id Of value Add up 
  }else{
    
    idArr.push(arr[i].id)
    resultArr.push(arr[i])
  }
}

Print the results

If this kind of data is processed more in the project , We can Encapsulate in a way , Pass in array that will do .

 import {
     delSomeObjValue } from '@/utils/tool.ts'
 const originArr = [
    {
     id: '1', value: 10 },
    {
     id: '1', value: 20 },
    {
     id: '2', value: 10 },
    {
     id: '88', value: 2 },
    {
     id: '88', value: 5 },
    {
     id: '20', value: 50 }
  ]
  
 console.log(delSomeObjValue(originArr, 'id', 'value'))

//tool.ts
 /* arr  Array to process  keyName  Used to judge the same key name  keyValue  Key value for calculation  */
export function delSomeObjValue(arr:any[], keyName:string, valueName:string) {
    
  const idArr:any[] = []  //  same id Put in the same array 
  const resultArr:any[] = [] //  The final result array 
  for (let i = 0; i < arr.length; i++) {
    
    const index = idArr.indexOf(arr[i][keyName])
    if (index > -1) {
     //  It's the same id exist , obtain index Index position 
      resultArr[index][valueName] += arr[i][valueName]  // Take the same id Of value Add up 
    } else {
    
      idArr.push(arr[i][keyName])
      console.log(idArr) //  Print the results ['1', '2', '88', '20']
      resultArr.push(arr[i])
    }
  }
  return resultArr
}

Case study 2：

This is an online example , I think the idea is very good , For practice .
Suppose you need to deal with the array structure .

const originData = [
    {
     name: 'tony', id: '1', age: '20' },
    {
     name: 'jack', id: '2', age: '21' },
    {
     name: 'tony', id: '3', age: '50' },
    {
     name: 'jack', id: '4', age: '10' },
    {
     name: 'mark', id: '5', age: '22' },
    {
     name: 'mark', id: '6', age: '40' }
  ]
  
//  The final desired array structure 
// name Same item , Merge into an array object 
//const afterData = [
   //{name: "tony",origin: [{ name: "tony", id: "1", age: "20" },{ name: "tony", id: "3", age: "50" }]},
   //{name: "jack",origin: [{ name: "jack", id: "2", age: "21" },{ name: "jack", id: "4", age: "10" }]},
  // {name: "mark",origin: [{ name: "mark", id: "5", age: "22" },{ name: "mark", id: "6", age: "40" }]}
// ]

Merge implementation code ：

onMounted(() => {
    
  const originData = [
    {
     name: 'tony', id: '1', age: '20' },
    {
     name: 'jack', id: '2', age: '21' },
    {
     name: 'tony', id: '3', age: '50' },
    {
     name: 'jack', id: '4', age: '10' },
    {
     name: 'mark', id: '5', age: '22' },
    {
     name: 'mark', id: '6', age: '40' }
  ]

  const nameArr = []  // Deposit name, Used to find out whether there is the same name The situation of 
  const resultData = []  // Merge result array 

  for (let i = 0; i < originData.length; i++) {
    
    if (nameArr.indexOf(originData[i].name) === -1) {
     //  No same found name Words 
      resultData.push({
    
        name: originData[i].name,
        origin: [originData[i]]
      })
      nameArr.push(originData[i].name)
    } else {
     //  It's the same name Merge objects 
      for (let j = 0; j < resultData.length; j++) {
    
        if (resultData[j].name === originData[i].name) {
    
          resultData[j].origin.push(originData[i])
          break
        }
      }
    }
  }
  console.log(resultData, 'console.log(resultData)')
})

Print the results ：

I have written articles like merging and reorganizing arrays before ,vue Merge various types of data , Add data of the same type