JavaScript数组去重及效率测试

测试模板

var arr1 = Array.from(new Array(100000), (x, index)=>{
    return index
})
var arr2 = Array.from(new Array(50000), (x, index)=>{
    return index+index
})
var start = new Date().getTime()
console.log('开始数组去重')
function distinct(a, b) {
    // 数组去重
}
console.log('去重后的长度', distinct(arr1, arr2).length)
var end = new Date().getTime()
console.log('耗时', end - start)

以下方法按性能由低至高排序

性能略低方法

方法一：双重for循环去重方法

思路：外层循环遍历元素，内层循环检查是否重复

function distinct(a, b) {
	var arr = a.concat(b), 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--;
				j--;
			}
		}
	}
	return arr;
}

方法二：for循环去重方法

思路：遍历数组，建立新数组，利用indexOf判断是否存在于新数组中，不存在则push到新数组，最后返回新数组

function distinct(a, b) {
	var arr = a.concat(b), temp = [];
	for (var i = 0; i < arr.length; i++) {
		temp.indexOf(arr[i]) == -1 && temp.push(arr[i]);
	}
	return temp;
}

方法三：Array.filter() + indexOf去重方法

思路：使用Array.filter() 遍历数组，并结合 indexOf 来排除重复项

function distinct(a, b) {
	var arr = a.concat(b);
	return arr.filter(function (item, index) {
		return arr.indexOf(item) === index;
	});
}

方法四：reduce() + includes()去重方法

思路：reduce方法传入一个空数组，当 includes() 返回 false 的时候，就将该元素 push 到空数组中

function distinct(a, b) { 
	var arr = a.concat(b);
	return arr.reduce(function (item, ele) {
		!item.includes(ele) && item.push(ele);
		return item;
	}, []);
}

方法五：for…of + includes()去重方法

思路：外层用 for…of 语句循环出数组中每一项，创建一个空数组，当 includes() 返回 false 的时候，就将该元素 push 到空数组中

function distinct(a, b) {
	var arr = a.concat(b), result = [];
	for (var i of arr) {
		!result.includes(i) && result.push(i);
	}
	return result;
}

比上述方法强

方法六：Array.filter() +Object.hasOwnProperty()去重方法

思路：利用hasOwnProperty 判断是否存在对象属性

function distinct(a, b) {  
	var arr = a.concat(b), obj = {};
	return arr.filter(function (item) {
		return obj.hasOwnProperty(typeof item + item) ? false : (obj[typeof item + item] = true);
	});
}

方法七：Array.filter()+Object去重方法

思路：利用对象的属性不会重复这一特性，校验数组元素是否重复

function distinct(a, b) {
	var arr = a.concat(b), obj = {};
	return arr.filter(function (item) {
		return obj[item] ? '' : obj[item] = true;
	});
}

方法八：reduce() + Object.keys()去重方法

思路：reduce方法传入一个空对象，利用对象的属性不会重复这一特性，校验数组元素是否重复(此方法会把内容为数字的数组自动升序排序）)

function distinct(a, b) {
	var arr = a.concat(b);
   	var obj = arr.reduce((item, ele) => {
		item[ele] = true;
		return item;
	}, {});
	return Object.keys(obj).map(item => parseInt(item) ? parseInt(item) : item);
}

方法九：for…of + Object

思路：创建一个空对象，然后用 for 循环遍历；利用对象的属性不会重复这一特性，校验数组元素是否重复

function distinct(a, b) {
	var arr = a.concat(b), result = [], obj = {};
	for (var i of arr) {
		obj[i] ? '' : obj[i] = true && result.push(i);
	}
	return result;
}

方法十：Array.sort()

思路：使用 sort() 将数组进行排序，然后比较相邻元素是否相等，从而排除重复项

function distinct(a, b) {
	var arr = a.concat(b);
	arr = arr.sort();
	var result = [arr[0]];
	for (var i = 1, len = arr.length; i < len; i++) {
		arr[i] !== arr[i - 1] && result.push(arr[i]);
	}
	return result;
}

方法十一：ES6=> Map数据结构去重

思路：创建一个空Map数据结构，遍历需要去重的数组，把数组的每一个元素作为key存到Map中。由于Map中不会出现相同的key值，所以最终得到的就是去重后的结果。

function distinct(a, b) {
	var arr = a.concat(b), newArr = [], newMap= new Map();
	for (let i = 0; i < arr.length; i++) {
		if (!newMap.get(arr[i])) {
			newMap.set(arr[i], 1);
			newArr.push(arr[i]);
		}
	}
	return newArr;
}

方法十二：ES6=> Set去重方法

思路：ES6 新增了 Set 这一数据结构，类似于数组，但 Set 的成员具有唯一性

function distinct(a, b) {
	var arr = a.concat(b);
	return Array.from(new Set(arr));
}