【转】JS_数组去重问题
【转自】小谈数组去重
数组去重是一个常见的问题，在用C语言刷算法题的时候属于比较水的题目，很容易就AC。不过在JavaScript中，因为方法多样，所以解题的方法也多种多样，以下是自己的研究过程与结果
准备一：随机数组生成
在研究之前，我们先实现一个随机生成数组的方法：
/**
*函数名：createArr
*参数：
* len 表示要生成的数组的长度
* size 表示要生成的数组的范围的最大值
*返回值：一个生成的数组
**/
function createArr(len, size){
var randomArr = [];
while(len--){
randomArr[len] = Math.floor(Math.random() * size + 1);
}
return randomArr;
}
我们来测试一下运行结果：
示例1：
var arr = createArr(10, 5);
console.log(arr);
示例1的运行结果：
[3, 5, 5, 1, 4, 5, 2, 3, 5, 3]
示例2：
var arr = createArr(100000, 1000);
console.log(arr);
示例2的运行结果：
[691, 299, 863, 41, 476, 258, 196, 145, 717, 129, 797, 919, 184, 4, 336, 783, 92, 159, 216, 882, 159, 805, 302, 569, 940, 130, 655, 992, 585, 313, 206, 962, 584, 987, 35, 473, 350, 45, 558, 885, 226, 255, 506, 198, 16, 263, 431, 604, 109, 726, 706, 837, 916, 418, 387, 216, 291, 260, 366, 653, 459, 413, 700, 672, 168, 853, 672, 559, 116, 56, 711, 631, 284, 918, 495, 962, 561, 302, 268, 878, 671, 350, 768, 868, 482, 692, 22, 839, 650, 16, 868, 104, 856, 188, 930, 917, 746, 599, 309, 966…]
我们在测试不同方法性能的时候，用到的是示例2的数组长度，即十万个元素，这样可以体现出不同方法的性能差异。
准备二：运行消耗时间平均值
/**
*函数名：calculateMean
*参数：
* func 要计算运行时间的函数
* time 运行次数
**/
function calculateMean(func, time){
var startTime, endTime;
var sumTime = 0, meanTime;
var arr = createArr(100000, 1000);
for(var i = 0; i < time; i++){
startTime = window.performance.now();
func(arr);
endTime = window.performance.now();
sumTime += Math.floor((endTime - startTime)*100)/100;
}
meanTime = Math.floor((sumTime / time)*100)/100;
return meanTime;
}
我们知道，可以用console.time() +console.timeEnd() 来计算程序运行的消耗时间，不过我们不能获取这个时间，无法把控制台打印出来的这个结果赋值给变量，因此也就无法求得平均值。所以，这里用window.performance.now() 来计算，计算结果几乎是相同的（会有0.1ms左右的差异，可忽略不计）。
方法一：双重for循环数组去重
我们用最笨的方法来解，思路如下：
新建一个数组newArr
对原数组进行两层的for循环，如果发现重复的，那么就break，否则就添加到newArr
代码如下：
// 方法一：双重for循环数组去重
function unique1(arr) {
var newArr = [];
var arrLength = arr.length;
var isRepeat;
for(var i=0; i<arrLength; i++) {
isRepeat = false;
for(var j=i+1; j<arrLength; j++) {
if(arr[i] === arr[j]){
isRepeat = true;
break;
}
}
if(!isRepeat){
newArr.push(arr[i]);
}
}
return newArr;
}
我们取该方法运行20次所消耗的平均时间（后面的方法同样），运行以下代码：
console.log(calculateMean(unique1, 20).toString() + "ms");
取运行20次的平均耗时，其结果为：
221.27ms
性能分析
时间复杂度 : O(n2)
最好情况下的时间复杂度：O(n)
最差情况下的时间复杂度：O(n2)
空间复杂度：O(1)
稳定性：稳定
方法二：优化的双重for循环数组去重
改进的方法，其思路如下：
新建一个数组newArr
遍历原数组，判断元素是否存在于newArr中，如果不存在，那么就为newArr添加该元素
代码如下：
//方法二：优化的双重for循环数组去重
function unique2(arr){
var arrLength = arr.length;
var newArr = [];
var isRepeat;
for(var i = 0; i < arrLength; i++){
var isRepeat = false;
var newArrLength = newArr.length;
for(var j = 0; j < newArrLength; j++){
if(arr[i] === newArr[j]){
isRepeat = true;
break;
}
}
if(!isRepeat){
newArr.push(arr[i]);
}
}
return newArr;
}
取运行20次的平均耗时，其结果为：
87.84ms
性能分析
时间复杂度 : O(n2)
最好情况下的时间复杂度：O(n)
最差情况下的时间复杂度：O(n2)
空间复杂度：O(1)
稳定性：稳定
优化分析 :
优化后用于校验的内容为新数组的内容，如果原数组中重复的元素越多，那么新数组中的元素就越少，从而匹配原数组所用的循环数就越少。而方法一中，匹配的数目都是原数组的长度，因而比较耗时。
方法三：数组indexOf方法去重
思路如下：
新建一个新数组newArr
通过数组indexOf判断是否存在，不存在，则添加
代码如下：
//方法三：数组indexOf方法去重
function unique3(arr){
var newArr = [];
arr.forEach(function(v){
if(newArr.indexOf(v) < 0){
newArr.push(v);
}
});
return newArr;
}
取运行20次的平均耗时，其结果为：
56.08ms
方法四：利用对象键去重
思路如下：
新建一个数组newArr、一个空对象temp
将原数组的值加入到对象中，通过判断对象的键来控制新数组的数据写入
//方法四：利用对象键去重
function unique4(arr){
var temp = {};
var newArr = [];
var arrLength = arr.length;
for(var i = 0; i < arrLength; i++){
if(!temp[arr[i]]){
temp[arr[i]] = true;
newArr.push(arr[i]);
}
}
return newArr;
}
取运行20次的平均耗时，其结果为：
1.56ms
性能分析:
因为判断键是否存在于对象中可以一步到位，不需要进行遍历循环，因此其时间复杂度为：O(n)
，所以耗时非常短，这应该是最佳的方法了。
当然，这里要考虑一下可以作为键的值了，在JavaScript中，对象不能作为键，也不能判断数字和字符串的区别（比如键值中数字0和字符串“0”是相同的）。所以，如果在去重的数组中，包含了对象，或者需要区分数字和字符串，那么我们可以把它们的特征和值进行转化，转化为字符串，再作为键值。
改进的方法如下：
//改进的方法
function unique4(arr){
var newArr = [];
var arrLength = arr.length;
var temp = {};
var tempKey;
for(var i=0; i<arrLength; i++){
tempKey = typeof arr[i] + JSON.stringify(arr[i]);
if(!temp[tempKey]){
temp[tempKey] = true;
newArr.push(arr[i]);
}
}
return newArr;
}
取运行20次的平均耗时，其结果为：
47.33ms
因为需要做数据转化，因此需要消耗额外的时间，其耗时明显增加。因此，是否需要做此优化，视具体情况而定。
方法五：ES6方法之Map方法去重
Map是ES6新增的有序键值对集合。它的key和value可以是任何值。对比方法四中的局限，那么Map方法就没有任何限制了，因此不需要做任何数据转化。使用方法和方法四基本一致。代码如下：
//方法五：ES6方法之Map方法去重
function unique5(arr){
var newArr = [];
var temp = new Map();
var arrLength = arr.length;
for(var i = 0; i < arrLength; i++){
if(!temp.get(arr[i])){
temp.set(arr[i],true);
newArr.push(arr[i]);
}
}
return newArr;
}
取运行20次的平均耗时，其结果为：
19.75ms
方法六：ES6方法之Set方法去重
Set 是 ES6 新增的有序列表集合，它不会包含重复项，因此直接传入数组，即可实现去重。
// 方法六：ES6方法之Set方法去重
function unique6(arr){
var newArr = [...new Set(arr)];
return newArr;
}
取运行20次的平均耗时，其结果为：
7.18ms
总结
| 方法 | 数组长度为100000,元素值为1000以内的平均耗时 |
| -------- | -----: | :----: |
| 双重for循环数组去重 | 221.27ms |
| 优化的双重for循环数组去重 | 87.84ms |
| 数组indexOf方法去重 | 56.08ms |
| 利用对象键去重 | 1.56ms |
| 改进的利用对象键去重 | 47.33ms |
| ES6方法之Map方法去重 | 19.75ms |
| ES6方法之Set方法去重 | 7.18ms |
如果去重的数组为纯number或者纯字符串，那么可以用利用对象键去重的方法，因为它的效率是最高的。
如果要保证通用性，如果支持ES6，那么最好使用Set方法。
