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

news2024/11/18 20:32:17

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/409418.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

老老实实的程序员该如何描述自己的缺点

答辩的时候&#xff0c;晋升的时候&#xff0c;面试的时候&#xff0c;你有没有经常遇到一个问题&#xff0c;那就是你觉得自己有什么缺点吗&#xff1f; 目录 1. 每个人都有缺点 2. 这道题在考什么&#xff1f; 3. 我之前是怎么回答的 4. 你可以这样回答试一试 5. 总结 …

浅析<router-view> v-slot事例

官方关于<router-link> 的 v-slot的相关介绍: https://router.vuejs.org/zh/api/#router-view-%E7%9A%84-v-slot 并给出了一个例子&#xff1a; <router-view v-slot"{ Component, route }"><transition :name"route.meta.transition || fade&q…

selenium驱动Firefox安装和环境配置

目录 一、前言 二、版本 三、配置环境 四、在pycharm中添加selenium 五、测试代码&#xff0c;成功打开百度&#xff0c;则配置成功 一、前言 根据多篇文章总结了一下自己操作过程&#xff0c;主要是想记录一下。 二、版本 1.查看自己的Firefox的版本&#xff0c;在浏览器…

Web视频video自动播放(移动端及PC端)

做了个关于视频播放的活动&#xff0c;被各种问题折腾得精疲力竭。为了日后能够轻松点&#xff0c;特记录下出现的各种问题及解决方法。 活动要适配移动端&#xff08;IPhone、Android&#xff09;和PC端&#xff08;Chrome&#xff09; 需要解决的问题&#xff1a;移动端禁止全…

vue echarts饼图环形 (随着legend动态显示数据总数)

目录 1.安装echarts 2.引入echarts 3.创建要放入echarts实例的一个盒子 4.创建echarts实例 5.随着legend动态显示数据总数 效果视频 1.安装echarts npm install echarts --save 2.引入echarts 在 当前vue文件中引入 echarts 如下图所示&#xff1a; 3.创建要放入echa…

Vue项目实战——【基于 Vue3.x + Vant UI】实现一个多功能记账本(搭建开发环境)

基于 Vue3.x Vant UI 的多功能记账本&#xff08;二&#xff09; 文章目录基于 Vue3.x Vant UI 的多功能记账本&#xff08;二&#xff09;搭建开发环境项目演示1、创建项目2、配置路由3、添加 Vant UI 组件库4、移动端 rem 配置5、添加 iconfont 文字图标库6、二次封装 Axio…

Vue实现鼠标悬浮隐藏与显示图片效果 @mouseenter 和 @mouseleave事件

前言 前端vue 有个功能是鼠标移动到指定item上显示出来一个编辑和删除的图标 鼠标悬停在列表那么需要有悬浮显示的列表编辑和删除icon 文字不好描述&#xff0c;因为是web端录屏也比较麻烦 这里用截图说明 图片说明 功能实现 之前没做过这种效果&#xff0c;问了一下我的组长…

echarts 地图和柱状图结合(在地图上显示柱状图)

如图&#xff0c;需求要做一个在地图上显示柱状图的echarts图&#xff0c;但是百度了半天&#xff0c;发现很少有人发这种例子。这个代码也是借鉴的别人的文章&#xff0c;但需求肯定不完全一致&#xff0c;那我会根据我的需求把代码和注意事项发出来并解释。&#xff08;如果有…

ant-design-vue:基础使用

一、环境介绍 vue3tsant-design-vue 二、安装使用 2.1、安装脚手架工具 $ npm install -g vue/cli # OR $ yarn global add vue/cli 2.2、创建一个demo项目 2.2.1、创建项目 $ vue create antd-demo 2.2.2、 安装成功&#xff1a; 2.2.3、 项目目录及启动项目&#xff1a…

前端常见的几种布局方式,2分钟即可看完,全是干货。

前端常见的几种布局方式 提示&#xff1a;本篇文章不包含具体知识点&#xff0c;但是可以帮助小白了解到什么是布局 文章目录前端常见的几种布局方式前言参考文档一、前端常见的几种布局方式是什么&#xff1f;二、几大布局介绍1.浮动布局2.定位布局3.弹性布局4.栅格布局5.响应…

