当前位置:主页 > 热点 > 文章内容

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

日期:2020-05-15 浏览:

前言

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

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

数组去重焦点原理

价值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不相等,{}与{}不相等等知识点,以及天真多变的头脑逻辑。

固然,数组去重另有其他的多种实现方式,迎接列位小伙伴留言交流!

后记

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

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

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

,

Sunbet

Sunbet www.593711.com Sunbet是进入Sunbet www.sunbet.us认可的自助开户、储值平台。Sunbet开放Sunbet会员开户网址、Sunbet代理开户、Sunbet手机版下载、Sunbet电脑客户端下载等业务。