JavaScript-数组去重由慢到快由繁到简演化

 

indexOf去重

Array.prototype.unique1 = function() {

var arr = [];

for (var i = 0; i < this.length; i++) {

var item = this[i];

if (arr.indexOf(item) === -1) {

arr.push(item);

}

}

return arr;

}

[1,2,3,'4',3,4,3,1,'34',2].unique1(); //[1, 2, 3, "4", 4, "34"]

不过,在 IE6-8 下,数组的 indexOf 方法还不存在(虽然这已经算有点古老的话题了O(∩_∩)O~),但是,程序员就要写一个indexOf方法:

var indexOf = [].indexOf ? function(arr, item) {

return arr.indexOf(item);

} :

function indexOf(arr, item) {

for (var i = 0; i < arr.length; i++) {

if (arr[i] === item) {

return i;

}

}

return -1;

}

Array.prototype.unique2 = function() {

var arr = [];

for (var i = 0; i < this.length; i++) {

var item = this[i];

if (arr.indexOf(item) === -1) {

arr.push(item);

}

}

return arr;

}

[1,2,3,'4',3,4,3,1,'34',2].unique2(); //[1, 2, 3, "4", 4, "34"]

indexOf还可以以这样的去重思路:

Array.prototype.unique3 = function(){

var arr = [this[0]];

for(var i = 1; i < this.length; i++)

{

if (this.indexOf(this[i]) == i){

arr.push(this[i]);

}

}

return arr;

}

[1,2,3,'4',3,4,3,1,'34',2].unique3(); //[1, 2, 3, "4", 4, "34"]

 

hash去重

以上indexOf正确性没问题,但性能上,两重循环会降低性能。那我们就用hash。

Array.prototype.unique4 = function() {

var arr = [];

var hash = {};

for (var i = 0; i < this.length; i++) {

var item = this[i];

var key = typeof(item) + item

if (hash[key] !== 1) {

arr.push(item);

hash[key] = 1;

}

}

return arr;

}

[1,2,3,'4',3,4,3,1,'34',2].unique4(); //[1, 2, 3, "4", 4, "34"]

核心是构建了一个 hash 对象来替代 indexOf。空间换时间。注意在 JavaScript 里,对象的键值只能是字符串(当然,ES6提供了Map数据结构。它类似于对象,也是键值对的集合,但是“键”的范围不限于字符串,各种类型的值(包括对象)都可以当作键。也就是说,Object结构提供了“字符串—值”的对应,Map结构提供了“值—值”的对应,是一种更完善的Hash结构现。),因此需要var key = typeof(item) + item 来区分数值 1 和字符串 '1' 等情况。

那如果你想要'4' 和 4 被认为是相同的话(其他方法同理)

Array.prototype.unique5 = function(){

var arr=[];

var hash={};

for(var i=0,len=this.length;i<len;i++){

if(!hash[this[i]]){

arr.push(this[i]);

hash[this[i]]=true;

}

}

return arr;

}

[1,2,3,'4',3,4,3,1,'34',2].unique5(); //[1, 2, 3, "4", "34"]

 

排序后去重

Array.prototype.unique6 = function(){

this.sort();

var arr = [this[0]];

for(var i = 1; i < this.length; i++){

if( this[i] !== arr[arr.length-1]){

arr.push(this[i]);

}

}

return arr;

}

[1,2,3,'4',3,4,3,1,'34',2].unique6(); //[1, 2, 3, "34", "4", 4]

先把数组排序,然后比较相邻的两个值,排序的时候用的JS原生的sort方法,所以非常快。而这个方法的缺陷只有一点,比较字符时按照字符编码的顺序进行排序。所以会看到10排在2前面这种情况。不过在去重中不影响。不过,解决sort的这个问题,是sort方法接受一个参数,这个参数是一个方法:

function compare(value1,value2) {

if (value1 < value2) {

return -1;

} else if (value1 > value2) {

return 1;

} else {

return 0;

}

}

[1,2,5,2,10,3,20].sort(compare);  //[1, 2, 2, 3, 5, 10, 20]

Set去重

ES6提供了新的数据结构Set。它类似于数组,但是成员的值都是唯一的,没有重复的值。现在浏览器正在全面支持,服务端的node也已经支持。

Array.prototype.unique7 = function(){

return Array.from(new Set(this));

}

[1,2,3,'4',3,4,3,1,'34',2].unique7(); //[1, 2, 3, "4", 4, "34"]

方法库

推荐一个方法库Underscore.js,在node或浏览器js中都很受欢迎。

const _ = require('underscore');

_.uniq([1, 2, 1, 3, 1, 4]);  //[1, 2, 3, 4]

测试时间

