第一次写技术博客,之前总是认为写这些会很浪费时间,还不如多看几篇技术博文。但。。。但昨天不知道受了什么刺激,好像有什么在驱使着自己要写一样,所以才有了今天的第一篇博文。总觉得应该要坚持这样写下去。初次写,并不知道写些什么,就慢慢地整理些以往的总结吧!

  文中如果有哪里写得不准确或者有任何建议的,欢迎毫不吝啬地指出!

  现在,我们就切入主题吧!哈哈~~ 下面是我整理的目前想到的几种数据去重方法:

方法一:原理:利用indexOf()遍历数组,如果临时数组找不到该元素,则push到临时数组,否则不做处理

function uniqArr1(arr) {
  var res = [];   for (var i = 0,len = arr.length; i < len; i++) {
if (res.indexOf(arr[i]) == -1) {
res.push(arr[i]);
}
} return res;
}
}

方法二:原理:同样利用indexOf()遍历数组,如果元素首次出现位置和它的索引相等,则说明不是重复元素,push到临时数组,否则不做处理

function uniqArr2(arr) {
  var res = [arr[0]];   for (var i = 1,len = arr.length; i < len; i++) {
    if (arr.indexOf(arr[i]) == i) {
      res.push(arr[i]);
    }
  }   return res;
}

方法三:原理:利用对象键值唯一性,如果对象没有该属性,则添加该属性,同时将该元素push到临时数组

function uniqArr3(arr) {
  var obj = {},
  res = [];   for (var i = 1,len = arr.length; i < len; i++) {
    if (!obj[arr[i]]) {
      obj[arr[i]] = true;
      res.push(arr[i]);
    }
  }   return res;
}

方法四:原理:同样利用对象键值唯一性,唯一不同的地方是这里不再使用临时数组变量,而是利用Object.keys()方法将去重后的结果返回

注意:这里的返回结果跟上述几种不太一致,原因是这里是对象的key,每一项都是字符串的形式,同时返回的结果数组元素的顺序是不确定的

function uniqArr4(arr) {
  var obj = {};   for (var i = 1,len = arr.length; i < len; i++) {
    if (!obj[arr[i]]) {
      obj[arr[i]] = true;
    }
  }
  
  return Object.keys(obj);
}

方法五:原理:先对原数组进行排序,临时数组先存储第一个元素,然后从第二个元素开始循环判断排序后的原数组(arr)是否与临时数组(res)的第length-1个元素(即res的最后一个元素,也即res每次新添加的元素)是否相等,若不相等,则push到res,这样就确保了每次push到res中的都是不重复的。

注意:这里返回的结果数组同样顺序是有变化的(方法四顺序也有变化)

function uniqArr5(arr) {
  arr.sort();
  var res = [arr[0]];   for (var i = 1,len = arr.length; i < len; i++) {
    if (arr[i] !== res[res.length -1]) {
      res.push(arr[i]);
    }
  }   return res;
}

方法六:原理:嵌套循环,如果相等,则截掉后面的,这里要注意splice会影响到原数组,所以这里重新计算了len值和j值。

function uniqArr6(arr) {
  var len = arr.length;   for (var i = 0; i < len; i++) {
    for (var j = i + 1; j < len; j++) {
      if (arr[i] === arr[j]) {
        arr.splice(j, 1);
        len = arr.length;
        j--;
      }
    }
  }   return arr;
}

方法七:原理:ES6新的数据结构set,类似数组,但成员的值都是唯一的,所以利用这个特性可以做到数组去重

function uniqArr7(arr) {
  var res = new Set(arr);
  return [...res];
}

暂且先分析了几种去重方法的实现原理,关于上述几种去重方法的性能分析后面将进行补充。。。

