首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >JS数组去重!!!一篇不怎么靠谱的"深度"水文

JS数组去重!!!一篇不怎么靠谱的"深度"水文

作者头像
CRPER
发布于 2018-08-28 08:44:01
发布于 2018-08-28 08:44:01
63600
代码可运行
举报
文章被收录于专栏:CRPER折腾记CRPER折腾记
运行总次数:0
代码可运行

前言

数组去重,这是一个老梗了...今天我又拿出来说了... 我们在考虑全面一点的情况下,数组去重的实现,比如针对NaN,undefined,{}; 这其中涉及的知识点挺多,不信跟着走一波; 这里不考虑浏览器兼容性这些破问题,因为涉及ES5&6


基础版-只包含一些可以直接比较的数值

测试数组

[1,1,'','','e','e',true,'true',true,false,false,'false',undefined,'undefined',undefined,null,'null',null]

  • [ES5]万能的for方法
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
function uniqueUseFor(array) {
  var temp = []; //一个临时数组

  //遍历当前数组
  for (var i = 0, j = array.length; i < j; i++) {
    //很直白,新数组内判断是否有这个值,没有的情况下,就推入该新数组
    temp.indexOf(array[i]) === -1 ? temp.push(array[i]) : '';
  }
  return temp;
}

// result: [1, "", "e", true, "true", false, "false", undefined, "undefined", "null", null]复制代码
  • [ES5]内置的forEach方法
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
function uniqueUseForEach(array) {
  // 传入值必须存在,且长度小于等于1的时候直接返回数组
  if (array && array.length <= 1) {
    return array;
  } else {
    var temp = []; //一个临时数组
    //遍历当前数组
    array.forEach(function (value, index) {
      temp.indexOf(value) == -1 ? temp.push(value) : '';
    })
    return temp;
  }
}
// result: [1, "", "e", true, "true", false, "false", undefined, "undefined", "null", null]复制代码
  • [ES6]内置的for-of方法
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
function uniqueUseForOf(array) {
  const temp = []; //一个临时数组
  // 传入值必须存在,且长度小于等于1的时候直接返回数组
  if (array && array.length <= 1) {
    return array;
  } else {
    //遍历当前数组
    for (let x of array) {
      temp.indexOf(x) === -1 ? temp.push(x) : '';
    }

  }
  return temp;
}
// result: [1, "", "e", true, "true", false, "false", undefined, "undefined", "null", null]

进阶版- 包含NaN,undefined,null

测试数组

[1,1,'true',true,true,5,'F',false, undefined, null,null,undefined, NaN, 0, 1, 'a', 'a', NaN,'NaN']

知识点

  • NaN有两中通用判定方法和数组中一种判定方法:
    • 一个是绝对不全等于(===)自身
    • 一个是ES6isNaN()
    • 数组原型链上的Array.prototype.includes()
  • [ES5]: 不等特性,需要借助占位符
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
function uniqueUseNotAllEqual(array) {

  var temp = [], //一个临时数组
      mark = true; // 标识位

  //遍历当前数组
  for (var i = 0, j = array.length; i < j; i++) {
    // 标识位的作用就是用来判断是否存在NaN,第一次找到保留到新数组中
    // 然后标识位置改为false是为了再次找到的时候不推入数组
    if (array[i] !== array[i]) {
      // 这里的不等特性,也可以用isNaN判断[ES6]
      mark && temp.indexOf(array[i]) == -1 ? temp.push(array[i]) : '';
      mark = false;

    } else
      temp.indexOf(array[i]) == -1 ? temp.push(array[i]) : '';

  }
  return temp;
}

// result: [1, "true", true, 5, "F", false, undefined, null, NaN, 0, "a", "NaN"]
  • [ES6]内置Array.prototype.includes()大法
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
function uniqueCompareUseIncludes(array) {
  // 传入值必须存在,且长度小于等于1的时候直接返回数组
  if (array && array.length <= 1) {
    return array;
  } else {
    let temp = []; //一个临时数组
    //遍历当前数组
    for (let x of array) {
      // includes() 方法用来判断当前数组是否包含某指定的值,如果是,则返回 true,否则返回 false。
      temp.includes(x) ? '': temp.push(x) ;
    }
    return temp;
  }
}

// result: [1, "true", true, 5, "F", false, undefined, null, NaN, 0, "a", "NaN"]
  • [ES6] Array.from或拓展运算符[...]结合Set大法

