发布时间:2023-04-26 文章分类:WEB开发, 电脑百科 投稿人:赵颖 字号: 默认 | | 超大 打印

一、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));

打印结果:
js去掉两个数组相同的元素、js删除数组中某一个对象、js快速查找数组中重复项下标

还可利用 includes

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

打印结果:
js去掉两个数组相同的元素、js删除数组中某一个对象、js快速查找数组中重复项下标

二、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)
		}
	})	

打印结果:
js去掉两个数组相同的元素、js删除数组中某一个对象、js快速查找数组中重复项下标
参考: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
    }