数组去重--这几种方法够不?

wendux 发布于2019-08-21 15:01 / 2273人阅读

摘要：数组去重是校招面试的必考知识点。以下就是笔者所实现的数组去重的几种简单的方式。结合实现这种方法的关键点就是判断是否相同的时候不要忽略对元素类型的判断。以上就是笔者所想到的几个数组去重的方式大家如果有更好的方法欢迎留言。

数组去重,是校招面试的必考知识点。简单的说,数组去重就是将一个数组中的相同的元素删除,只保留其中的一个。这里的相同其实是一个陷阱,有好多同学只认为值相等即为相同,而忽略类类型的判断。所以大家在进行数组去重的时候,一定要考虑周全。以下,就是笔者所实现的数组去重的几种简单的方式。

1、Set实现

第一种方法就是使用es6新增的Array.from()和new Set()。如果现在你还不了解es6,那你可真是out了。建议阅读ECMAScript 6 入门或者learn-es2015。

Array.prototype.unique = function() {
  return Array.from(new Set(this));
}

2、结合{}实现

这种方法的关键点就是：判断是否相同的时候,不要忽略对元素类型的判断。

Array.prototype.unique = function() {
  var json = {};
  var result = [];
  this.forEach(function(value){
    var type = Object.prototype.toString.call(value).match(/s(w+)/)[1].toLowerCase();
    if(!((type + "-"+value) in json)){
      json[type + "-"+value] = true;
      result.push(value);
    }
  })
  return result;
}

3、利用Array.prototype.filter实现

filter是es5中新增的数组的一个方法。不了解的同请阅读Array.prototype.filter()

Array.prototype.unique = function() {
  var sortArr = this.sort();
  return sortArr.filter(function(v,i,context){
    return v !== context[i+1];
  })
}

4、利用Array.prototype.forEach实现

includes也是es6新增的方法。不了解的同请阅读Array.prototype.includes()

Array.prototype.unique = function() {
  var result = [];
  this.forEach(function(v){
    if(!result.includes(v)){
      result.push(v);
    }
  })
  return result;
}

5、利用Array.prototype.splice()实现

这个方法是一个很常规的方法,关键点就是在splice一个元素之后,i要自减1。

Array.prototype.unique = function() {
  var sortArr = this.sort(),
    i = 0;
  for(; i < sortArr.length; i++){
    if(sortArr[i] === sortArr[i+1]){
      sortArr.splice(i,1);
      i--;
    }
  }
  return sortArr;
}

6、利用Array.prototype.reduce()实现

reduce是es5中新增的数组的一个方法。不了解的同学请阅读Array.prototype.reduce()。

Array.prototype.unique = function() {
  var sortArr = this.sort(), result = [];
  sortArr.reduce((v1,v2) => {
    if(v1 !== v2){
      result.push(v1);
    }
    return v2;
  })
  result.push(sortArr[sortArr.length - 1]);
  return result;
}

以上就是笔者所想到的几个数组去重的方式,大家如果有更好的方法,欢迎留言。也可以去我的github的仓库snippetspr,这个仓库主要用于前端代码片段的搜集,欢迎大家踊跃贡献。

云服务器 GPU云服务器数组去重数组去重二维数组去重 php数组去重

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/88067.html

前端空间 - 收藏集 - 掘金

摘要：封装手写的方笔记使用检测文件前端掘金副标题可以做什么以及使用中会遇到的坑。目的是帮助人们用纯中文指南实现复选框中多选功能前端掘金作者缉熙简介是推出的一个天挑战。深入理解 JavaScript Errors 和 Stack Traces - 前端 - 掘金译者注：本文作者是著名 JavaScript BDD 测试框架 Chai.js 源码贡献者之一，Chai.js 中会遇到很多异常处理...

you_De 2019-08-29 12:34 评论0 收藏0
前端空间 - 收藏集 - 掘金

摘要：封装手写的方笔记使用检测文件前端掘金副标题可以做什么以及使用中会遇到的坑。目的是帮助人们用纯中文指南实现复选框中多选功能前端掘金作者缉熙简介是推出的一个天挑战。深入理解 JavaScript Errors 和 Stack Traces - 前端 - 掘金译者注：本文作者是著名 JavaScript BDD 测试框架 Chai.js 源码贡献者之一，Chai.js 中会遇到很多异常处理...

lwx12525 2019-08-20 16:35 评论0 收藏0
JS程序

摘要：设计模式是以面向对象编程为基础的，的面向对象编程和传统的的面向对象编程有些差别，这让我一开始接触的时候感到十分痛苦，但是这只能靠自己慢慢积累慢慢思考。想继续了解设计模式必须要先搞懂面向对象编程，否则只会让你自己更痛苦。 JavaScript 中的构造函数学习总结。知识只有分享才有存在的意义。是时候替换你的 for 循环大法了~ 《小分享》JavaScript中数组的那些迭代方法~ ...

melody_lql 2019-08-22 11:22 评论0 收藏0
2018年5月前端面试题

摘要：在上家公司裸辞之后，经过一段时间休整，月中下旬面试了一些公司，由于本人框架使用的是，所以面试题涉及到框架的都是，现将面试题整理一下列举常用的特性。事件冒泡以及事件捕获。其他前端分页和后端分页优缺点。包含多个子节点及孙节点，遍历。在上家公司裸辞之后，经过一段时间休整，5月中下旬面试了一些公司，由于本人框架使用的是vue，所以面试题涉及到框架的都是vue，现将面试题整理一下： es6 ...

wwolf 2019-08-26 11:55 评论0 收藏0
2018年5月前端面试题

摘要：在上家公司裸辞之后，经过一段时间休整，月中下旬面试了一些公司，由于本人框架使用的是，所以面试题涉及到框架的都是，现将面试题整理一下列举常用的特性。事件冒泡以及事件捕获。其他前端分页和后端分页优缺点。包含多个子节点及孙节点，遍历。在上家公司裸辞之后，经过一段时间休整，5月中下旬面试了一些公司，由于本人框架使用的是vue，所以面试题涉及到框架的都是vue，现将面试题整理一下： es6 ...

Lavender 2019-08-02 10:35 评论0 收藏0