js 数组去重(7种)的更多相关文章

  1. js数组去重五种方法

    今天来聊一聊JS数组去重的一些方法,包括一些网上看到的和自己总结的,总共5种方法(ES5). 第一种:遍历数组法 这种方法最简单最直观,也最容易理解,代码如下: var arr = [2, 8, 5, ...

  2. js数组去重几种思路

    在一些后台语言中都内置了一些方法来处理数组或集合中重复的数据.但是js中并没有类似的方法,网上已经有一些方法,但是不够详细.部分代码来源于网络.个人总计如下:大致有4种思路 1)使用两次循环比较原始的 ...

  3. js数组去重的4种方法

    js数组去重,老生长谈,今天对其进行一番归纳,总结出来4种方法 贴入代码前 ,先对浏览器Array对象进行支持indexOf和forEach的polyfill Array.prototype.inde ...

  4. JS数组去重的几种常见方法

    JS数组去重的几种常见方法 一.简单的去重方法 // 最简单数组去重法 /* * 新建一新数组,遍历传入数组,值不在新数组就push进该新数组中 * IE8以下不支持数组的indexOf方法 * */ ...

  5. JS数组去重的6种算法实现

    1.遍历数组法 最简单的去重方法,实现思路:新建一新数组,遍历传入数组,值不在新数组就加入该新数组中:注意点:判断值是否在数组的方法"indexOf"是ECMAScript5 方法 ...

  6. JS 数组去重(数组元素是对象的情况)

    js数组去重有经典的 几种方法 但当数组元素是对象时,就不能简单地比较了,需要以某种方式遍历各值再判断是否已出现. 因为: 1.如果是哈希判断法,对象作哈希表的下标,就会自动转换成字符型类型,从而导致 ...

  7. js数组去重常用方法

    js数组去重是面试中经常会碰到的问题,无论是前端还是node.js数组常见的有两种形式,一种是数组各元素均为基本数据类型,常见的为数组字符串格式,形如['a','b','c'];一种是数组各元素不定, ...

  8. js数组去重的方法(转)

    JS数组去重的几种常见方法 一.简单的去重方法 // 最简单数组去重法 /* * 新建一新数组,遍历传入数组,值不在新数组就push进该新数组中 * IE8以下不支持数组的indexOf方法 * */ ...

  9. js 数组去重求和 (转载)

    方法一:js数组id去重,value值相加问题 来源:https://www.jianshu.com/p/8f79e31b46ed // js let arr = [ { id: 1, value: ...

随机推荐

  1. 关闭form上chrome的autofill

    Chrome的autofill会自动找到form中的type=password的元素,然后把这个元素前面的元素当做是用户名,它不在乎这个元素叫什么名字.这样又是注册又是登录,你会发现它自作聪明的aut ...

  2. 读书笔记-you-don't-konw-js

    第一部分:作用域和闭包 不要满足于只是让代码正常工作,而是弄清楚为什么是这样 作用域是什么 定义的变量存储在哪里?程序是如何找到变量的?实现的 规则就是作用域 传统编译语言执行前的编译三步骤(p5) ...

  3. c#写windows服务

    序言 前段时间做一个数据迁移项目,刚开始用B/S架构做的项目,但B/S要寄存在IIs中,而IIs又不稳定因素,如果重启IIs就要打开页面才能运行项目.有不便之处,就改用Windows服务实现.这篇就总 ...

  4. Vue.js实现checkbox的全选和反选

    小颖之前写的代码存在一个bug,就是当你选择全选的时候去掉后面的一个选项,再点全选结果就是反的了.很感谢博客园的朋友帮我改了这个问题嘻嘻,下面一起来看看具体是怎么实现的吧. 1.html <te ...

  5. 了解screen对象的常用视图属性

    前面的话 screen对象基本上只用来表明客户端的能力,其中包括浏览器窗口外部的显示器的信息,如像素高度和宽度等.每个浏览器中的screen对象都包含着各不相同的属性.本文将详细介绍screen对象的 ...

  6. hibernate笔记--缓存机制之 一级缓存(session缓存)

    一级缓存: 又称为session缓存,它和session生命周期相同,周期非常短.是事务级别的缓存: 还是以Book和Category这两个表为例,我们用代码观察一个缓存的存在: 假设现在我要去查询i ...

  7. MySQL学习(二)SQL语句的总结

    1.连接查询和关联查询连接查询:把两个表中相同的元素的连接就可以查询,使用:where里,select table1.*,table2.* from table1,table2 where table ...

  8. Zookeeper数据模型及其应用

    Zookeeper作为分布式系统的底层协调服务有着其简单可依靠的数据模型,数据模型加之数据同步.一致性处理和可靠性,在此之上有很多经典的应用,例如,分布式锁.服务器动态上线下感知.主节点选举.数据发布 ...

  9. Mybatis-update - 数据库死锁 - 获取数据库连接池等待

    最近学习测试mybatis,单个增删改查都没问题,最后使用mvn test的时候发现了几个问题: update失败,原因是数据库死锁 select等待,原因是connection连接池被用光了,需要等 ...

  10. 用API网关把API管起来

    最开始只是想找个API网关防止API被恶意请求,找了一圈发现基于Nginx的OpenResty(Lua语言)扩展模块Orange挺好(也找了Kong,但是感觉复杂了点没用),还偷懒用Vagrant结合 ...