知识点

  • Set的值具有唯一性,内部会自动===比较,是可迭代对象(iterable),有点特殊的是NaN这货虽然有不全等的特性,在Set里面认为是相同的,所以只能有一个
  • Array.from...可以把类似数组【nodelist or arguments】这类可迭代的对象中转为一个标准的数组
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// Array.from + Set的方法
Array.from(new Set([1,1,'true',true,true,5,'F',false, undefined, null,null,undefined, NaN, 0, 1, 'a', 'a', NaN,'NaN']))
// resule: [1, "true", true, 5, "F", false, undefined, null, NaN, 0, "a", "NaN"]


// ... + Set的方法
[...new Set([1,1,'true',true,true,5,'F',false, undefined, null,null,undefined, NaN, 0, 1, 'a', 'a', NaN,'NaN'])]
//result: [1, "true", true, 5, "F", false, undefined, null, NaN, 0, "a", "NaN"]

高阶版- 包含{},NaN,undefined,null

测试数组

[1,1,'true',true,true,5,'F',false, undefined, null,null,undefined, NaN,{},{},'{}', 0, 1, 'a', 'a', NaN]

知识点

  • {}的比较真心不好做,有残缺性的比较可以这样写 JSON.stringify({}) == '{}'
  • 一个比较完美的方案是借助for in结合原型链的toString来判断
  • [ES5]for-in + call + for方案
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
function uniqueUseForIn(array) {
  var temp = [];
  var emptyObjectMark = true; // 标识位
  var NaNObjectMark = true; // 标识位
  // 判断空对象,这块判断折腾了许久
  function isEmptyObject(object) {
    if (Object.prototype.toString.call(object) === "[object Object]") {
      for (var i in object) {
        // 存在属性或方法,则不是空对象
        return false
      }
      return true;
    } else {
      return false;
    }
  }

  // 传入值必须存在,且长度小于等于1的时候直接返回数组
  if (array && array.length <= 1) {
    return array;
  } else {
    //遍历当前数组
    for (var i = 0, j = array.length; i < j; i++) {
      // 标识位的作用就是用来判断是否存在NaN和空对象,第一次找到保留到新数组中
      // 然后标识位置改为false是为了再次找到的时候不推入数组
      if (isEmptyObject(array[i])) {
        emptyObjectMark && temp.indexOf(array[i]) == -1 ? temp.push(array[i]) : '';
        emptyObjectMark = false;
      } else if (array[i] !== array[i]) {
        NaNObjectMark && temp.indexOf(array[i]) == -1 ? temp.push(array[i]) : '';
        NaNObjectMark = false;
      } else
        temp.indexOf(array[i]) == -1 ? temp.push(array[i]) : '';

    }
    return temp;

  }
}

// result:[1, "true", true, 5, "F", false, undefined, null, NaN, Object, "{}", 0, "a"]

拓展版:多维数组扁平化再去重;

回应:

留言板的小伙伴说去重深度不够。。2017/5/12

测试数组

[1, 1, [['true', true, true, [5, 'F'], false], undefined], null, null, [undefined, NaN, {}], {}, '{}', 0,1, 'a','a', NaN]

知识点

  • 数组扁平化用了递归实现
  • 代码也考虑了默认参数,防止不传递参数的时候报错
  • [ES5]for-in + call + for + 递归扁平化方案
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
function uniqueArrayWithFlattern(array) {
  var _array = array || []; // 保存传参
  // 判断空对象,这块判断折腾了许久
  function isEmptyObject(object) {
    if (Object.prototype.toString.call(object) === "[object Object]") {
      for (var i in object) {
        // 存在属性或方法,则不是空对象
        return false
      }
      return true;
    } else {
      return false;
    }
  }



  // 遍历查询判断,扁平化数组
  function forArrayFlattern(arr) {

    for (var m = 0, n = arr.length; m < n; m++) {
      if (Array.isArray(arr[m])) {
        var _tempSpliceArr = _array.splice(m, 1)[0];
        _array = _array.concat(_tempSpliceArr);
        return forArrayFlattern(_array);
      }
    }
    return uniqueArr(_array);
  }


  // 传入值必须存在,且长度小于等于1的时候直接返回数组
  if (_array && _array.length <= 1) {
    return _array
  } else {
    if (Array.isArray(_array)) {
      return forArrayFlattern(_array)
    } else {
      return _array;
    }
  }

  // 数组去重
  function uniqueArr(_array) {
    var temp = [];
    var emptyObjectMark = true; // 标识位
    var NaNObjectMark = true; // 标识位
    console.log(_array.length)
    //遍历当前数组
    for (var a = 0, b = _array.length; a < b; a++) {
      // 标识位的作用就是用来判断是否存在NaN和空对象,第一次找到保留到新数组中
      // 然后标识位置改为false是为了再次找到的时候不推入数组

      console.log(_array[a]);
      if (isEmptyObject(_array[a])) {
        emptyObjectMark && temp.indexOf(_array[a]) == -1 ? temp.push(_array[a]) : '';
        emptyObjectMark = false;
      } else if (_array[a] !== _array[a]) {
        NaNObjectMark && temp.indexOf(_array[a]) == -1 ? temp.push(_array[a]) : '';
        NaNObjectMark = false;
      } else {
        temp.indexOf(_array[a]) === -1 ? temp.push(_array[a]) : '';
      }
    }
    console.log(temp);
    return temp;
  }
}

