前端常用去重的几种方式

文章目录

  • 方式1: ES6新语法
  • 方式2: 遍历 利用filter
  • 方式3: 使用 new Map() + for循环
  • 方式4: 利用 hasOwnProperty
  • 总结


在github 查看该文章

方式1: ES6新语法

过滤出网页中不重复的html标签 结合去重知识点考查

[…new Set([…document.querySelectorAll(‘*’)].map(v=>v.tagName))]

const arr = [1, 1, '1', 17, true, true, false, false, 'true', 'a', {}, {},Symbol(1),Symbol(1)]function getUni(arr){return Array.from(new Set(arr))
}
// 调用输出接口 发现有2个Symbol(1) 
//  他们是不相等的 ,所以这个去重方式还是可以的
getUni(arr)
//  [1, "1", 17, true, false, "true", "a", {…}, {…}, Symbol(1), Symbol(1)]
//  空{}对象没有去重  (因为两个对象其实,
// 引用不一样,所以也是不一样的. 后续方法我们研究可以去掉的)

那么此方式可以对对象去重吗??? 我们一起来验证下!!

const b={a:2}
let arr1 = [{a:1}, b, b, {a:3}];  //[{a:1},{a:2},{a:2},{a:3}]
let set1 = new Set(arr1);
let newArr1 = Array.from(set1);
console.log(newArr1); // [{a:1},{a:2},{a:3}]//无法对象去重:
let arr2 = [{a:1}, {a:2}, {a:2}, {a:3}];  //[{a:1},{a:2},{a:2},{a:3}]
let set2 = new Set(arr2);
let newArr2 = Array.from(set2);
console.log(newArr2); //[{a:1},{a:2},{a:2},{a:3}]

方式2: 遍历 利用filter

