js数组去重,id相同对某值相加合并

案例1:

假设需要处理的数组结构。

let arr =[
{id:'1', value:10},
{id:'1', value:20},
{id:'2', value:10}
] //最终想要的数组结构,相同的id,把value值相加
// let newArr=[
// {id:'1',value:30},
// {id:'2',value:20},
// ]

实现方式很简单,记录下来方便以后回顾

let idArr = []  //相同id放在同一数组中
let resultArr = [] //最终结果数组 for(let i = 0;i < arr.length; i++){
let index = idArr.indexOf(arr[i].id)
if(index > -1){ //有相同id存在的话,获取index索引位置
resultArr[index].value += arr[i].value //取相同id的value累加
}else{
idArr.push(arr[i].id)
resultArr.push(arr[i])
}
}

打印结果

如果项目中处理这种数据多的话,我们可以封装成一个方法,传入数组即可。

 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 需要处理的数组
keyName 用于判断相同的键名
keyValue 用于计算的键值
*/
export function delSomeObjValue(arr:any[], keyName:string, valueName:string) {
const idArr:any[] = [] // 相同的id放在同一数组中
const resultArr:any[] = [] // 最终结果数组
for (let i = 0; i < arr.length; i++) {
const index = idArr.indexOf(arr[i][keyName])
if (index > -1) { // 有相同id存在的话,获取index索引位置
resultArr[index][valueName] += arr[i][valueName] //取相同id的value累加
} else {
idArr.push(arr[i][keyName])
console.log(idArr) // 打印结果['1', '2', '88', '20']
resultArr.push(arr[i])
}
}
return resultArr
}

案例2:

这是网上的例子,觉得思路很不错,拿来练习的。
假设需要处理的数组结构。

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' }
] // 最终想要的数组结构
// name相同的项,合并成一个数组对象
//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" }]}
// ]

合并实现代码:

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 = [] //存放name,用来查找是否有相同name的情况
const resultData = [] //合并结果数组 for (let i = 0; i < originData.length; i++) {
if (nameArr.indexOf(originData[i].name) === -1) { // 没找到相同name的话
resultData.push({
name: originData[i].name,
origin: [originData[i]]
})
nameArr.push(originData[i].name)
} else { // 有相同name合并对象
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)')
})

打印结果:

js数组去重,id相同对某值相加合并的更多相关文章

  1. js 数组去重求和 (转载)

    方法一:js数组id去重,value值相加问题 来源:https://www.jianshu.com/p/8f79e31b46ed // js let arr = [ { id: 1, value: ...

  2. js数组去重的4种方法

    js数组去重,老生长谈,今天对其进行一番归纳,总结出来4种方法 贴入代码前 ,先对浏览器Array对象进行支持indexOf和forEach的polyfill Array.prototype.inde ...

  3. JS 数组去重(数组元素是对象的情况)

    js数组去重有经典的 几种方法 但当数组元素是对象时,就不能简单地比较了,需要以某种方式遍历各值再判断是否已出现. 因为: 1.如果是哈希判断法,对象作哈希表的下标,就会自动转换成字符型类型,从而导致 ...

  4. JS数组去重的几种常见方法

    JS数组去重的几种常见方法 一.简单的去重方法 // 最简单数组去重法 /* * 新建一新数组,遍历传入数组,值不在新数组就push进该新数组中 * IE8以下不支持数组的indexOf方法 * */ ...

  5. js数组去重五种方法

    今天来聊一聊JS数组去重的一些方法,包括一些网上看到的和自己总结的,总共5种方法(ES5). 第一种:遍历数组法 这种方法最简单最直观,也最容易理解,代码如下: var arr = [2, 8, 5, ...

  6. js数组去重的方法(转)

    JS数组去重的几种常见方法 一.简单的去重方法 // 最简单数组去重法 /* * 新建一新数组,遍历传入数组,值不在新数组就push进该新数组中 * IE8以下不支持数组的indexOf方法 * */ ...

  7. JS数组去重的6种算法实现

    1.遍历数组法 最简单的去重方法,实现思路:新建一新数组,遍历传入数组,值不在新数组就加入该新数组中:注意点:判断值是否在数组的方法"indexOf"是ECMAScript5 方法 ...

  8. js数组去重解决方案

    js数组去重是前端面试中经常被问的题目,考察了面试者对js的掌握,解决问题的思路,以及是否具有专研精神.曾经一位前端界大神告诉我,解决问题的方式有很多种,解决问题时多问问自己还有没有其他的方法,探求最 ...

  9. 前端面试手写代码——JS数组去重

    目录 1 测试用例 2 JS 数组去重4大类型 2.1 元素比较型 2.1.1 双层 for 循环逐一比较(es5常用) 2.1.2 排序相邻比较 2.2 查找元素位置型 2.2.1 indexOf ...

随机推荐

  1. Java SE 8 新增特性

    Java SE 8 新增特性 作者:Grey 原文地址: Java SE 8 新增特性 源码 源仓库: Github:java_new_features 镜像仓库: GitCode:java_new_ ...

  2. Luogu3426 [POI2005]SZA-Template (KMP)(未完成)

    未理解透,鬼知道怎么A的 蒟蒻交了个乱猜贪心搞了10pts,一翻题解群佬乱舞,最后DP解决 $\exists i - next[i] <= j, f[j] = f[next[i]] $ #inc ...

  3. Luogu3398 仓鼠找sugar (LCA)

    第一发lg[]没开够RE了,下了数据本地一直停止运行,还以为是dfs死了,绝望一交,A了... 判断\(x\)是否在路径\(s-t\)上,只需满足 \(dep_{x} >= dep_{LCA(s ...

  4. Java开发学习(二十五)----使用PostMan完成不同类型参数传递

    一.请求参数 请求路径设置好后,只要确保页面发送请求地址和后台Controller类中配置的路径一致,就可以接收到前端的请求,接收到请求后,如何接收页面传递的参数? 关于请求参数的传递与接收是和请求方 ...

  5. 微软Azure配置中心 App Configuration (二):Feature Flag 功能开关特性

    写在前面 Web服务开发过程中我们经常有这样的需求: 某些功能我必须我修改了配置才启用,比如新用户注册送券等: 某个功能需到特定的时间才启用,过后就失效,比如春节活动等: 某些功能,我想先对10%的用 ...

  6. CF1204E Natasha, Sasha and the Prefix Sums (卡塔兰数推理)

    题面 题解 把题意变换一下,从(0,0)走到(n,m),每次只能网右或往上走,所以假设最大前缀和为f(n),那么走的时候就要到达但不超过 y = x-f(n) 这条线, 我们可以枚举答案,然后乘上方案 ...

  7. JZOJ3542冒泡排序

    题面 下面是一段实现冒泡排序算法的C++代码: for (int i=1;i<=n-1;i++)  for (int j=1;j<=n-i ;j++)  if(a[j]>a[j+1] ...

  8. Springboot连接数据库

    好家伙, 这里使用的软件是IDEA 2021 1.新建项目 2.更改配置项目文件目录 更改前: 更改后: 2.1.更改pom.xml文件 在该文件中添加: <dependency> < ...

  9. KingbaseES 与 Oracle 用户口令管理与资源管理

    一.概述 KingbaseES可以对用户口令与用户占用资源进行必要的管理.其管理方式,在这里与Oracle数据库进行参考比较. KingbaseES 使用扩展插件建立的系统参数,这组参数可以对数据库资 ...

  10. spark 读取hive 计算后写入hive

    package com.grady import org.apache.spark.SparkConf import org.apache.spark.sql.{DataFrame, Row, Spa ...