总结Javascript中数组各种去重的方法_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]

总结

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

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索javascript
, 数组去重
javascript数组操作
javascript 数组、javascript数组操作、javascript 二维数组、javascript 遍历数组、javascript 数组长度,以便于您获取更多的相关知识。

时间: 2024-09-21 13:50:51

总结Javascript中数组各种去重的方法_javascript技巧的相关文章

JavaScript中对象的不同创建方法_javascript技巧

javascript中的对象与一般的面向对象的程序设计语言(c++,Java等)不同,甚至很少有人说它是面向对象的程序设计语言,因为它没有类.javaScript只有对象,不是类的实例.javascript中的对象是基于原型的. 1.1句点运算符创建 javascript中的对象实际上就是一个由属性组成的关联数组,属性由名称和值组成,值的类型可以是任何数据类型,或者函数和其他对象. 创建一个简单对象: var foo = {}; foo.prop_1 = 'bar'; foo.prop_2 =

深入剖析javascript中的exec与match方法_javascript技巧

exec是正则表达式的方法,而不是字符串的方法,它的参数才是字符串,如下所示: var re=new RegExp(/\d/); re.exec( "abc4def" ); //或者使用perl风格: /\d/.exec( "abc4def" ); //match才是字符串类提供的方法,它的参数是正则表达式对象,如下用法是正确的: "abc4def".match(\d); exec和match返回的都是数组 如果执行exec方法的正则表达式没有分

JavaScript实现数组随机排序的方法_javascript技巧

本文实例讲述了JavaScript实现数组随机排序的方法.分享给大家供大家参考.具体实现方法如下: function Shuffle(o) { for(var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x); return o; }; 使用方法: var testArray = [1,2,3,4,5]; Shuffle(testArray); // jQuery

JavaScript对象数组的排序处理方法_javascript技巧

本文实例讲述了JavaScript对象数组的排序处理方法.分享给大家供大家参考,具体如下: javascript的数组排序函数 sort方法,默认是按照ASCII 字符顺序进行升序排列.arrayobj.sort(sortfunction); 参数:sortFunction 可选项.是用来确定元素顺序的函数的名称.如果这个参数被省略,那么元素将按照 ASCII 字符顺序进行升序排列. sort 方法将 Array 对象进行适当的排序:在执行过程中并不会创建新的 Array 对象. 如果为 sor

浅谈JavaScript中数组的增删改查_javascript技巧

数组的增加 •ary.push()   向数组末尾添加元素,返回的是添加后新数组的长度,原有数组改变 •ary.unshift()  向数组开头添加元素,返回的是添加后新数组的长度,原有数组改变 • var ary=[1,2,3,4];   var res=ary.unshift(6);   console.log(res); ---->5   返回的是新数组的长度•ary.splice(n,m,x)从索引n开始删除m个元素,把新增的元素X放在索引n的前面,把删除的元素当成一个新数组返回,原有数

深入理解JavaScript中为什么string可以拥有方法_javascript技巧

引子 我们都知道,JavaScript数据类型分两大类,基本类型(或者称原始类型)和引用类型. 基本类型的值是保存在栈内存中的简单数据段,它们是按值访问的.JS中有五种基本类型:Undefined.Null.Boolean.Number和String. 引用类型的值是保存在堆内存中的对象,它的值是按引用访问的.引用类型主要有Object.Array.Function.RegExp.Date. 对象是拥有属性和方法的,所以我们看到下面这段代码一点也不奇怪. var favs=['鸡蛋','莲蓬']

注意 JavaScript 中 RegExp 对象的 test 方法_javascript技巧

JavaScript 中的 RegExp 对象用于正则表达式相关的操作,这个对象提供了一个方法 test 来判定某个字符串是否满足某个 pattern. 返回值是 true/false. 今天我碰到了一个问题: [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]这里两个测试的字符串应该都满足正则表达式中的模式,返回 true. 可是测试结果却依次是:true, false. 我估计问题的原因可能是因为 RegExp 对象是有状态的,并且在 test 方法的执行时会在某个步骤中利用到状态信

JavaScript中实现块作用域的方法_javascript技巧

例如下面这段代码 复制代码 代码如下: { var temp = "12"; } alert(temp); //输出 12 如果按照通常的编程经验,那么alert函数是不可以访问到temp变量的,因为它在另外一个块中,但是在JavaScript中,却没有块作用域的概念,所以这种语法对JS不起作用,但是我们在写JS程序的时候,尤其是比较大的程序或是程序库,为了防止命名冲突,又需要一种控制变量作用域的机制,所以这里介绍一种比较普遍的方式,来实现块作用域的概念,代码如下: 复制代码 代码如下

浅谈JavaScript 中有关时间对象的方法_javascript技巧

ECMAScript中的Date类型是在早期 Java 中的 Java.unile.Date 类基础上构建的.为此 Date 类型使用自 UTC (Coordinated Universal Time, 国际协调时间)1970年1月1日午夜开始经过的毫秒数来保存日期. 在这种数据存储格式下, Date 类型保存的日期能够精确到1970年1月1日之前或之后的285616年 •Date.parse(string) 接受一个表示日期的字符串参数,然后尝试根据这个字符串返回相应日期的毫秒数,不能转换则返