前端在日常开发中或多或少都会碰到有对数据去重的需求,实际上,像是lodash这些工具库已经有成熟完备的实现,并且可以成熟地运用于生产环境。但是这并不妨碍我们从思维拓展的角度出发,看看去重可以用几种思路去实现。

首先是常规的双层循环比对的思路实现

function doubleLoopUniq(arr) {
let result = [];
for (let i = 0, len = arr.length, isExist; i < len; i++) {
// 定义一个变量表示当前元素在 result 中是否存在。
isExist = false;
for (let j = 0, rLen = result.length; j < rLen; j++) {
if (result[j] === arr[i]) {
// 依次对result 中的元素 和 原数组元素进行比对。
isExist = true;
break;
}
}
// 最后判断如果不存在,则将此元素插入result
!isExist && result.push(arr[i]);
}
return result;
}

借助 js内置的indexOf 进行去重

function indexOfUniq(arr) {
let result = [];
for (let i = 0, len = arr.length; i < len; i++) {
// 用indexOf 简化了二层循环的流程
if (result.indexOf(arr[i]) === -1) result.push(arr[i]);
}
return result;
}

排序后前后比对去重

function sortUniq(arr) {
let result = [], last;
// 这里解构是为了不对原数组产生副作用
[ ...arr ].sort().forEach(item => {
if (item != last) {
result.push(item);
last = item;
}
});
return result;
}

通过hashTable去重

function hashUniq(arr) {
let hashTable = arr.reduce((result, curr, index, array) => {
result[curr] = true;
return result;
}, {})
return Object.keys(hashTable).map(item => parseInt(item, 10));
}

ES6 SET一行代码实现去重

function toSetUniq(arr) {
return Array.from(new Set(arr));
}

splice 去重(直接操作数组本身,带副作用)

function inPlaceUniq(arr) {
let idx = 0;
while (idx < arr.length) {
let compare = idx + 1;
while (compare < arr.length) {
if (arr[idx] == arr[compare]) {
arr.splice(compare, 1);
continue;
}
++compare
}
++idx;
}
return arr;
}

最后在nodejs下面简单跑个测试,看看哪个效率高~

let data = [];
for (var i = 0; i < 100000; i++) {
data.push(Math.random())
} // 实现一个性能测试的装饰器
function performanceTest(fn, descript) {
var a = new Date().getTime();
return function () {
fn.apply(this, [].slice.call(arguments, 0));
console.log(descript, new Date().getTime() - a)
}
} performanceTest(hashUniq, "hashTable")(data)
performanceTest(sortUniq, "sortUniq")(data)
performanceTest(toSetUniq, "toSetUniq")(data)
performanceTest(indexOfUniq, "indexOfUniq")(data)
performanceTest(doubleLoopUniq, "doubleLoopUniq")(data)
performanceTest(inPlaceUniq, "inPlaceUniq")(data)

结果如下

hashTable 168ms
sortUniq 332ms
toSetUniq 80ms
indexOfUniq 4280ms
doubleLoopUniq 13303ms
inPlaceUniq 9977ms

延伸思考: 如果数组内的元素是对象该怎么去重呢?

既然是引用类型,那么不免会使用到deepEqual,固然这种思路可以解答这道问题,但难免不够高效。

从上面的测试中也可见通过new Set 和 hashTable 去重是最高效的。 所以毫无疑问,我们要基于这两种方式去改造,我想用的是hashTable, 另一方面,为了降低深度比较带来的耗时,我尝试用JSON.stringify 将引用类型转化为基本类型。

function collectionUniq(collection) {
let hashTable = {};
collection.forEach(item => {
hashTable[JSON.stringify(item)] = true;
})
return Object.keys(hashTable).map(item => JSON.parse(item))
}

那么问题来了,我们都知道对象的属性是无序的,假如数据是这种情况,那就GG了。

let collection = [ { a: 1, b: 2, c: 3 }, { b: 2, c: 3, a: 1 } ]

有一种toHash的思路,在对这个数组进行一次基本的去重之后,为了保证准确, 先遍历JSON 字符串 => 通过 charCodeAt()拿到每个字符串 的 unicode 编码 => 相加得到一个总数,最后再两两进行比较,数值相等的就是重复的,这样就达到去重的效果了。

function toHash(obj) {
let power = 1;
let res = 0;
const string = JSON.stringify(obj, null, 2);
for (let i = 0, l = string.length; i < l; i++) {
switch (string[i]) {
case '{':
power *= 2
break
case '}':
power /= 2
break
case ' ':
case '\n':
case '\r':
case '\t':
break
default:
res += string[i].charCodeAt(0) * power
}
}
return res
}

这只是一个实现基本的思路,有很大的改进空间,为了减少hash碰撞的可能,可以对一些特殊字符进行权重的增减。