以上方法均可以用一个简单的方法去测试一下所耗费的时间,然后对各个方法做比较择优:

console.time("test");

[1,2,3,'4',3,4,3,1,'34',2].unique7();

console.timeEnd("test");

==> VM314:3 test: 0.378ms

让数据变得大一点,就随机创建100万个数:

var arr = [];

var num = 0;

for(var i = 0; i < 1000000; i++){

num = Math.floor(Math.random()*100);

arr.push(num);

}

console.time("test");

arr.unique7();

console.timeEnd("test");

==> VM325:3 test: 108025.815ms (比较数目越多,差距越大,更好选择)

转自: https://segmentfault.com/a/1190000006632291

作者: xzavier

160819、JavaScript-数组去重由慢到快由繁到简的更多相关文章

  1. JavaScript-数组去重由慢到快由繁到简

    indexOf去重 Array.prototype.unique1 = function() { var arr = []; for (var i = 0; i < this.length; i ...

  2. JavaScript数组去重方法及测试结果

    最近看到一些人的去面试web前端,都说碰到过问JavaScript数组去重的问题,我也学习了一下做下总结. 实际上最有代表性也就三种方法:数组双重循环,对象哈希,排序后去重. 这三种方法我都做了性能测 ...

  3. JavaScript 数组去重方法总结

    1.遍历数组法: 这应该是最简单的去重方法(实现思路:新建一新数组,遍历数组,值不在新数组就加入该新数组中) // 遍历数组去重法 function unique(arr){ var _arr = [ ...

  4. 也谈面试必备问题之 JavaScript 数组去重

    Why underscore (觉得这部分眼熟的可以直接跳到下一段了...) 最近开始看 underscore.js 源码,并将 underscore.js 源码解读 放在了我的 2016 计划中. ...

  5. javascript数组去重算法-----3

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. javascript数组去重算法-----2

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. javascript数组去重算法-----1

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. javascript数组去重算法-----5

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. javascript数组去重算法-----4(另一种写法__2)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. HBase源代码分析之MemStore的flush发起时机、推断条件等详情(二)

    在<HBase源代码分析之MemStore的flush发起时机.推断条件等详情>一文中,我们具体介绍了MemStore flush的发起时机.推断条件等详情.主要是两类操作.一是会引起Me ...

  2. gdb调试多进程和多线程命令(转)

    1. 默认设置下,在调试多进程程序时GDB只会调试主进程.但是GDB(>V7.0)支持多进程的分别以及同时调试,换句话说,GDB可以同时调试多个程序.只需要设置follow-fork-mode( ...

  3. WebUI中 DataGrid多层表头 的终极解决办法

    因为DataGrid控件的简单易懂,大多数做.NET程序员都喜欢用,有需要把数据显示成表格样式的地方DataGrid会是首选,但是所有的东西都会有好和不好的一面,DataGrid在给我们带来了数据显示 ...

  4. BigInteger 与 BigDecimal区别,及BigDecimal详解

    一般来说,BigInteger用的不是很多,BigDecimal用的稍微多一点,就比如说JDBC中,如果一个字段的数据库类型是Number, 那么getObject().getClass()的结果是j ...

  5. Python数据处理——绘制函数图形以及数据拟合

    1.多项式拟合 对散点进行多项式拟合并打印出拟合函数以及拟合后的图形import matplotlib.pyplot as pltimport numpy as npx=np.arange(1,17, ...

  6. python with上下文的浅谈

    python中的with一般用于上下文管理,什么是上下文管理,其实平时我们经常会用到,比如连接数据库 查询数据,操作完成后关闭连接. 还比如打开文件写入数据等操作. 具体实例: class Myres ...

  7. [容器]python搭建简易服务器+docker导入多个镜像shell脚本

    从其他机器导出来的docker镜像,集中地放在某台上,其他的机器执行 curl xxx:8000/load_images.sh 来导入镜像,简单方便 使用python简易web服务器. (在镜像目录下 ...

  8. 李洪强漫谈iOS开发[C语言-002]-开发概述程序的本质与简单执行过程

    李洪强iOS开发之应用程序的本质与简单执行过程 什么叫程序? 就是一段执行指令 程序的两个状态: 保存状态(保存到硬盘上)   运行状态(由CPU执行) 代码可以执行吗? CPU(中央处理器-> ...

  9. Extjs中设置只读的样式问题

    废话不多说,直接上代码:   view.down('#imageFile').hide(); view.down('#save_button').hide(); view.show(); view.d ...

  10. 360 网络攻防 hackgame 解题报告(通关)

    地址:http://challenge.onebox.so.com/ 1.referrer or host 2.js decode 3.urldecode, ASCII 4.JFIF * 2 5.go ...