面试题一:前端去重方法汇总你知道多少?

2023-11-06

题记:我们项目中有很多的业务是需要去重的,那么下面是常用的一些去重的一些方法。

用indexOf方法去重

新建一个空数组,遍历需要去重的数组,将数组元素存入新数组中,存放前判断数组中是否已经含有当前元素,没有则存入。此方法也无法对NaN去重
indexOf() 方法:返回调用它的String对象中第一次出现的指定值的索引,从 fromIndex 处进行搜索。若未找到该值,则返回 -1

var arr2 = [1,4,6,3,4];
            var xin = []
            //遍历数组 
            for(var i=0;i<arr2.length;i++){
                //通过indexOf方法返回值做判断
                if (xin.indexOf(arr2[i])==-1) {
                    //如果没有的话就加入新的家庭,当然有的话就不用加入了
                    xin.push(arr2[i])
                }
            }
            console.log("结果是",xin);

用双重for循环去重

注意:通过两层循环对数组元素进行逐一比较,然后通过splice方法来删除重复的元素。此方法对NaN是无法进行去重的,因为进行比较时NaN !== NaN。

//利用两次循环,我们找到数组当中的两个元素,进行等值判断,如果有相等的话就截取扔掉
 for(let i=0;i<arr2.length;i++){
                for(let j=i+1;j<arr2.length;j++){
                    if (arr2[j] == arr2[i]) {
                        arr2.splice(i,1)
                    }
                }
            }
            console.log(arr2);

用for in 的方法 因为对象中不容许存在两个相同的属性名

其实现思想和Map()是差不多的,主要是利用了对象的属性名不可重复这一特性。

var obj = {}
            //遍历数组加入到一个新的对象
            for(let k in arr2){
                obj[arr2[k]] = arr[k]
            }
            let xinarr = []
            //遍历已经去重数组的对象然后放入数组中
            for(let i in obj){
                xinarr.push(i)
            }

            console.log(xinarr);

用new Set()方法

Set对象:是值的集合,你可以按照插入的顺序迭代它的元素。 Set中的元素只会出现一次,即Set中的元素是唯一的。
Array.from() 方法:对一个类似数组或可迭代对象创建一个新的,浅拷贝的数组实例。

console.log([...new Set(arr2)])
也可以 Array.from(new Set(arr2))
//此种方法是es6中的语法,相当于先转对象,去重完了之后,通过...把值取出来,最后再把4个值变成数组

用reduce()方法

var xin = [];
            arr.reduce((preVal,curVal,index)=>{
                if (xin.indexOf(curVal) == -1) {
                    xin.push(curVal)
                }
            })
            console.log(xin);

利用数组的includes方法

此方法逻辑与indexOf方法去重异曲同工,只是用includes方法来判断是否包含重复元素
includes()方法:用来判断一个数组是否包含一个指定的值,根据情况,如果包含则返回 true,否则返回 false。

function removeDuplicate(arr) {
  let newArr = []
  arr.map(item => {
    if (!newArr.includes(item)) {
      newArr.push(item)
    }
  })
  return newArr
} // [ 1, 2, 'abc', true, false, undefined, NaN ]

注意:为什么includes能够检测到数组中包含NaN,其涉及到includes底层的实现。如下图为includes实现的部分代码,在进行判断是否包含某元素时会调用sameValueZero方法进行比较,如果为NaN,则会使用isNaN()进行转化。
在这里插入图片描述

简单测试includes()对NaN的判断:

简单测试includes()对NaN的判断:
const testArr = [1, 'a', NaN]
console.log(testArr.includes(NaN)) // true

利用数组的filter()+indexOf()

filter方法会对满足条件的元素存放到一个新数组中,结合indexOf方法进行判断。
filter() 方法:会创建一个新数组,其包含通过所提供函数实现的测试的所有元素。

function removeDuplicate(arr) {
  return arr.filter((item, index) => {
    return arr.indexOf(item) === index
  })
}
 
const result = removeDuplicate(arr)
console.log(result) // [ 1, 2, 'abc', true, false, undefined ]

注意:这里的输出结果中不包含NaN,是因为indexOf()无法对NaN进行判断,即arr.indexOf(item) === index返回结果为false。测试如下:

const testArr = [1, 'a', NaN]
console.log(testArr.indexOf(NaN)) // -1

利用Map()