重点是保证碰撞的几率小到比中大奖还小就可以了。

原文地址 :https://segmentfault.com/a/1190000013192950

javascript 数组去重的6种思路的更多相关文章

  1. JavaScript数组去重的7种方式

    1.利用额外数组 function unique(array) {    if (!Array.isArray(array)) return;     let newArray = [];    fo ...

  2. JavaScript数组去重的几种方法

    这个老问题,网上普遍都有了,为什么要再写一遍呢,主要是为了记个笔记... 遍历时搜索结果数组 思路很明确,如下 新建一个数组存放结果 循环遍历原数组,对于每一个元素,在结果数组中搜索是否存在 若不存在 ...

  3. [转] JavaScript数组去重(12种方法)

    数组去重,一般都是在面试的时候才会碰到,一般是要求手写数组去重方法的代码.如果是被提问到,数组去重的方法有哪些?你能答出其中的10种,面试官很有可能对你刮目相看.在真实的项目中碰到的数组去重,一般都是 ...

  4. JavaScript数组去重的10种方法

    「数组去重」的确是个老生常谈的问题了,但是你真正的掌握了吗?平时开发中是不是用最简单粗暴的方法来去重?注意到它的性能问题了吗?当面试官对你回答的四个去重方法都不满意时你可以想出更简单且性能能更好的方法 ...

  5. JavaScript数组去重的四种方法

    今天,洗澡的想一个有趣的问题,使用js给数组去重,我想了四种方法,虽然今天的任务没有完成,5555: 不多说,po代码: //方法一:简单循环去重    Array.prototype.unique1 ...

  6. javascript数组去重的3种方法

    前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! javascript数组去重 <!DOCTYPE html> <html> < ...

  7. JavaScript数组去重(12种方法,史上最全)

    参考博客:https://segmentfault.com/a/1190000016418021?utm_source=tag-newest

  8. JavaScript中数组去重的几种方法

    JavaScript中数组去重的几种方法 正常情况下,数据去重的工作一般都是由后端同事来完成的,但是前端也要掌握好处理数据的能力,万一去重的工作交给我们大前端处理,我们也不能怂呀.现在我总结了一些去重 ...

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

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

随机推荐

  1. windows编程经典书籍

    本人是刚刚开始学习windows编程的,感觉看雪学院的大牛很NB.想找一些书籍来看学习学习,可是不知道看哪些书好.驱动,对菜鸟们来说真是一个很深奥的话题,所以 ,我找来了这篇文章供大家分享,以后大家发 ...

  2. 我的成长比价系列:java web开发过程中遇到的错误一:sql语句换行错误

    字符串换行导致的错误,确切的说是马虎的错误,自己在编写简单的servlet项目时,在StudentDao.java 中的  查询语句:String  sql= "SELECT Type,fl ...

  3. 解决Redis/Codis Connection with master lost(复制超时)问题

    今天在线上环境中遇到了codis-server报警,按照常规处理流程进行处理,报错步骤如下: 首先将codis-slave的rdb文件移除,并重启codis-slave 在codis-dashbord ...

  4. Regex Golf练习笔记(1)

    正则表达式进阶练习:https://alf.nu/RegexGolf  (此练习笔记) 正则表达式验证:https://regexr.com/ (1) (2) 注释:每个词的三个字母在后面重复出现了一 ...

  5. Buck工作原理分析,连续模式,断续模式

    Part01:Buck电路工作原理: 图1-1 Buck电路拓扑结构 Buck电路的拓扑结构如图1-1所示: (1) input接输入电源,既直流电动势: (2) IGBT1为开关管,可以选择以全控型 ...

  6. C#字符串转UNICODE

    public static string StringToUnicode(string s)//字符串转UNICODE代码 { char[] charbuffers = s.ToCharArray() ...

  7. 关于Select选中问题

    jquery根据text选中option的问题: 网上找了好多,但发现因为jquery版本问题,很多并不能用.   最后成功了,写法如下:   $('#shop option:contains(' + ...

  8. AGC002F Leftmost Ball

    题目传送门 Description \(n\)种颜色的球,每种\(k\)个,\((n,k\leq 2000)\)将\(n\cdot k\)个球排成一排,把每种颜色最左边的那个涂成白色(初始不含白色), ...

  9. flask组件之flask_script和flask_migrate的使用

    flask_script的使用 作用: 使用命令启动flask项目 # 在项目的启动文件中 from flask import Flask from settings import Settings ...

  10. 使用Navicat 创建mysql存储过程,实现日期加流水号序列

    目的:使用Navicat 创建mysql存储过程,实现格式为8位日期(年月日)+5位流水号序列. 步骤: 1.打开Navicat 登录数据库,点击导航栏上的函数,如下图: 2.点击新建函数,选择“过程 ...