js两个数组对象合并（js去掉两个数组相同的元素、js删除数组中某一个对象、js快速查找数组中重复项下标）

一          、js去掉两个数组相同的元素

注意：这里并非是数组去重          ，数组去重是去掉一个数组中相同的元素
 
  
 
  
 
  
 
  
 
  ，这里是比较两个数组









，过滤掉二者相同的  
  
  
  
  
，留下不同的 
  
  
  
  
 。

通过 some() 在对方数组里面查找相同元素 
  
  
  
  
 ，再利用filter() 过滤掉当前数组里与对方数组相同的元素 
  
  
  
  
 。

const arr1 = [1, 2, 3, 56] const arr2 = [1, 2, 3, 780] const res = arr2.filter(item1 => !arr1.some(item2 => item2 === item1)) console.log(res); // [780] arr2 与 arr1相同的元素有 1,2,3


 


 


 


 


 ，res的结果就是 780 const res2 = arr1.filter(item1 => !arr2.some(item2 => item2 === item1)) console.log(res2); // [56]

如果是数组对象(同上 
 
 
 
 
，查找对象 id 属性)

let arr1 = [ {id:1,name:小明,age:18}, {id:2,name:小红,age:16}, {id:4,name:小紫,age:22}, {id:5,name:小绿,age:20}, ] let arr2 =[ {id:2,sex:女}, {id:5,sex:男}, ] let newArr = arr1.filter((item) => !arr2.some((ele) => ele.id === item.id));

打印结果：

还可利用 includes

let getId = arr2.map(item=>item.id) let newArr2 = arr1.filter(item=>!getId.includes(item.id))

打印结果：

二
 
  
 
  
 
  
 
  
 
  、js删除数组中某一个对象

let arr1 = [ {id:1,name:小明,age:18}, {id:2,name:小红,age:16}, {id:4,name:小紫,age:22}, {id:5,name:小绿,age:20}, ] //假设 去掉name为小明的 这条数据 arr.splice( arr.indexOf(arr.find((e) => { return e.name=== "小明"; } ) ), 1);

参考：https://blog.csdn.net/weixin_43743175/article/details/125257773

三









、js快速查找数组中重复项下标

var ARR = [1,2,3,4,5,1,2]; var rep = []; ARR.forEach((item,index)=>{ if(ARR.indexOf(item)!=index){ rep.push(ARR.indexOf(item),index) } })

打印结果：

参考：https://blog.csdn.net/smz8023/article/details/86164751

例子：

假如后台返回了个这样的简单数据：

list: [ { totalNum: 1000, touchNum: 300, kpiName: 浏览量, itemStyleColor: [#4CA4EC, #B6D9F6] }, { totalNum: 2000, touchNum: 600, kpiName: 任务领取个数, itemStyleColor: [#624cec, #b6bbf6] } { totalNum: 3232, touchNum: 800, kpiName: 浏览量, itemStyleColor: [#4CA4EC, #B6D9F6] } ]

而前端需要下面这样的数据结构  
   
   
   
   
 ，后端不好处理

 

 

 

 

 ，让前端处理

list: [ { chartList: [ { totalNum: 1000, touchNum: 300, kpiName: 浏览量, itemStyleColor: [#4CA4EC, #B6D9F6] }, { totalNum: 2000, touchNum: 600, kpiName: 任务领取个数, itemStyleColor: [#624cec, #b6bbf6] } ], groupName: 寿险公司, groupId: gruop1 }, { chartList: [{ totalNum: 3232, touchNum: 800, kpiName: 浏览量, itemStyleColor: [#4CA4EC, #B6D9F6] }], groupName: 电商公司, groupId: group2 } ],

思路：根据某种规律
 

 

 

 

 
，先拆分数据          ，采用 总-分-总 的模式
 

 
 

 
 

 
 

 
 

 ，遇到难解决的数据分类拆分-最后合并

 


 


 


 


 
。

参考实现：

/** * @Description: 机构数据整理 * @param {*Array} list 目标数据 * @return {*Array} 最终数据 */ matchFun(list) { const typeColor1 = [#624cec, #b6bbf6] const typeColor2 = [#4CA4EC, #B6D9F6] let arr1 = [] //转发 let arr2 = [] //浏览 let chartObj let newList = [] list.forEach((item, index) => { if (item.type == 1) { arr1.push(item) } else if (item.type == 2) { arr2.push(item) } }) for (let index = 0; index < arr1.length; index++) { chartObj = { chartList: [] } const element1 = arr1[index] chartObj.groupName = element1.groupName chartObj.groupId = element1.groupId for (let j = 0; j < arr2.length; j++) { const element2 = arr2[j] if (element1.groupId === element2.groupId) { chartObj.chartList[0] = element2 chartObj.chartList[1] = element1 } } newList.push(chartObj) newList.forEach((item) => { item.chartList.forEach((itm) => { itm.itemStyleColor = itm.type == 1 ? typeColor1 : typeColor2 }) }) newList = newList.filter((item) => item.chartList.length > 0) } /处理单个图表数据// let arrSet1 = [] //去重后的单个指标图表 let arrSet2 = [] arrSet1 = arr1.filter((item) => !arr2.some((ele) => ele.groupId == item.groupId)) arrSet2 = arr2.filter((item) => !arr1.some((ele) => ele.groupId == item.groupId)) arrSet1.forEach((item) => { let chartList = [{}] item.chartList = chartList item.chartList[0] = { itemStyleColor: item.type == 1 ? typeColor1 : typeColor2, checkId: item.checkId, groupId: item.groupId, type: item.type, total: item.total, num: item.num } }) arrSet2.forEach((item) => { let chartList = [{}] item.chartList = chartList item.chartList[0] = { itemStyleColor: item.type == 1 ? typeColor1 : typeColor2, checkId: item.checkId, groupId: item.groupId, type: item.type, total: item.total, num: item.num } }) // 最后合并二者 newList = [...newList, ...arrSet1, ...arrSet2] return newList }