美文网首页
JS数组去重你会几种呀?

JS数组去重你会几种呀?

作者: 盼少 | 来源:发表于2020-06-02 18:01 被阅读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']

如果你采用这种方式来回答面试官的话,你就陷入了他在内心中早早设下的陷阱:
你这种方式能区分数字和字符串吗?能区分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([) // [1, 2, 3, '1', undefined, 'undefined', NaN, {}, {a: 1}]

终于成功啦!来来来,可以潇洒的问面试官,“您还有问题没有?”
当然,主动挑衅面试官,是要承担风险呦,有可能会因为你眨眼的时候,先眨了右眼被挂掉了...

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

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

方法\是否可检测 null undefined NaN {} 备注
indexOf 直接传值; 主流
includes 直接传值;ES2016,IE14
findIndex 需传入特定的callback

小结

数组去重这道面试题,考察的知识点还是非常多的。

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

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

let arr = [1, 2, 3, '1', 2, undefined, undefined,  'undefined', NaN, NaN, {}, {}, {a: 1}, {a: 1}]
let set = new Set(arr)
console.log([...set])
// [ 1, 2, 3, '1', undefined, 'undefined', NaN,  {}, {}, { a: 1 }, { a: 1 }]

本文引用:胡哥有话说

相关文章

  • JS数组去重你会几种呀?

    前言 数组去重是一个老生常谈的话题,也是前端童鞋在面试时的一道高频题。本文将深入的探索数组去重的原理及实现,为各位...

  • JS数组去重 你知道几种?

    JS数组去重是前端面试,常考察的一道题,你会几种方法呢?如果你有更好的方法,可以在文章下放评论区提供。接下来看看8...

  • Array集结号

    实现数组去重的几种方法 数组去重一 数组去重二 利用数组indexof+push实现数组去重 数组去重三 利用对象...

  • js数组去重的几种方法

    js去重的几种方法: 1.使用indexOf()方法---[a.检查当前数组是否存在;b.比较数组的下标---(借...

  • 数组去重封装

    上次写到了数组去重的几种方式数组去重的几种方式,那么今天就让我们来封装一下数组去重吧。 就在数组原型上封装吧! 源...

  • js数组几种去重的方法

    利用indexOf方法,es6也可以用includes方法 利用对象键值 利用set的不可重复性 (感觉比较简单)...

  • js几种常见的数组去重

    1.利用indexOf方法去重 function deleteArr(arr){var newArr = [];f...

  • js几种数组去重方法

    一、1.构建一个新的数组存放结果2.for循环中每次从原数组中取出一个元素,用这个元素循环与结果数组对比3.若结果...

  • js数组的几种去重方法

  • js 数组去重的几种方式

    一、Array.from + Set 二、Set、扩展运算符 三、filter + indexOf 四、index...

网友评论

      本文标题:JS数组去重你会几种呀?

      本文链接:https://www.haomeiwen.com/subject/hwlractx.html