内容简介:数组去重是一个老生常谈的话题,也是前端童鞋在面试时的一道高频题。本文将深入的探索数组去重的原理及实现,为各位小伙伴提供话不多说,上去就来一梭子...价值100W的核心原理上来就给你了...,记得留言点赞鸭!
前言
数组去重是一个老生常谈的话题,也是前端童鞋在面试时的一道高频题。本文将深入的探索数组去重的原理及实现,为各位小伙伴提供 多种
可以 反手“调戏”
面试官的解决方案。
话不多说,上去就来一梭子...
数组去重核心原理
价值100W的核心原理上来就给你了...,记得留言点赞鸭!
- 一般我们都会创建临时变量tmp,存储不重复的元素(以数组元素存储或对象的键来存储);
- 遍历待去重数组arr,依次判断tmp中是否包含该元素;
- 若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']
如果你采用这种方式来回答面试官的话,你就陷入了他在内心中早早设下的陷阱:
-
你这种方式能区分数字和字符串吗?能区分
undefined
和'undefined'
吗? -
你现在返回的数据类型还和原有的数据类型一致吗?
带着面试官的疑问,我们来看另外一种经典去重方式。
经典去重方式二:
设置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, 如果你这么考虑,又陷入了面试官的另一个陷阱:
- 你这方式能筛选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]
此刻,你以为就结束吗?不,不可能!
面试官的坑已经在前面等你很久了:
- 你的这个筛选方式能区分对象吗?如{}、{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不相等,{}与{}不相等等知识点,以及灵活多变的思维逻辑。
当然,数组去重还有其他的多种实现方式,欢迎各位小伙伴留言交流!
后记
以上就是胡哥今天给大家分享的内容,喜欢的小伙伴记得 点赞
、 收藏
呦,关注胡哥有话说,学习前端不迷路,欢迎多多留言交流...
胡哥有话说,一个有技术,有情怀的胡哥!现任京东前端攻城狮一枚。
胡哥有话说,专注于大前端技术领域,分享前端系统架构,框架实现原理,最新最高效的技术实践!
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- 算法面试:数组编码面试问题
- 高频算法面试题(数组)leetcode 169. 求众数
- 「前端面试题系列8」数组去重(10 种浓缩版)
- 数据结构和算法面试题系列-C指针、数组和结构体
- C语言指针数组和数组指针
- 数组 – 如何在Swift中将数组拆分成两半?
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
大数据大创新:阿里巴巴云上数据中台之道
邓中华 / 电子工业出版社 / 2018-11 / 99
阿里巴巴云上数据中台正服务着阿里生态中的数十个业务板块、百余家公司、千万级客户,在帮助决策层看清甚至决定业态走向的同时,在上万个业务场景中应用并催生创新。 《大数据大创新:阿里巴巴云上数据中台之道》基于作者在阿里巴巴的十年大数据从业经历,精彩演绎云上数据中台之道。《大数据大创新:阿里巴巴云上数据中台之道》基于大数据探索的大趋势,讲述阿里巴巴云上数据中台顶层设计,再以实际案例详述阿里巴巴云上数......一起来看看 《大数据大创新:阿里巴巴云上数据中台之道》 这本书的介绍吧!