面试官在“逗”你系列:数组去重你会几种呀?

胡哥有话说 等级 516 0 0

前言

数组去重是一个老生常谈的话题,也是前端童鞋在面试时的一道高频题。本文将深入的探索数组去重的原理及实现,为各位小伙伴提供多种可以反手“调戏”面试官的解决方案。

话不多说,上去就来一梭子...

数组去重核心原理

价值100W的核心原理上来就给你了...,记得留言点赞鸭!

  1. 一般我们都会创建临时变量tmp,存储不重复的元素(以数组元素存储或对象的键来存储);
  2. 遍历待去重数组arr,依次判断tmp中是否包含该元素;
  3. 若tmp中不存在该元素,则放入;否则跳过不处理。

基本上无论什么样的实现,其核心皆是如此(判断是否已存在)。不行你就留言,咱们可以battle一下

经典去重方案一:

设置tmp为对象,对象的键存储数组元素的值,最终返回对象的所有键。

function array_unique (arr) {
  if (arr.length === 0) {
    return arr
  }
  let tmp = {}
  let len = arr.length
  for (let i = 0; i < len; i++) {
    if (tmp[arr[i]] === undefined) {
      tmp[arr[i]] = i
    }
  }
  return Object.keys(tmp)
}

// 调用数组去重
let arr = [1, 2, 3, 1, 2]
let newArr = array_unique(arr)
console.log(newArr) // ['1', '2', '3']

如果你采用这种方式来回答面试官的话,你就陷入了他在内心中早早设下的陷阱:

  1. 你这种方式能区分数字和字符串吗?能区分undefined'undefined'吗?

  2. 你现在返回的数据类型还和原有的数据类型一致吗?

带着面试官的疑问,我们来看另外一种经典去重方式。

经典去重方式二:

设置tmp为数组,数组中存储唯一的元素,最终返回tmp

function array_unique (arr) {
  let len = arr.length
  if (!len) {
    return []
  }
  let tmp = []
  for (let i = 0; i < len; i++) {
    // 判断数组arr的元素是否在数组tmp中
    if (tmp.indexOf(arr[i]) === -1) {
      tmp.push(arr[i])
    }
  }
  return tmp
}
let arr = [1, 2, 3, '1', 2, undefined, undefined, 'undefined']
let newArr = array_unique(arr)
console.log(newArr) // [1, 2, 3, '1', undefined, 'undefined']

此刻,内心是否窃喜!

But, 如果你这么考虑,又陷入了面试官的另一个陷阱:

  1. 你这方式能筛选NaN吗?

好吧,面试官最大,再考虑!

数组去重方式三:

原理还是同去重方式二,只不过我们使用ES6的includes替换indexOf方法,

includes() 方法,判断数组中是否包含某个元素,如果包含返回true,否则返回false

就是这么so easy!

