资讯专栏INFORMATION COLUMN

关于js数组去重

callmewhy / 1285人阅读

摘要:测试排序后相邻去除法思路先将数组经过排序,这时候相同的元素处于相邻的位置所以在便利数组的时候我们只将与前一值不重复的值注意这里测试中方式补充这种方式兼容性但是可以通过转不太好,但是非常简洁。

不管是面试还是平时写程序的过程中我们经常会遇到要对数组进行去重的问题,该文总结了一些常见的数组去重的方法。

对象键值对法

思路:新建一js对象json以及新数组reArr,遍历数组元素是否为json的键,不是则创建,是则判断元素的类型在键对应的值中是否存在。

    function unique(array){
      var json = {}, reArr = [], len = array.length, val, type;
        for (var i = 0; i < len ; i++) {
            val = array[i];
            type = Object.prototype.toString.call(val);
            if (!json[val]) {//如果键对应的值不存在则是第一次存取
                json[val] = [type];//设置该键为数组,并赋值元素类型
                reArr.push(val);//往reArr中添加元素
            } else if (json[val].indexOf(type) < 0) {
                json[val].push(type);
                reArr.push(val);
            }
        }
        return reArr;
    }
//该方法有bug,当有多个{}时,只能保存一个{} 

测试

遍历数组法

思路:新建一新数组,遍历传入的数组,值不在新数组就加入该新数组中;该方法最主要的是要使用ES5中的indexOf方法。但是ie8一下不支持,所以需要做一些兼容

    if (!Array.prototype.indexOf){
      Array.prototype.indexOf = function(item){
        if (this.length == 0){
          return -1;
        }
        for(var i = 0, len = this.length; i < len; i++){
          if (this[i] === item){//注意是三个等号
            return i
            break;
          }  
        }
        return -1;
      }
}

去重代码

function unique(array){
  var reArr = []; 
  for(var i = 0; i < array.length; i++){
    if (reArr.indexOf(array[i]) == -1){//判断元素是否在数组中已经存在
       reArr.push(array[i]);
    } 
  }
  return reArr;
}

测试

数组下标判断法

思路:将传入的数组的第一项目添加到一个新的数组,后遍历传入的数组中的元素利用indexOf方法,若返回值与循环中的索引不同则是重复的元素。

    function unique(array){
        var reArr=[];
            reArr[0]=array[0];
        for(var i=1;i

测试

排序后相邻去除法

思路:先将数组经过sort排序,这时候相同的元素处于相邻的位置,所以在便利数组的时候我们只将与前一值不重复的值

    function unique(array){
        var reArr=[array[0]];
        var len=array.length;
            array.sort();
        for(var i=1;i

测试

es6中Set方式(2017-8-25补充)

这种方式兼容性(但是可以通过babel转)不太好,但是非常简洁。

function uniq (array) {
  return [...new Set(array)]
}

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

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

相关文章

  • JavaScript 实现数组更多的高阶函数

    摘要:实现数组更多的高阶函数吾辈的博客原文场景虽说人人平等,但有些人更加平等。若是有一篇适合萌新阅读的自己实现数组更多操作的文章,情况或许会发生一些变化。类似于的初始值,但它是一个函数,避免初始值在所有分组中进行累加。 JavaScript 实现数组更多的高阶函数 吾辈的博客原文: https://blog.rxliuli.com/p/fc... 场景 虽说人人平等,但有些人更加平等。 为...

    aervon 评论0 收藏0
  • 也谈面试必备问题之 JavaScript 数组去重

    摘要:而数组元素去重是基于运算符的。而如果有迭代函数,则计算传入迭代函数后的值,对值去重,调用方法,而该方法的核心就是调用方法,和我们上面说的方法一异曲同工。 Why underscore (觉得这部分眼熟的可以直接跳到下一段了...) 最近开始看 underscore.js 源码,并将 underscore.js 源码解读 放在了我的 2016 计划中。 阅读一些著名框架类库的源码,就好像...

    Coly 评论0 收藏0
  • 前端空间 - 收藏集 - 掘金

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

    you_De 评论0 收藏0
  • 前端空间 - 收藏集 - 掘金

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

    lwx12525 评论0 收藏0
  • 总结了一下js中的差集、交集、并集

    摘要:前言总结了一下有关于数组的差集交集并集的方法的方法实现去重简单的数组去重请传入数组类型并集简单数组的并集交集简单数组的交集差集简单数组的差集的方法实现去重简单的数组去重请传入数组类型交集简单数组的交集请都传入数组类型并集简单数组的并集请都传 前言 总结了一下有关于数组的差集、交集、并集的方法; es6的方法实现 去重 /** * 简单的数组去重 * @param {Array} a...

    freecode 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<