模拟了以下两个数组,一个数组长度100000 另一个长度为50000
下面的方法都是针对这两个数组来做的测试
数组长度越长 速度差异会越大
let arr1 = Array.from(new Array(100000), (x, index) => {
return index;
});
let arr2 = Array.from(new Array(50000), (x, index) => {
return index + index;
});
//计算耗时
let start = new Date().getTime();//开始时间
console.log("双重for循环 开始数组去重");
//去重方法
function distinct(a,b){
let arr = a.concat(b);//先将两个数组组成一个数组 然后再去重
let len = arr.length;
for(let i=0;i<len ;i++){
for(let j=i+1;j<len ;j++){
if(arr[i]===arr[j]){
arr.splice(i,1);
//splice会改变原数组的长度 此处len和下标j必须减一
len--;
j--;
}
}
}
return arr;
}
console.log('去重后的长度', distinct(arr1, arr2).length);
let end = new Date().getTime();//结束时间
console.log("结束数组去重 耗时:", end - start);
打印结果如下
双重for循环 开始数组去重
去重后的长度 100000
结束数组去重 耗时: 22349
两个数组合并之后再for循环嵌套 逻辑好理解 但是 耗时太久 而且会导致页面假死状态 无法操作其他逻辑 性能差 体验差 不推荐此方法
function distinct(a,b){
for(let i=0;i<a.length ;i++){
for(let j=0;j<b.length ;j++){
if(a[i]===b[j]){
b.splice(j,1);
j--;
}
}
}
let arr = a.concat(b);//先去重在重组
return arr;
}
打印如下,
结束数组去重 耗时: 6890
时间少很多 但是有限制,必须原数组中没有重复的才能用这个方法 不能完全去重 性能也是比较差 不推荐使用
直接上代码
function distinct(a,b){
let arr = a.concat(b);
return arr.filter((item,index)=>{
//遍历整个数组 返回indexOF之后的下标和实际下标一致的数据
//(如果有重复的 indexOf返回的是找到的第一个值的下标 和实际的index下标不会相等)
return arr.indexOf(item)===index;
})
}
打印如下
结束数组去重 耗时: 9593
filter() 方法会创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。
filter() 判断计算条件 返回的还是之前的数组元素 filter不会改变原素组
这个方法会全部遍历一遍 去重也比较彻底 但是耗时还是比较久
function distinct(a, b) {
let arr = a.concat(b);
let newArr= arr.map((item, index) => {
if(arr.indexOf(item) === index){
//判断条件
return item;
}
});
//newArr的长度还是两个数组的长度之和 只是不符合条件的值变成了undefined
return newArr.filter((itemx,idx)=>{
return itemx!==undefined; //过滤掉undefined的值
});
}
执行打印如下
结束数组去重 耗时: 9658
map() 方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。
map() 方法按照原始数组元素顺序依次处理元素。 map也不改变原数组
但是上述代码执行map之后 数组长度还是150000 只是重复值的地方的值变成了undefined,依旧占了数组的位置 还需要再调一次filter去掉数组里面的undefined 逻辑相对比较复杂 还不如直接调一次filter的方法 耗时也比较久
function distinct(a,b){
var arr = a.concat(b);
let resultArr = [];
for(let i of arr){
if(!resultArr.includes(arr[i])){
//不包含在新数组里面的话 就加进入
resultArr.push(arr[i]);
}
}
}
打印如下
结束数组去重 耗时: 9547
includes() 方法用来判断一个数组是否包含一个指定的值,如果是返回 true,否则false。
这种方法和filter()+indexOf()的逻辑是一样的 只是将filter的内部逻辑用for循环显示出来了 indexOf和includes同样都是用来条件判断的 耗时也差不多
function distinct(a,b){
let arr = a.concat(b);
arr = arr.sort();
let result = [arr[0]];
for(let i=1;i<arr.length;i++){
if(arr[i]!=arr[i-1]){
result.push(arr[i]);
}
}
return result;
}
打印耗时:
结束数组去重 耗时: 18
惊呆了 竟然只用了18ms 比上面的快太多了 逻辑也比较简单
Array.sort() 可以传参也可以不传 如果没有使用参数,将按字母顺序对数组中的元素进行排序,说得更精确点,是按照字符编码的顺序进行排序。要实现这一点,如有必要 首先应把数组的元素都转换成字符串,然后再进行比较
排序之后就只需要比较当前元素和前一个元素是否一样就行了
function distinct(a,b){
var arr = a.concat(b);
return Array.from(new Set([...a,...b]));
}
打印耗时如下:
结束数组去重 耗时: 17
这个方法也是非常的快,逻辑也就一两行 非常的简单 Set是ES6提供的新的数据结构
Set 对象允许你存储任何类型的唯一值,无论是原始值或者是对象引用。
根据Set对象 元素的唯一性 就能直接处理数组去重
function distinct(a,b){
let arr = a.concat(b);
let obj = {
};
let result = [];
for(let i of arr){
if(!obj[i]){
//对象属性唯一
result.push(arr[i]);
obj[i] = 1;
}
}
return result;
}
打印耗时如下:
结束数组去重 耗时: 11
测试的几种方法中耗时最短的,数组长度越长 效果越明显
首先创建一个空对象,然后用 for 循环遍历 不重复的加入对象里面
利用对象的属性不会重复这一特性,校验数组元素是否重复
前面几种方法耗时太久不推荐,后三种耗时差不多,那究竟那种方法耗时最优呢,我们将数组改造下
(前面几种方法就不做数组长度加长的测试了 会直接卡死动不了。。。。。要等很久很久。。。)
let arr1 = Array.from(new Array(1000000), (x, index) => {
return index;
});
let arr2 = Array.from(new Array(500000), (x, index) => {
return index + index;
});
两个数组的长度分别*10倍,数组长度变成100万和50万 然后执行后三种方法,可以得到大概这样的打印
Array.sort()+for循环 耗时:127
new Set() 耗时: 159
for循环+Object 耗时: 71
继续加大数组长度*100倍, 数组长度变成1000万和500万 然后执行后三种方法,可以得到大概这样的打印
Array.sort()+for循环 耗时:1196
new Set() 耗时: 2834
for循环+Object 耗时: 714
千万级的数据 处理时间也不到1s Object的这个方法的确是最优的
综上所有的方法 推荐使用最后这三种方法来实现数组去重的目的,最推荐Object的方法 速度会快很多
想法是很久以前在一篇面试文中见过的,具体代码整理是自己整理的
若哪里有不妥 欢迎指正
上一篇