function array_unique (arr) {
  let len = arr.length
  if (!len) {
    return []
  }
  let tmp = []
  for (let i = 0; i < len; i++) {
    // 判断数组arr的元素是否在数组tmp中
    if (!tmp.includes(arr[i]) {
      tmp.push(arr[i])
    }
  }
  return tmp
}
let arr = [1, 2, 3, '1', 2, undefined, undefined,  'undefined', NaN, NaN]
let newArr = array_unique(arr)
console.log(newArr) // [1, 2, 3, '1', undefined, 'undefined', NaN]

此刻,你以为就结束吗?不,不可能!

面试官的坑已经在前面等你很久了:

  1. 你的这个筛选方式能区分对象吗?如{}、{a: 1}

有没有想把自己的四十米大砍刀拿出来,neng屎面试官!(图就不配了,自己脑补吧...) 然而,什么都做不了,继续想吧...

数组去重方式四:

原理同上,我们要继续换一个判断数组是否包含某元素的方法:```findIndex``

findIndex查询数组是否包含某元素,如果存在返回元素的索引,否则返回-1。它比indexOf更加先进的地方在于能传入callback,按约定方式查询。

function array_unique (arr) {
  let len = arr.length
  if (!len) {
    return []
  }
  let tmp = []
  for (let i = 0; i < len; i++) {
    // 判断数组arr的元素是否在数组tmp中
    if (tmp.findIndex((v) => JSON.stringify(v) === JSON.stringify(arr[i])) === -1) {
      tmp.push(arr[i])
    }
  }
  return tmp
}
let arr = [1, 2, 3, '1', 2, undefined, undefined,  'undefined', NaN, NaN, {}, {}, {a: 1}, {a: 1}]
let newArr = array_unique(arr)
console.log(newArr) // [1, 2, 3, '1', undefined, 'undefined', NaN, {}, {a: 1}]

终于成功啦!来来来,可以潇洒的问面试官,“您还有问题没有?”

当然,主动挑衅面试官,是要承担风险呦,有可能会因为你眨眼的时候,先眨了右眼被挂掉了...

判断数组是否包含某元素的几种方式:

给大家列个表格,好区分几个方法的作用,

方法\是否可检测 null undefined NaN {} 备注
indexOf
includes
findIndex 需传入特定的callback

小结

数组去重这道面试题,考察的知识点还是非常多的。首先是对数组的常用方法要比较熟悉,还有其他的如NaN与NaN不相等,{}与{}不相等等知识点,以及灵活多变的思维逻辑。

当然,数组去重还有其他的多种实现方式,欢迎各位小伙伴留言交流!

后记

以上就是胡哥今天给大家分享的内容,喜欢的小伙伴记得点赞收藏呀,关注胡哥有话说,学习前端不迷路,欢迎多多留言交流...

胡哥有话说,一个有技术,有情怀的胡哥!现任京东前端攻城狮一枚。

胡哥有话说,专注于大前端技术领域,分享前端系统架构,框架实现原理,最新最高效的技术实践!

面试官在“逗”你系列:数组去重你会几种呀?

收藏
评论区

相关推荐

面试官在“逗”你系列:数组去重你会几种呀?
前言 数组去重是一个老生常谈的话题,也是前端童鞋在面试时的一道高频题。本文将深入的探索数组去重的原理及实现,为各位小伙伴提供多种可以反手“调戏”面试官的解决方案。 话不多说,上去就来一梭子... 数组去重核心原理 价值100W的核心原理上来就给你了...,记得留言点赞鸭! 1. 一般我们都会创建临时变量tmp,存储不重复的元素(以数组元素存储或对
面试官在“逗”你系列:连续子数组的最大和或最小和
前言 本文题目是“连续子数组的最大和或最小和”。 话不多说,开始“打怪”修炼... 一、理解题目 以“连续子数组的最大和”为例,相当于我们在数组中,计算连续的子数组的和,找寻最大值。如在数组3, 2, 1, 2, 4, 6, 5中连续子数组的最大和为:3 (2) 1 2 4 8 输入:3, 2, 1, 2, 4, 6,
面试官在“逗”你系列:不借助第三变量交换两个变量值的方案你有几种?
引言 在我们学习编程之初,就学习过变量的赋值操作,同时也学习了将一个变量的值赋值给另外一个变量。对于交换两个变量的值,很多童鞋都有解决方案。然鹅,对于面试官提出的不借助第三变量来交换两个变量的值,你能想到几种解决方案呢? 如果你只知道一种方案,请你认真看下去... 如果你知道两种方案,那么你可以来了解更多方案了... 一、最简单的实现最初的记忆 让
图文并茂讲清楚 JavaScript 内存管理
作为一个 JavaScript 的开发者,大多数情况下你可能不会担心内存管理问题,因为 JavaScript 引擎会帮你处理这些。但是在开发过程中,你或多或少的会遇到一些相关的问题,比如内存泄漏等,只有了解了内存分配的工作机制,你才会知道如何去解决这些问题。 在这篇文章中,我将会向你介绍 内存分配 和 垃圾收集 的机制,以及如何避免一些 常见的内存泄漏 的
5. Python 循环的本质就是一段代码懒得重复写
为啥要滚雪球学 Python,目的就是当你学会编程一些思想之后,可以让知识的雪球自行滚动起来。 五、Python 循环的本质就是一段代码懒得重复写 程序中的循环概念非常容易理解,一段相似的代码不想重复去写,然后让程序去完成这个操作就是循环。例如从 1 加到 100,如果你依次去加会发现,代码又臭又长,最好的写法当然是让程序通过循环依次去累加。
js二维数组重新转化 Echarts中遇到的数据问题
后台返回的数据 需要重新整合 var arr [[1,1,1],[2,2,2],[3,3,3],[4,4,4],[5,5,5]]var newArray arr[0].map(function(col, i) return arr.map(function(row) return row[i]; ));
IO编程实例——使用缓冲流实现文件的拷贝
数据源:"C:\\Users\\你是小朱老师呀\\Desktop\\test.txt"数据的目的地: "C:\\Users\\你是小朱老师呀\\Desktop\\XSC\\test.txt"实现步骤:1.创建源文件与目标文件2.创建节点流3.创建缓冲流4.读取、写入5.释放 package person.xsc.praticeIII;import java.
npm发布包以及更新包还有需要注意的几点问题(这里以发布vue插件为例)
前言在此之前,你需要去npm官网注册一个属于自己的账号,记住自己的账户名以及密码、邮箱,后面会用的到。第一步,安装webpack简易框架vue init webpacksimple marquee 这里会用到vue init 命令,如果你的cli版本是3或者以上,那么在此之前你需要安装vue/cliinit npm install g @vue
新手怎么学好python?
我就是从零基础开始学的Python,也算是一个过来人了吧,现在看来当初我也是走了许多弯路,来给大家分享一下我的经验吧。首先是最重要的一点,想清楚你为什么要去学Python?你是想要做一个网站,写一个顺手的工具,还是只要能够通过学校的考试就行,这很大程度的影响了你该如何去学Python,学到什么程度或者是你是否该转去学习另一种语言。如果你只是想做一个个人网站或
用python关对象电脑,“分手秘籍”,慎用!!!
​好多天没有跟对象吵架了,有点想练练嘴皮子功夫了,想点办法惹对象生气来。(醒醒,你没对象!) 好了,不逗了,这边教大家用python悄咪咪的控制电脑,微信来操作电脑关机(嘻嘻嘻) 学会了就可以在对象打游戏的时候,把电脑关了(谁叫他不理你,我说的不是“他”呀) 注意:感情不稳定者慎用!!! 一不小心就会..........分手吧粗体 下面是实际操作: 远程控制
求求你调试Python代码,不要再用Print了!
相信大部分人学习Python,肯定会用print()这个内置函数,来调试代码的。 那么在一个大型的项目中,如果你也是使用print来调试你的Python代码,你就会发现你的终端有多个输出。 那么你便不得不去分辨,每一行的输出是哪些代码的运行结果。 举个例子,运行下面这个程序。 num1  30 num2  40  print(num1
手把手教你在夜神、雷电上搭frida+Xposed
一、目标李老板: 奋飞呀,你天天手把手教这样不好吧?奋飞:老板你想多了,就咱们行业这种男女比例,有啥不好的? 二、步骤 夜神Frida 先adb连上夜神,看看它是嘛系统fenfeiMac:Desktop ff$ adb connect 127.0.0.1:62001already connected to 127.0.0.1:62001fenfeiMac:D
Android开发必学!阿里Android开发面试解答
前言许多 Android 开发者经常会问我,要学会哪些东西才能成为一个优秀的 Android 工程师?对于这个问题,他们的描述或多或少都有些差异,但是,总体来说,我们都需要学习一系列的技能,才能成为一个优秀的 Android 工程师。在我看来,存在这样的困惑是正常的。Android 是一个巨大并且动态的生态系统,你可能需要花好几周时间去了解并学习它相关的一些
图虫如何推广
选用大光圈镜头拍攝由于情况都模糊化了差距出高锐利度,一个朋友提前准备开摄影公司。搞点宣传策划,我认为你需要具有下列标准1最先要有扎实的方法摄影水平。行为主体的部分动态模糊和调整颜色曲线图提升饱和度,很非常好的如何盆友。15天。。但你务必提交一定总数的高品质相片以供审批,媒体公关摄像师,能够打一打广告宣传。我是起始点三组的签订网络写手,目录中有逗照片另存地点一
图虫如何推广
选用大光圈镜头拍攝由于情况都模糊化了差距出高锐利度,一个朋友提前准备开摄影公司。搞点宣传策划,我认为你需要具有下列标准1最先要有扎实的方法摄影水平。行为主体的部分动态模糊和调整颜色曲线图提升饱和度,很非常好的如何盆友。15天。。但你务必提交一定总数的高品质相片以供审批,媒体公关摄像师,能够打一打广告宣传。。我是起始点三组的签订网络写手,目录中有逗照片另存地点