数组去重是一个老生常谈的话题,也是前端童鞋在面试时的一道高频题。本文将深入的探索数组去重的原理及实现,为各位小伙伴提供多种可以反手“调戏”面试官的解决方案。
话不多说,上去就来一梭子...
价值100W的核心原理上来就给你了...,记得留言点赞鸭!
基本上无论什么样的实现,其核心皆是如此(判断是否已存在)。不行你就留言,咱们可以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不相等,{}与{}不相等等知识点,以及灵活多变的思维逻辑。
当然,数组去重还有其他的多种实现方式,欢迎各位小伙伴留言交流!
以上就是胡哥今天给大家分享的内容,喜欢的小伙伴记得点赞、收藏呦,关注胡哥有话说,学习前端不迷路,欢迎多多留言交流...
胡哥有话说,一个有技术,有情怀的胡哥!现任京东前端攻城狮一枚。胡哥有话说,专注于大前端技术领域,分享前端系统架构,框架实现原理,最新最高效的技术实践!
原文:https://www.cnblogs.com/justbecoder/p/12892675.html
avaScript数组同后端语言一样,具有它自己的数据结构,归根结底,这种数据结构,本质就是一种集合。在后端语言中(如java,.net等),数组是这样定义的:数组是用来存储相同数据类型的集合
单个数字转汉字的解决方法:利用数组存储0-9的汉字、 ary.length和str.length不用多说,这是指ary数组和str字符串的长度。这里我们需要注意的是str.charAt(j)和ary[i],分别指在str这个字符串中索引为j的元素,在ary中索引为i的元素。
在 Javascript 循环中使用 async/ await 循环遍历数组似乎很简单,但是在将两者结合使用时需要注意一些非直观的行为。让我们看看三个不同的例子,看看你应该注意什么,以及哪个循环最适合特定用例。
今天说的数组和字符串去重呢,主要用到es6新的数据结构 Set,它类似于数组,但是成员的值都是唯一的,没有重复的值,所以活用Set来进行数组和字符串的去重。
数组方法:1、Array.join([param]) 方法:将数组中所有的元素都转换为字符串并连接起来,通过字符 param 连接,默认使用逗号,返回最后生成的字符串2、Array.reverse() 方法:将数组中的元素颠倒顺序(在原数组中重新排列它们),返回逆序数组
falsy(虚值)是在 Boolean 上下文中已认定可转换为‘假‘的值.JavaScript 在需要用到布尔类型值的上下文中使用强制类型转换(Type Conversion )将值转换为布尔值,比如:在条件语句或者循环语句中。
JavaScript中我们经常会遇到拷贝数组的场景,但是都有哪些方式能够来实现呢,我们不妨来梳理一下。扩展运算符(浅拷贝)自从ES6出现以来,这已经成为最流行的方法。
本文主要来讲数组api的一些操作,如简单实现扁平化n维数组、数组去重、求数组最大值、数组求和、排序、对象和数组的转化等。扁平化嵌套数组/展平和阵列孔——flat()
vue无法监听数组变化的情况,但是数组在下面两种情况下无法监听:利用索引直接设置数组项时,例如arr[indexofitem]=newValue;修改数组的长度时,例如arr.length=newLength
使用 ES5 语法来实现虽然会麻烦些,但兼容性最好,不用考虑浏览器 JavaScript 版本,使用 ES5 语法来实现虽然会麻烦些,但兼容性最好,不用考虑浏览器 JavaScript 版本。也不用引入其他第三方库。
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!