// result:[1, null, Object, "{}", 0, "a", NaN, undefined, "true", true, false, 5, "F"]
// 用ES6来写的话,应该代码量可以稍微再精简些

总结

相信各位小伙伴把这个弄懂了之后,各种面试中的花样数组去重要求对你来说都不是很坑了;

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2017年05月11日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
如何答一道惊艳面试官的数组去重问题?
思想: 双重 for 循环是比较笨拙的方法,它实现的原理很简单:先定义一个包含原始数组第一个元素的数组,然后遍历原始数组,将原始数组中的每个元素与新数组中的每个元素进行比对,如果不重复则添加到新数组中,最后返回新数组;因为它的时间复杂度是O(n^2),如果数组长度很大,效率会很低。
coder_koala
2019/12/27
1.3K0
如何答一道惊艳面试官的数组去重问题?
数组去重性能优化:为什么Set和Object哈希表的效率最高
数组去重是指从一个数组中移除重复的元素,保留唯一值的过程。例如,给定数组 [1, 2, 2, 3, 4, 4],去重后的结果为 [1, 2, 3, 4]。
watermelo37
2025/07/03
870
数组去重性能优化:为什么Set和Object哈希表的效率最高
一个让我耳目一新的数组去重方法
这个方法比较常用,因为它可以去重基础数据类型组成的数组,也可以去重对象或数据类型数据组成的数组,如:
fastmock
2024/04/30
2970
面试官在“逗”你系列:数组去重你会几种呀?
数组去重是一个老生常谈的话题,也是前端童鞋在面试时的一道高频题。本文将深入的探索数组去重的原理及实现,为各位小伙伴提供多种可以反手“调戏”面试官的解决方案。
胡哥有话说
2020/05/18
4140
9种JS数组去重的高阶方法思路,值得借鉴
一般的方法此处也不列举了,还是有很多的,如双层循环判断是否相等,或新建数组比较再push等等,需要注意的是,使用splice方法移除元素时,有可能会导致数组塌陷问题,需要处理一下。
前端达人
2021/06/16
1.4K0
JavaScript之数组去重
hasOwnProperty > reduce + indexOf > includes > indexOf > Set
全栈开发Dream
2021/06/01
9440
JavaScript之数组去重
常用utils
数组最大最小值 function min(nums) { var res = nums[0] for (var i = 0; i < nums.length; i++) { if (res > nums[i]) { res = nums[i] } } return res } function max(nums) { var res = nums[0] for (var i = 0; i < nums.l
hss
2022/02/25
2800
js面试题
rest运算符也是三个点号,不过其功能与扩展运算符恰好相反,把逗号隔开的值序列组合成一个数组
肥晨
2023/02/16
7020
javascript数组去重set方法_js数组去重api
这是最简单的数组去重方法,实现思路:新建一新数组,传入要去重的数组,遍历该数组,若值不在新数组中则加入该数组;需要注意点:判断值是否在数组的方法“indexOf”是ECMAScript5 方法,IE8以下不支持,示例如下:
全栈程序员站长
2022/08/04
3K0
ES6入门之数组的扩展
在实际中,像获取dom后返回的Nodelist集合,以及函数内部的arguments对象就是类数组,通过 Array.from将它们转换为真正的数组。
执行上下文
2022/07/26
2630
ES6入门之数组的扩展
JS数组相关问题的解决方法
语法:var newArray = arr.flat(depth),参数说明:depth,可选,指定嵌套数组中的结构深度,默认值为1
愤怒的小鸟
2021/01/14
9770
JS数组去重的6种算法实现以上就是为大家提供的6种JS数组去重的算法实现,希望对大家的学习有所帮助。
1.遍历数组法 最简单的去重方法,实现思路:新建一新数组,遍历传入数组,值不在新数组就加入该新数组中;注意点:判断值是否在数组的方法“indexOf”是ECMAScript5 方法,IE8以下不支持,需多写一些兼容低版本浏览器代码,源码如下: var arr = [1,3,5,7,9,1,9,5,9,3,5,11,13]; function unique1(array){ var newArr=[];//新建一个新数组 //遍历参数数组array for(var i=0;i<array.length;i
王小婷
2018/06/04
6.3K0
JS面试之数组的几个不low操作(3)
本文主要从应用来讲数组api的一些骚操作; 如一行代码扁平化n维数组、数组去重、求数组最大值、数组求和、排序、对象和数组的转化等; 上面这些应用场景你可以用一行代码实现?
火狼1
2019/04/17
1.3K0
最全的JS数组去重
数组去重,一般都是在面试的时候才会碰到,一般是要求手写数组去重方法的代码。如果是被提问到,数组去重的方法有哪些?你能答出其中的10种,面试官很有可能对你刮目相看。在真实的项目中碰到的数组去重,一般都是后台去处理,很少让前端处理数组去重。虽然日常项目用到的概率比较低,但还是需要了解一下,以防面试的时候可能回被问到。文末有福利哦
grain先森
2019/03/28
2.2K0
这些Zepto中实用的方法集
根据文章内容撰写摘要总结。
IMWeb前端团队
2017/12/29
8780
这些Zepto中实用的方法集
如何用JavaScript进行数组去重
今天的文章和大家谈一谈如何用JavaScript进行数组去重,这是一道常见的面试(笔试)题,可以很好地考察出一个人的逻辑思维及边界考虑情况,希望此文能够帮助大家在解决类似问题时拓宽思路。据我到目前为止面试的情况,很少有人能在现场考虑很全,基本上的人都是浅尝辄止。 当然,“使用库中的一个函数就能去重”并不在本篇文章的讨论范围内,我们针对的是需要自己写代码的场景。考虑到实际情况,我们使用ES5(主要就用了indexOf方法,如果是更古老的环境,可以自己增加这段代码,或者使用ES5兼容库es5-sham.js)。
个推君
2018/03/21
1.1K0
如何用JavaScript进行数组去重
JavaScript专题(二)数组去重,会就要会的理直气壮
如果数组中有NaN,你又正好需要判断数组是否有存在NaN,这时你使用indexOf是无法判断的,你必须使用includes这个方法。
全栈程序员站长
2022/07/04
4380
JavaScript 新手的踩坑日记
在1995年5月,Eich 大神在10天内就写出了第一个脚本语言的版本,JavaScript 的第一个代号是 Mocha,Marc Andreesen 起的这个名字。由于商标问题以及很多产品已经使用了 Live 的前缀,网景市场部将它改名为 LiveScript。在1995年11月底,Navigator 2.0B3 发行,其中包含了该语言的原型,这个版本相比之前没有什么大的变化。在1995年12月初,Java 语言发展壮大,Sun 把 Java 的商标授权给了网景。这个语言被再次改名,变成了最终的名字——JavaScript。在之后的1997年1月,标准化以后,就成为现在的 ECMAScript。
一缕殇流化隐半边冰霜
2024/01/26
2260
JavaScript 新手的踩坑日记
JS数组去重的几种常见方法
// 最简单数组去重法 /* * 新建一新数组,遍历传入数组,值不在新数组就push进该新数组中 * IE8以下不支持数组的indexOf方法 * */ function uniq(array){
李才哥
2019/07/10
1.2K0
JS数组去重的几种常见方法
使用JavaScript的一些小技巧
https://www.w3cplus.com/javascript/javascript-tips.html
@超人
2021/02/26
1.7K0
使用JavaScript的一些小技巧
相关推荐
如何答一道惊艳面试官的数组去重问题?
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验