总结Javascript中数组各种去重的方法

前言

在做javascript开发的时候，经常会遇到数组元素重复的问题，而javascript Array又没有直接提供方法解决此问题，还需要自己去实现。这篇文章总结了Javascript中数组各种去重的方法，下面来一起看看。

方法一 利用对象属性不重复的特性

Array.prototype.distinct = function (){
  var arr = this,
    i,
    obj = {},
    result = [],
    len = arr.length;
  for(i = 0; i< arr.length; i++){
    if(!obj[arr[i]]){  //如果能查找到，证明数组元素重复了
      obj[arr[i]] = 1;
      result.push(arr[i]);
    }
  }
  return result;
};

方法二 双层循环，外层循环元素，内层循环时比较值

Array.prototype.distinct = function(){
  var arr = this,
    result = [],
    i,
    j,
    len = arr.length;
  for(i = 0; i < len; i++){
    for(j = i + 1; j < len; j++){
      if(arr[i] === arr[j]){
        j = ++i;
      }
    }
    result.push(arr[i]);
  }
  return result;
}

方法三 数组递归去重

Array.prototype.distinct = function (){
  var arr = this,
    len = arr.length;
  arr.sort(function(a,b){    //对数组进行排序才能方便比较
    return a - b;
  })
  function loop(index){
    if(index >= 1){
      if(arr[index] === arr[index-1]){
        arr.splice(index,1);
      }
      loop(index - 1);  //递归loop函数进行去重
    }
  }
  loop(len-1);
  return arr;
};

方法四 利用indexOf以及forEach

Array.prototype.distinct = function (){
  var arr = this,
    result = [],
    len = arr.length;
  arr.forEach(function(v, i ,arr){    //这里利用map，filter方法也可以实现
    var bool = arr.indexOf(v,i+1);    //从传入参数的下一个索引值开始寻找是否存在重复
    if(bool === -1){
      result.push(v);
    }
  })
  return result;
};

方法五 利用ES6的set

function dedupe(array){
  return Array.from(new Set(array));
}
dedupe([1,1,2,3]) //[1,2,3]

方法六 拓展运算符(…)内部使用for…of循环

let arr = [3,5,2,2,5,5];
let unique = [...new Set(arr)];  //[3,5,2]

总结

好了，以上就是这篇文章的全部内容了，个人比较喜欢使用方法一，不会对原数组进行修改，希望这篇文章对大家能有所帮助，如果有疑问大家可以留言交流。

赞 (0)

相关推荐

  • js算法中的排序、数组去重详细概述

    其实在js中实现数组排序,采用数组中sort方法实现还是比较简单的: 一.排序 简单实现数组排序 复制代码 代码如下: var arr = [];  for(var i=0;i<20;i++){      arr.push(Math.floor(Math.random()*100))  }  arr.sort(function(a,b){      return a>b?1:-1;  })  alert(arr) 不能简单使用sort方法,默认情况下 sort方法是按ascii字母顺序排序的,

  • js数组去重的三种常用方法总结

    第一种是比较常规的方法 思路: 1.构建一个新的数组存放结果 2.for循环中每次从原数组中取出一个元素,用这个元素循环与结果数组对比 3.若结果数组中没有该元素,则存到结果数组中 复制代码 代码如下: Array.prototype.unique1 = function(){ var res = [this[0]]; for(var i = 1; i < this.length; i++){  var repeat = false;  for(var j = 0; j < res.lengt

  • js实现数组去重、判断数组以及对象中的内容是否相同

    复制代码 代码如下: /* *数组元素去重 */ if(typeof Array.prototype.distinct != "function"){ Array.prototype.distinct = function(){ this.sort(); for(var i=0;i<this.length-1;i++){ if($.isPlainObject(this[i]) && $.isPlainObject(this[i+1])){ if(o2o(this[

  • js数组去重的5种算法实现

    1.遍历数组法 最简单的去重方法,实现思路:新建一新数组,遍历传入数组,值不在新数组就加入该新数组中:注意点:判断值是否在数组的方法"indexOf"是ECMAScript5 方法,IE8以下不支持,需多写一些兼容低版本浏览器代码,源码如下: // 最简单数组去重法 function unique1(array){ var n = []; //一个新的临时数组 //遍历当前数组 for(var i = 0; i < array.length; i++){ //如果当前数组的第i已

  • js取两个数组的交集|差集|并集|补集|去重示例代码

    复制代码 代码如下: /** * each是一个集合迭代函数,它接受一个函数作为参数和一组可选的参数 * 这个迭代函数依次将集合的每一个元素和可选参数用函数进行计算,并将计算得的结果集返回 {%example <script> var a = [1,2,3,4].each(function(x){return x > 2 ? x : null}); var b = [1,2,3,4].each(function(x){return x < 0 ? x : null}); alert

  • javascript数组去重3种方法的性能测试与比较

    javascript数组去重3种方法的性能测试与比较

    昨天参加的一个前端面试,其中有一题数组去重,首先想到的是对象存键值的方法,代码如下 方法一:(简单存键值) 复制代码 代码如下: Array.prototype.distinct1 = function() { var i=0,tmp={},that=this.slice(0) this.length=0; for(;i<that.length;i++){ if(!(that[i] in tmp)){ this[this.length]=that[i]; tmp[that[i]]=true; }

  • 关于js数组去重的问题小结

    1.根据js对象中key不重复的原则,构思出数组去重的方法,按照最常规的思维如下: 复制代码 代码如下: function distinctArray(arr){var obj={},temp=[];for(var i=0;i<arr.length;i++){if(!obj[arr[i]]){temp.push(arr[i]);obj[arr[i]] =true;}}return temp;   }   var testarr=[1,2,3,2];   console.log(distinctA

  • 两个数组去重的JS代码

    第一种: 复制代码 代码如下: function unique (arr){  var obj = {},newArr = [];  for(var i = 0;i < arr.length;i++){    var value = arr[i];    if(!obj[value]){      obj[value] = 1;      newArr.push(value);    }  }  return newArr;} 这个方法把数组的值存入对象,所以,在数组存在对象队员的时候,运行失败

  • javascript数字数组去重复项的实现代码

    test.htm 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-

  • JavaScript数组去重的五种方法

    javascript数组去重是一个比较常见的需求,解决方法也有很多种,网上都可以找到答案的,下面小编给大家整理了一份关于同类型的数组去重的方法,先给大家介绍下简单实现思路. 思路: 遍历数组,一一比较,比较到相同的就删除后面的 遍历数组,一一比较,比较到相同的,跳过前面重复的,不相同的放入新数组 任取一个数组元素放入新数组,遍历剩下的数组元素任取一个,与新数组的元素一一比较,如果有不同的,放入新数组. 遍历数组,取一个元素,作为对象的属性,判断属性是否存在 1. 删除后面重复的: functio

随机推荐