Map对象是JavaScript提供的一种数据结构,结构为键值对形式,将数组元素作为map的键存入,然后结合has()和set()方法判断键是否重复。
Map 对象:用于保存键值对,并且能够记住键的原始插入顺序。任何值(对象或者原始值)都可以作为一个键或一个值。

function removeDuplicate(arr) {
  const map = new Map()
  const newArr = []
 
  arr.forEach(item => {
    if (!map.has(item)) { // has()用于判断map是否包为item的属性值
      map.set(item, true) // 使用set()将item设置到map中,并设置其属性值为true
      newArr.push(item)
    }
  })
 
  return newArr
}
-----------------或者-------------------------------------------------------
function removeDuplicate(arr) {
  let map = new Map()
  arr.map(item => {
    if (!map.has(item)) map.set(item)
  })
  return [...map.keys()]
}
 
const result = removeDuplicate(arr)
console.log(result) // [ 1, 2, 'abc', true, false, undefined, NaN ]

注意:使用Map()也可对NaN去重,原因是Map进行判断时认为NaN是与NaN相等的,剩下所有其它的值是根据 === 运算符的结果判断是否相等。

总结:其实去重的语法不同,但是道理一样,都是先去重,只不过你要采取哪种语法,工作中总结是一件充实的事情,继续加油!!!

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

面试题一:前端去重方法汇总你知道多少? 的相关文章

  • 从 Javascript 中的嵌套函数返回值[重复]

    这个问题在这里已经有答案了 考虑这段代码 缩短 function getSecret db transaction function transaction transaction executeSql SELECT FROM table
  • 在具有子项的“contenteditable”div 中设置插入符位置

    我有一个这样的 HTML 结构 div This is some plain boring content div 我还有这个函数 允许我将插入符位置设置到 div 中我想要的任何位置 Move caret to a specific po
  • 在 onclick 事件上请求麦克风

    有一天 我偶然发现了这个 Javascript 录音机的例子 http webaudiodemos appspot com AudioRecorder index html http webaudiodemos appspot com Au
  • 如何使用 JavaScript 刷新页面?

    如何使用 JavaScript 刷新页面 Use location reload https developer mozilla org en US docs Web API Location reload 例如 每当元素带有以下内容时重新
  • 需要使用 iFrame API 隐藏 YouTube 品牌

    我正在使用 YouTube iFrame API 在我的自定义播放器 javascript 播放器 中加载视频 我需要隐藏 Youtube 品牌 但是在 iOS 设备上 它显示带有以下参数的徽标 playerVars fs 1 autopl
  • 有什么方法可以复制 div 的渲染 HTML 吗?

    我正在开发电子邮件签名生成器 我想通过按按钮复制最终签名 而不是手动选择签名并将其复制到剪贴板 这意味着我需要它们的图像 文本和样式 我尝试了几种变体 包括 w3schools 的变体 但没有成功 其中一些只是复制文本 但没有样式 例子 h
  • jQuery UI Datepicker 奇怪的行为

    我在使用 jqueryUI 使用简单的日期选择器时遇到了一个奇怪的问题 我只想显示两个月的日历 包括上个月和当前月份 我使用了这段代码 function picker datepicker numberOfMonths 2 showCurr
  • Dialogflow Fulfillment Webhook 调用失败

    I am new to dialogflow fulfillment and I am trying to retrieve news from news API based on user questions I followed doc
  • 需要参数的addEventListener(和removeEventListener)函数

    我需要向 8 个对象 手掌 添加一些侦听器 这些对象是相同的 但行为必须根据它们的位置而改变 我有以下 丑陋的 代码 root palmsStatus B B B B B B B B if root palmsStatus 0 N root
  • 如何调试超时等待异步 Angular 任务?无法在角度页面上找到元素

    编辑 请注意 在 ernst zwingli 的帮助下 我找到了问题的根源 因此 如果您遇到相同的错误 他指出的修复之一可能会帮助您 我的问题是量角器本身的一个已知问题 如果您认为这可能是您 我已经扩展了我的步骤 以在我最初的问题之后查明问
  • 如何根据另一个下拉列表中的选择动态填充下拉列表中的选项?

    我有一个表 其中包含类别信息 例如产品 我已将它们列在下拉菜单中 现在 我需要做的是 在下一个下拉菜单中列出所选类别的子类别 我希望 javascript 是必需的 但我对 javascript 还不太熟悉 将非常感谢您的帮助 你应该使用
  • Socket IO 服务器到服务器

    服务器是否可以使用 Socket IO 连接到另一个服务器并被视为客户端 并让它加入房间 接收 io sockets in lobby emit 和更多 第一个服务器也在监听连接 消息 嘿 Brad 下面是我的完整 js 应用程序 供参考
  • Aurelia 中的角度服务?

    我还没有找到详细说明如何从 Angular 1 x 迁移到 Aurelia 的详细文档 到目前为止 我只看到人们详细介绍了 Angular 的概念directive可以在 Aurelia 中使用重制 customElement 好吧 足够简
  • D3 向对象添加超链接?

    我正在尝试制作 D3 图 它将代表我网站的菜单 我尝试按照此处的其他指南添加超链接 但它们都不起作用 每个对象都会有一个不同的 URL 指向 主页 关于 联系方式等 如果添加超链接 我可以拖动对象吗 这意味着如果我按住单击 如果我单击该对象
  • Angularjs : $locationProvider.hashPrefix("!") ;

    我想将网址显示为 www test com 因为我正在使用 locationProvider hashPrefix 但它显示网址为 www test com 我想 哈希之前而不是哈希之后 Thanks var app angular mod
  • 在 Nodejs 中,如何停止 FOR 循环直到 MongoDB 调用返回

    我正在研究下面的代码片段 我有一个名为 stuObjList 的 JSON 对象数组 我想循环遍历数组以查找具有特定标志集的特定 JSON 对象 然后进行数据库调用以检索更多数据 当然 FOR 循环不会等待数据库调用返回并到达 j leng
  • 如何从除自身之外的其他(blazor)库引用js/css文件?

    我如何引用 使用位于引用的 blazor 项目中的 css cs 文件 该文件与 host cshtml 中的当前项目不同 我的意思是
  • 如何使用 javascript 更改文件扩展名

    有谁知道在 Javascript 中更改文件扩展名的简单方法吗 例如 我有一个带有 first docx 的变量 但我需要将其更改为 first html 这将改变字符串包含文件名 let file first docx file file
  • 使用ExternalInterface和IE从JavaScript获取Flash中的当前URL

    我正在尝试获取 Flash 播放器当前所在的 URL 不是 swf 文件的 URL 而是浏览器指向的 URL 到目前为止我已经使用过 var st String ExternalInterface call window location
  • Chrome 调试器注入 javascript

    我有这样的好奇心 是否可以以某种方式在我的页面中注入 javascript 并执行它并调试它 正如您在控制台中所做的那样 但在控制台中您无法暂停并观察变量 是否可以调试我通过控制台输入的代码 为什么无法调试通过 XHR 接收的代码 Than

