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. 048_末晨曦Vue技术_处理边界情况之使用$root访问根实例

    处理边界情况之使用$root访问根实例 点击打开视频教程 在每个 new Vue 实例的子组件中,其根实例可以通过 $root property 进行访问. 例如,在这个根实例中: src\main. ...

  2. Dynamic CRM使用FetchXML在js中查询与调用传递编码问题

    在页面交互脚本js中实现窗体交互逻辑是很常见的crm场景,一般情况下使用拓展工具RESTBuilder编辑器,可以很方便的进行操作,增删改查均能实现,但在某些较为特殊的场景下,需要根据条件去拼接查询过 ...

  3. JavaScript(上)

    说说你对作用域链的理解 作用域链的作用是保证执行环境里有权访问的变量和函数是有序的,作用域链的变量只能向上访问,变量访问到 window 对象即被终止,作用域链向下访问变量是不被允许的. 简单的说,作 ...

  4. rh358 001 Linux网络与systemd设置

    358 rhel7 ce ansible 部署服务 dhcp nginx vanish haproxy 打印机服务 服务管理自动化 systemd与systemctl systemctl 来管理sys ...

  5. 【c#】仅1600行代码 2D魔方游戏源码-纯WinForm

    想起以前高三的时候写过一个很无脑的程序,那个时候.net5.0都还没影儿呢,,现在分享一下.一个平面展开的魔方游戏. 这个是1.0版本,有些许bug. 比如左边的格子操作不了. 「2d cube.ex ...

  6. VS2019 Community社区版登录提示:我们无法刷新此账户的凭证 解决方法

    最正确的方式: 1.点击 帮助-->发送反馈-->报告问题 2.点击 检查新的许可证 ,即可登陆成功 3.如果提示:无法下载或者下载失败. 4.那么就需要在左边 账户选项 中将 嵌入式We ...

  7. Java方法总结

    什么是方法 何谓方法 就是一个方法只完成一个功能,这样利于后期的扩展 例子: public static void main(String[] args) {    System.out.printl ...

  8. C#非托管泄漏中HEAP_ENTRY的Size对不上是怎么回事?

    一:背景 1. 讲故事 前段时间有位朋友在分析他的非托管泄漏时,发现NT堆的_HEAP_ENTRY 的 Size 和 !heap 命令中的 Size 对不上,来咨询是怎么回事? 比如下面这段输出: 0 ...

  9. 6、Arrays类

    Arrays类 Arrays里面包含了一系列静态方法,用于管理或操作数组(比如排序和搜索) 常用方法 toString 返回数组的字符串形式 Arrays.toString(arr) Integer[ ...

  10. mac 批量修改文件的后缀名

    1-将需要修改的文件拖到同一个文件夹 2-打开终端输入 for i in *; do mv "$i" "$i.jpg";done