一、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
}