随机推荐

  • ChromeOS 体验

    概述 作为一名开发人员 一直关注各种桌面级 移动级操作系统的进展 其中就包含 ChromeOS 对于一个开发者 客户端 嵌入式 硬件开发者除外 而言 对于操作系统的要求如下 流畅 稳定而现代化的系统 UI 完整的 Linux 环境 好用的浏
  • C#get和set

    这里写目录标题 为什么要使用get和set 使用get访问私有变量 使用set和get定义一个索引器 为什么要使用get和set 因为在代码中存在着私有的值 我们不能在它的私有域外调用这些私有值 若要访问这些私有值 则需要使用get和set
  • Python,OpenCV图像金字塔cv2.pyrUp(), cv2.pyrDown()

    Python OpenCV图像金字塔cv2 pyrUp cv2 pyrDown 1 效果图 2 原理 2 1 什么是图像金字塔 2 2 金字塔分类 2 3 应用 3 源码 参考 这篇博客将介绍图像金字塔的理论 及用图像金字塔cv2 pyrU
  • vscode快捷键创建多个html标签

    vscode快捷键创建多个html标签 vscode中输入命令 按下Tab键 Tab键 没反应解决办法 参考地址 https blog csdn net xingyun piaofu article details 131879072 sp
  • 前端福利:使用Wallpaper Engine让自己的桌面炫酷起来

    Wallpaper Engine 是一款Steam上的特别特别炫酷的壁纸定制软件 它可以对你的桌面进行定制 可以使用视频 动画 网页等形式来替换壁纸 注意到没 关键是可以使用Html格式的文件作为桌面 前端福利啊有木有 首先 先先下载软件下
  • QT结合Mupdf实现预览pdf

    要在Qt中结合MuPDF库预览PDF文件 你可以按照以下步骤进行操作 1 下载并安装MuPDF库 首先 你需要从MuPDF的官方网站或代码托管网站上下载MuPDF库的源代码 并按照文档中的说明进行安装 确保你已经安装了所有必需的依赖项 2
  • 因果推断综述-A Survey on Causal Inference

    最近读到一篇讲述很全面的综述文献 A Survey on Causal Inference 对于接触因果推断不久的同学而言是特别详细的介绍和科普 文献很长 我会分成几部分介绍 目录 摘要 第一部分 简介 第二部分 因果推断基础知识 第三部分
  • java(有关类成员变量的访问权限)

    private public protected 默认不写 firendly 1 Class类的访问权限 public 可以供所有的类访问 默认 默认可以称为friendly但是 java语言中是没有friendly这个修饰符的 这样称呼应
  • Linux 编写定时任务

    1 先进入根目录 mkdir p home wangwenjun scripts cd home wangwenjun scripts 2 编写第一个shell文件 test sh vim test sh bin sh now date Y
  • Windows下Git-preview中文乱码的解决方法

    在Windows下安装Git preview 1 7 4后 使用中发现许多的乱码问题 感觉甚是不便 这是因为Git是在linux下开发的管理软件 而linux的编码方式是基于UTF 8的 所以移植到Windows之后难免会存在编码方式不同的
  • android wear 微信语音,moto 360手表语音回复微信教程

    moto360智能手表是一款搭载android系统的智能手表 目前微信已经添加了对智能手表的支持 不过很多玩家对于怎么使用moto 360语音回复微信还不是很清楚 下面小编就为大家分享一下moto 360语音回复微信教程 moto 360语
  • 最大权闭合子图(最小割)

    最大权闭合子图 最大流最小割 参考资料 1 最大权闭合子图 权闭合子图 存在一个图的子图 使得子图中的所有点出度指向的点依旧在这个子图内 则此子图是闭合子图 在这个图中有8个闭合子图 3 4 2 4 3 4 1 3 4 2 3 4 1 2
  • Qt绘图QGraphicsView、QGraphicsScene、QGraphicsItem简述

    Qt绘图中 QGraphicsView QGraphicsScene QGraphicsItem三者之间密不可分 以下简单介绍三者之间关系 三者之间关系 如同绘画的过程 Qt绘图中 QGraphicsView的作用相当于画板 QGraphi
  • linux 使用笔记

    1 查看使用的所有端口 netstat ntlp 2 查找文件路径 locate 文件名 如 find 文件名 如 find home 3 Linux下查看和停止所有java进程 在Linux下查看所有java进程命令 ps ef grep
  • 摄像机跟踪主角第三人称的视角

    using UnityEngine using System Collections public class FollowFarget MonoBehaviour public Transform PlayerTransfrom 定义一个
  • Unity 性能优化五:渲染模块压力

    CPU压力 Batching 在GPU渲染前 CPU会把数据按batch发送给GPU 每发送一次 都是一个drawcall GPU在渲染每个batch的时候 会切换渲染状态 这里的渲染状态指的是 影响对象在屏幕上的外观的渲染属性或材质 比如
  • OpenCV自适应阈值化函数adaptiveThreshold

    图像阈值化的一般目的是从灰度图像中分享目标区域和背景区域 然而仅仅通过设定固定阈值很难达到理想的分割效果 在实际应用中 我们可以通过某个像素的邻域以某种方法确定这个像素应该具有的阈值 进而保证图像中各个像素的阈值会随着周期围邻域块的变化而变
  • EasyExcel的简单导出

    EasyExcel的简单导出 Controller层代码 GetMapping download public void download String name HttpServletResponse response fileManag
  • 5、安全理论与框架-企业架构模型(EA)-业务组件模型(IBM CBM)

    一 背景 CBM component business model 组件化业务模型或叫业务组件模型 是IBM在2003年提出的 当时的大背景 公司内 外专业化 CBM是IBM做业务架构的一个重要方法论 就是把业务描述成一个个独立的小块 我们
  • 面试题一:前端去重方法汇总你知道多少?

    题记 我们项目中有很多的业务是需要去重的 那么下面是常用的一些去重的一些方法 用indexOf方法去重 新建一个空数组 遍历需要去重的数组 将数组元素存入新数组中 存放前判断数组中是否已经含有当前元素 没有则存入 此方法也无法对NaN去重