const unique = arr=>{return  arr.filter((item ,index)=>{// console.log(arr.indexOf(item))// indexOf()方法返回在数组中可以找到一个给定元素的第一个索引,// 如果不存在,则返回-1return arr.indexOf(item) === index})
}
//  使用 includes , indexOf  的思路大致一样都是判断,是否存在,没有就添加.
//  使用filter+indexOf 的方式   ,对象也没有去重

方式3: 使用 new Map() + for循环

const unique1= arr=>{const map = new Map()const res = []for(let i =0; i<arr.length;i++){if(!map.has(arr[i])){map.set(arr[i],true)res.push(arr[i])}}return res;
}

请注意!为Map设置对象属性也是可以的,但是可能引起大量的混乱。 下面我们来比较下

为Map设置对象属性方式

let wrongMap = new Map()
wrongMap['bla'] = 'blaa'
wrongMap['bla2'] = 'blaaa2'console.log(wrongMap)  // Map { bla: 'blaa', bla2: 'blaaa2' }
// ...但是,这样做的话,它的行为会不符合预期:wrongMap.has('bla')    // false
wrongMap.delete('bla') // false
console.log(wrongMap)  // Map { bla: 'blaa', bla2: 'blaaa2' }

正确的方式:

let myMap = new Map()
myMap.set('bla','blaa')
myMap.set('bla2','blaa2')
console.log(myMap)  // Map { 'bla' => 'blaa', 'bla2' => 'blaa2' }myMap.has('bla')    // true
myMap.delete('bla') // true
console.log(myMap)  // Map { 'bla2' => 'blaa2' }

我们在控制器输入比较下,就比较直观

let wrongMap = new Map()
wrongMap['bla'] = 'blaa'
"blaa"
wrongMap 
Map(0) {bla: "blaa"}
wrongMap.has('bla')
false
wrongMap.set('a','aaa')
Map(1) {"a" => "aaa"}
wrongMap
Map(1) {"a" => "aaa"}[[Entries]]0: {"a" => "aaa"}key: "a"value: "aaa"bla: "blaa"size: (...)__proto__: Map
wrongMap.has('a')
true

方式4: 利用 hasOwnProperty

const  unique4 = ( arr )=> {let obj = {}return arr.filter((item,curIndex,arr)=>{let tempFlagif(typeof(item) === 'symbol'){tempFlag = typeof(item) + typeof(item)  }else if(typeof(item)=== 'object'){tempFlag = typeof(item) + JSON.stringify(item)}else{tempFlag = typeof(item) + item}console.log(`tempFlag:${tempFlag}`)return obj.hasOwnProperty( tempFlag ) ? false : obj[tempFlag] = true;})}// 这里利用给obj添加属性来去重.  是根据类型,去重的,
// 也就是说 Symbol(1)   Symbol(666) 或则 {}, {}  也只会保留一个.
//  对symbol 去重,其实没有什么实际的意义, 而对象本来是引用类型,长得一样,
// 其实地址也不一样,但想把内容一致的去掉,lodash有比较两对象内容是否一致的.  
// _.unionWith([arrays],[comparator]), 
// 指定哪几个字段作为去重条件, 不然有点浪费性能 
https://www.lodashjs.com/docs/lodash.unionWith

在这里插入图片描述

可以看出使用set添加的 是在 [[Entries]] 里面的,并且有对应的索引


总结

本文列举几种在前端开发几种去重的方式

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

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

相关文章

分布式锁,进程锁,线程锁

线程锁:大家都不陌生&#xff0c;主要用来给方法、代码块加锁。当某个方法或者代码块使用锁时&#xff0c;那么在同一时刻至多仅有有一个线程在执行该段代码。当有多个线程访问同一对象的加锁方法/代码块时&#xff0c;同一时间只有一个线程在执行&#xff0c;其余线程必须要等…

Vue使用Canvas实现电子签名功能示例

当使用Vue来实现电子签名功能时&#xff0c;可以结合Canvas元素和Vue的数据绑定功能来实现。下面是一个简单的示例&#xff0c;演示了如何在Vue中使用Canvas实现电子签名功能&#xff1a; <template><div><!-- Canvas元素用于绘制电子签名 --><canvasref…

bigdecimal比较大小

bigdecimal比较大小 大家好&#xff0c;我是微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01;在日常的Java开发中&#xff0c;我们经常会涉及到对数字进行比较&#xff0c;而BigDecimal作为一种高精度的数值类型&#xff0c;其…

06 使用v-model实现双向数据绑定

概述 Vue achieves two-way data binding by creating a dedicated directive that watches a data property within your Vue component. The v-model directive triggers data updates when the target data property is modified on the UI. Vue 通过创建一个专用指令来观…

IntelliJ IDEA 自带HTTP Client接口插件上传文件示例

如何使用IntelliJ IDEA自带的HTTP Client接口插件进行文件上传的示例。在这个示例中&#xff0c;我们将关注Controller代码、HTTP请求文件&#xff08;xxx.http&#xff09;&#xff0c;以及文件的上传和处理。 Controller代码 首先&#xff0c;让我们看一下处理文件上传的Co…

第15章 《乐趣》Page305~311, 代码精简以后,讨论一下引用含义的问题

将Page305~311的代码精简了一下&#xff0c;讨论一下引用含义的问题&#xff0c;精简之后的代码如下&#xff1a; #include <iostream> #include <SDL2/SDL.h>using namespace std;namespace sdl2 {char const* last_error() {return SDL_GetError(); }struct Ini…

基于 WebSocket 打造聊天室

一、什么是 WebSocket&#xff1f; WebSocket 是一种基于TCP连接上进行 全双工 通信的协议。WebSocket使得客户端和服务器之间的数据交换变得更加简单&#xff0c;允许服务端主动向客户端推送数据。在WebSocket API中&#xff0c;浏览器和服务器只需要完成一次握手&#xff0c…

第三十六章 XML 模式的高级选项 - 创建子类型的替换组

文章目录 第三十六章 XML 模式的高级选项 - 创建子类型的替换组创建子类型的替换组将子类限制在替换组中 第三十六章 XML 模式的高级选项 - 创建子类型的替换组 创建子类型的替换组 XML 模式规范还允许定义替换组&#xff0c;这可以是创建选择的替代方法。语法有些不同。无需…

Windows 10如何关闭系统自动更新(实用教程)

本章教程&#xff0c;用最简洁的方式介绍在windows10中如何关闭系统自动更新。 目录 一、关闭自动更新服务 二、关闭自动更新组策略 一、关闭自动更新服务 1、 winr 2、services.msc 3、找到并双击 Windows Update 修改启动类型为禁用 二、关闭自动更新组策略 1、winr 2、gp…

2.4【渲染】Vulkan渲染APIs

写在前面 Screen支持Khronos的Vulkan渲染API。Vulkan是一款用于3D图形和计算的低开销、跨平台、开放行业标准API。它使开发人员能够使用相同的图形API来面向各种设备。 Vulkan标准由Khronos Group发布。 通常,硬件供应商都有自己的Khronos标准实现,利用硬件加速,特别是GP…

Next.js 学习笔记(一)——安装

安装 系统要求&#xff1a; Node.js 18.17 或更高版本支持 macOS、Windows&#xff08;包括 WSL&#xff09;和 Linux 自动安装 我们建议使用 create-next-app 启动一个新的 Next.js 应用程序&#xff0c;该应用程序会自动为你设置所有内容。要创建项目&#xff0c;请运行&…

3. 内容模块管理 - 异常处理与校验

文章目录 内容模块管理一、自定义异常1.1 全局异常处理器1.2 自定义异常1.3 异常统一响应类1.4 封装通用异常信息 二、JSR303校验2.1 Maven坐标2.2 校验规则2.3 代码示例2.4 捕捉校验异常2.5 分组校验2.6 备注 三、全局异常处理23.1 全局异常处理器3.2 结果集3.3 常用注解3.3.1…

【漏洞复现】捷诚管理信息系统 SQL注入漏洞

漏洞描述 捷诚管理信息系统是一款功能全面,可以支持自营、联营到外柜租赁的管理,其自身带工作流管理工具,能够帮助企业有效的开展内部审批工作。 该系统CWSFinanceCommon.asmx接口存在SQL注入漏洞。未经身份认证的攻击者可以通过该漏洞获取数据库敏感信息,深入利用可获取…

Redis设计与实现之整数集合

目录 一、内存映射数据结构 二、整数集合 1、整数集合的应用 2、数据结构和主要操作 3、intset运行实例 创建新intset 添加新元素到 intset 添加新元素到 intset&#xff08;不需要升级&#xff09; 添加新元素到 intset (需要升级) 4、升级 升级实例 5、关于升级 …

GZ015 机器人系统集成应用技术样题4-学生赛

2023年全国职业院校技能大赛 高职组“机器人系统集成应用技术”赛项 竞赛任务书&#xff08;学生赛&#xff09; 样题4 选手须知&#xff1a; 本任务书共 25页&#xff0c;如出现任务书缺页、字迹不清等问题&#xff0c;请及时向裁判示意&#xff0c;并进行任务书的更换。参赛队…

Flutter在Android Studio上创建项目与构建模式

一、安装插件 1、前提条件&#xff0c;安装配置好Android Studio环境 2、安装Flutter和Dart插件 Linux或者Windows平台&#xff1a; 1&#xff09;、打开File > Settings。 2&#xff09;、在左侧列表中&#xff0c;选择"Plugins"右侧上方面板选中 "Market…

vue-element-admin如何把mock换成使用真实后台接口

1&#xff09;修改vue.config.js文件 use strict const path require(path) const defaultSettings require(./src/settings.js)function resolve(dir) {return path.join(__dirname, dir) }const name defaultSettings.title || vue Element Admin // page title// If you…

Vue3-16-【v-model】 表单数据绑定

作用描述 v-model 指令&#xff0c;实现了 表单输入组件的值 与 js 中的变量的值的绑定关系。 当我们在页面上执行输入动作时&#xff0c;js中变量的值也会同步发生变化。表单不仅仅局限于输入框&#xff0c;其他的如 &#xff1a; 单选按钮&#xff0c;复选框&#xff0c;下拉…

数据结构面试题和题目解析

以下是一些数据结构的面试题和解析&#xff1a; 1. 什么是链表&#xff1f; 链表是一种线性数据结构&#xff0c;由一系列节点组成&#xff0c;每个节点包含数据部分和指向下一个节点的指针。链表的主要优点是插入和删除操作比较方便&#xff0c;但访问链表中的元素不如访问数组…

【INTEL(ALTERA)】 quartus SignalTap 逻辑分析器 – Nios® II 插件 无法检测 Nios® II/f 处理器内核

说明 使用 Nios II 插件将 Nios II/f 处理器内核节点添加到 SignalTap 逻辑分析器时&#xff0c;在 英特尔 Quartus Prime Pro Edition 软件 23.3 版中可能会出现此问题。 错误消息&#xff1a; 无法完成“添加带插件的节点”命令&#xff0c;因为在当前设计中找不到所选 IP。…