scss安装入门到使用高级语法

一.sass的基本概念 sass是css的"预处理器", 一门专门的css编程语言 增加了变量, 函数, 计算, 嵌套关系等用法,让css编写更简洁, 清晰. 二. scss的安装步骤 首先查询一下是否已经安装过sass, 在cmd中输入sass -v 或者 sass --version sass -vsass --version使用上…

【前端修炼之路】第一话 · 初识前端领域

写在前面 夏日炎炎&#xff0c;现在屋外的鸟儿叫的很欢&#xff0c;屋内刚刚组装完的主机风扇在轰轰作响&#xff0c;呜呜呜&#xff0c;怎么闻怎么看都不像是矿卡的显卡现在竟散发出阵阵甜味~哈哈哈哈开个玩笑&#xff0c;写个文章看个视频&#xff0c;这显卡的风扇应该都不带…

申请百度地图开发者AK和基本使用

前言 有需求就会有市场&#xff0c;百度地图也会开放一些免费的Api。来提供一些基本的地图服务。 今天我们讲解的是百度地图申请AK过程&#xff0c;和申请完之后基本的使用&#xff0c;方便大家日后有需要浏览。 AK-申请 1.首先我们学习一个技术最直接的是去看官方文档&…

ES6中新语法:解构

目录 解构 1.解构初了解 2.解构详细解析 2.1对象属性赋值形式 2.2变量的声明 2.3怎么解构 3.实践 3.1数组的解构 3.2对象的解构 3.3解构参数 4.总结 ☀️作者简介&#xff1a;大家好我是言不及行yyds &#x1f40b;个人主页&#xff1a;言不及行yyds的CSDN博客 &#…

Element-UI--<el-switch>的@change回调函数的参数用法

原文网址&#xff1a;Element-UI--&#xff1c;el-switch&#xff1e;的change回调函数的参数用法_IT利刃出鞘的博客-CSDN博客 简介 说明 本文介绍Element-UI的<el-switch>的change回调函数的参数用法。 需求 2个switch组件&#xff0c;用同一个回调函数switch组件状…

Flask 与 Django 框架对比

详细分析了两种 Python Web框架&#xff1a; Flask 与 Django。从开发难易度、应用架构、性能、可扩展性以及适用范围等方面进行了详细说明。 Django 中级教程在 B 站上线&#xff0c;深入解析 Django 体系架构&#xff0c;实现从入门到精通的跨越。在线教程 前言 基于 Gith…

H5呼起微信支付(个人实践总结)

H5呼起微信支付存在两种场景 第一种&#xff1a;其他浏览器呼起微信支付。 第二种&#xff1a;微信内部呼起微信支付。 项目说明&#xff1a; 我这边的项目要求的两种方式均要适用。 产品要求是当支付失败时或者未支付情况是停留在支付订单页面&#xff0c;可再次发起订单请…

Vue3下使用Vuex(store)实现响应式全局变量

Vue3下使用Vuex store1 安装2 编写vuex配置文件2.1 目录及文件结构2.2 index.js文件2.3 编写vuex模块级参数文件2.4 index.js中引入模块级参数3 引入4 使用5 持久化5.1 vuex值存储在sessionStorge中5.1 vuex值存储在localStorge中注意本文记录了如何使用vuex建立响应式全局变量…

Java后端Date类型返回给前端变为时间戳解决方法

今天在制作个人博客的分页功能时候&#xff0c;发现了这个问题 后端查询数据正确&#xff0c;2022-11-12 数据库MySQL5.7 用的date类型 因为写文章一般yyyy-MM-dd 类型就够用了 如果你需要yyyy-MM-dd HH-mm-SS 这种带时分秒的用datetime类型 数据存的也是2022-11-12 格式正确…

【JSP入门】只知道HTML却不知道JSP?

前言 今天我们继续来总结学习JSP相关知识&#xff0c;上一篇我们学习了Servlet的基础入门&#xff0c;如果你还对Servlet那么建议你先去看一下上篇博客再回来。 传送门&#xff1a;【Servlet入门】一篇文章让你从没听过到了熟于心 在之前我们已经学习了HTML&#xff0c;CSS&…