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

胡哥有话说 等级 800 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不相等,{}与{}不相等等知识点,以及灵活多变的思维逻辑。

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

后记

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

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

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

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

收藏
评论区

相关推荐

工作两年简历写成这样,谁要你呀!
作者:小傅哥 博客:https://bugstack.cn(https://bugstack.cn/) 沉淀、分享、成长,让自己和他人都
面试官在“逗”你系列:数组去重你会几种呀?
前言 数组去重是一个老生常谈的话题,也是前端童鞋在面试时的一道高频题。本文将深入的探索数组去重的原理及实现,为各位小伙伴提供多种可以反手“调戏”面试官的解决方案。 话不多说,上去就来一梭子... 数组去重核心原理 价值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 引擎会帮你处理这些。但是在开发过程中,你或多或少的会遇到一些相关的问题,比如内存泄漏等,只有了解了内存分配的工作机制,你才会知道如何去解决这些问题。 在这篇文章中,我将会向你介绍 内存分配 和 垃圾收集 的机制,以及如何避免一些 常见的内存泄漏 的
IO编程实例——使用缓冲流实现文件的拷贝
数据源:"C:\\Users\\你是小朱老师呀\\Desktop\\test.txt"数据的目的地: "C:\\Users\\你是小朱老师呀\\Desktop\\XSC\\test.txt"实现步骤:1.创建源文件与目标文件2.创建节点流3.创建缓冲流4.读取、写入5.释放 package person.xsc.praticeIII;import java.
用python关对象电脑,“分手秘籍”,慎用!!!
​好多天没有跟对象吵架了,有点想练练嘴皮子功夫了,想点办法惹对象生气来。(醒醒,你没对象!) 好了,不逗了,这边教大家用python悄咪咪的控制电脑,微信来操作电脑关机(嘻嘻嘻) 学会了就可以在对象打游戏的时候,把电脑关了(谁叫他不理你,我说的不是“他”呀) 注意:感情不稳定者慎用!!! 一不小心就会..........分手吧粗体 下面是实际操作: 远程控制
G3D 渲染引擎简介
G3D 是一款基于 WebGL 的 JavaScript 3D 渲染引擎,借助 GCanvas,G3D 可以运行在 Weex,ReactNative 等 hybrid 环境下。G3D 由淘宝终端团队推出,并于 2018 年 3 月与 GCanvas 同时宣布正式开源。 那么就会有同学问了,G3D 和 three.js 有什么不同呀?G3D 和 GCanva
5秒克隆语音,我也能用周杰伦的声音唱歌了
![](https://oscimg.oschina.net/oscnet/3e9055caf30f4b55f2964c583d938d27a85.jpg) Hi!大家好呀!我是你们努力的喵哥! 很多同学都对变声成为别人的声音比较感兴趣。毕竟,声音可是人的重要特征。而且,在没有重大的身体特征变化情况,声音的特征都会跟随我们一辈子。 换个声音,通常会有新
MySQL 不怕你不会,就怕你不学
**Windows服务** 1 -- 启动MySQL 2 net start mysql 3 -- 创建Windows服务 4 sc create mysql binPath= mysqld\_bin\_path(注意:等号与值之间有空格) **连接与断开服务器** 1 mysql -h 地址 -P 端口 -u 用户名 -p 密码 2 SHOW PRO
269个JavaScript工具函数,助你提升工作效率(6)
![269个JavaScript工具函数,助你提升工作效率.png](https://static.oschina.net/uploads/img/202009/11172428_tWo3.jpg) 151.数组中某元素出现的次数 --------------- /** * @param { array } arr * @param {*} va
JavaScript俄罗斯方块游戏开发
![](https://oscimg.oschina.net/oscnet/4035f5f9-fff6-49ec-997e-e887a615972e.png)俄罗斯方块游戏,童年的回忆呀,相信大家都有玩过,今天我就带大家来讲解一下前端开发网页俄罗斯方块的开发方法。 ![](https://oscimg.oschina.net/oscnet/84683130
JavaScript去掉数组中的重复元素
题目:去掉数组\[4,3,"3",3,5,7,5\]中的重复元素,返回\[4,3,"3",5,7\] (function() { 'use strict'; function filter1(arr) { var b = []; arr.forEach(function
JavaScript避免代码的重复执行经验技巧分享
经常会发现一个问题,那就是重复的代码执行,下面就是一些在查看它们的源代码时发现一些问题,把这些分享给大家,希望能让你们更加简洁高效的写出JavaScript代码 我喜欢到一些大型网站上去翻阅它们的原代码,期望能找到一些可以应用到自己的代码中的模式,或发现一些之前从未听说过的工具和技巧。可是,在我查看这些大型网站的源代码时,经常会发现一个问题,那就是重复的代
Script标签位置
不会吧,不会吧,前端人 2021年了还有人把script标签放在标签中不合适了吧。是,你是可以把script放在中,但是你知道这意味着什么吗?兄嘚,意味着javascript代码都下载下来,解析和解释完成后在渲染你的页面,页面渲染延迟,浏览器窗口再次期间是空白的,大家都很忙的,兄嘚没人等你加载完啊。放在里面啊这样javascript处理之前,页面已经渲染完成了,显示空白页面的时间也就少了呀。