JavaScript数组去重：从双重循环到ES6 Set的多种实现方案

前言

数组去重是前端开发中高频出现的场景，掌握其多种实现方式对于提升编码能力至关重要。

深入理解这些方法，可以避免在实际工作中因技术盲区导致的尴尬，夯实基础。

开始研究

原始方案

最初处理数组去重时，我的思路是创建一个新数组，通过两层for循环遍历。若元素首次出现则push进新数组，若发现重复则break跳出内层循环。通过判断内层循环变量j是否等于新数组长度来确认元素唯一性，最终返回新数组。


var arr = [1,1,2,3,4,5,6,7,4,3,'1',8,'3','1','3','66']

function unique(arr){
	var res = []
	for(var i = 0; i < arr.length; i++){
		for(var j = 0; j < res.length; j ++){
			if(arr[i] === res[j]){
				break
			}
		}
		// 如果数据第一次出现，那么执行完上面for语句后，j的值应该等于res的长度才对
		if(j === res.length){
			res.push(arr[i])
		}
	}
	return res;
}

console.log(unique(arr));

利用indexOf优化原始方法

首先简要介绍indexOf方法。

indexOf(item, start)用于返回数组中指定元素首次出现的索引位置。

该方法从数组起始位置（或指定的start位置）开始检索，若找到匹配元素则返回其索引；若未指定start，则从索引0开始查找。

若在数组中未找到指定元素，该方法返回-1。

基于上述特性，我们可以利用“未找到返回-1”这一关键点来简化逻辑。


var arr = [1,1,2,3,4,5,6,7,4,3,'1',8,'3','1','3','66']

function unique(arr){
	var res = []
	for(var i = 0; i < arr.length; i++){
		if(res.indexOf(arr[i]) === -1){
			res.push(arr[i])
		}
	}
	return res;
}

console.log(unique(arr));

再次优化，使用filter方法

filter方法用于创建新数组，包含所有通过测试（由提供函数实现）的元素。

思路是将filter与indexOf结合，替代部分循环逻辑，直接过滤出唯一元素并返回去重后的数组。


var arr = [1,1,2,3,4,5,6,7,4,3,'1',8,'3','1','3','66']

function unique(arr){
	var res = arr.filter(function(item,index,arr){
		return arr.indexOf(item) === index
	})
	return res;
}
console.log(unique(arr));

换种思路：转为有序数组后去重

在处理力扣等算法题时，识别数组是否有序往往能简化问题。

若先将数组排序，重复元素将相邻排列。此时只需一个变量记录前一个元素的值，遍历比较当前值与前值是否相同，不同则加入结果数组，即可实现去重。


var arr = [1,1,2,3,4,5,6,7,4,3,'1',8,'3','1','3','66']

function unique(arr){
	var res = []
	var pre
	arr = arr.sort()
	for(var i = 0; i < arr.length; i++){
		if(!i || pre !== arr[i]){
			res.push(arr[i])
		}
		pre = arr[i]
	}
	return res;
}

console.log(unique(arr));

再次优化，结合filter与排序

发现filter同样可以配合排序逻辑，使代码更加简洁，具体实现如下。


var arr = [1,1,2,3,4,5,6,7,4,3,'1',8,'3','1','3','66']

function unique(arr){
	var res = arr.sort().filter(function(item,index,arr){
		return !index || item !== arr[index - 1]
	})
	return res;
}

console.log(unique(arr));

ES6 Set方法

ES6引入了Map和Set等新数据结构，极大提升了数据处理效率。

Map对象用于存储键值对，键和值可以是任意类型。

Set对象允许存储唯一值，无论是原始值还是对象引用，自动过滤重复项。

利用Set的这一特性，可以非常便捷地实现数组去重。


var arr = [1,1,2,3,4,5,6,7,4,3,'1',8,'3','1','3','66']

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

console.log(unique(arr));

注意：Set是对象类型，需转换为数组才能返回最终结果。

结合解构赋值的简化写法


var arr = [1,1,2,3,4,5,6,7,4,3,'1',8,'3','1','3','66']

function unique(arr){
	return [...new Set(arr)]
}

console.log(unique(arr));

若对解构赋值熟悉，可参考相关教程进一步简化代码。

此前学习过程中记录的笔记。

继续优化，引入箭头函数


var arr = [1,1,2,3,4,5,6,7,4,3,'1',8,'3','1','3','66']
var unique = (arr) => [...new Set(arr)]
console.log(unique(arr));

总结

从最初繁琐的多层循环代码，到利用箭头函数一行完成，可见持续学习能显著提升代码的优雅度与简洁性。

本文介绍了JavaScript数组去重的多种实现方式，更多相关内容可参考本站往期文章或继续浏览后续章节，感谢支持。

JavaScript数组去重方法的演进与优化

前言