数组内元素去重方法总结

前言

有很多情况我们需要将服务端返回的数据，进行去重，那么都有哪些方法可以实现呢？本文列举了六种解决方案，一起来看看都有哪些~

一、 需求

数组去重，每个元素在数组内只能出现一次。

二、解决方案

1. Set

ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。

set方法的成员必须是唯一的，正好可以满足我们的需求。

代码如下（示例）：

let arr = [1, 2, 3, 4, 3, 2, 3, 4, 6, 7, 6];
let unique = (arr) => [...new Set(arr)];

console.log(unique(arr)) // 输出结果：[1, 2, 3, 4, 6, 7]

2. reduce()方法

使用JS内置对象Array提供的reduce方法
reduce方法使用详解可以看我之前写的博客:数组常用方法
代码如下（示例）：

let arr = [1, 2, 3, 4, 3, 2, 3, 4, 6, 7, 6];
        
const res = arr.reduce((acc,cur) => {
	if(acc.indexOf(cur) === -1){
		acc.push(cur)
	}
    return acc
},[])

console.log(res) // 输出结果：[1, 2, 3, 4, 6, 7]

3. 双重for循环

for双重循环通过判断第二层循环，去重的数组中是否含有该元素，如果有就退出第二层循环，如果没有 j==result.length 就相等，然后把对应的元素添加到最后的数组里面。

代码如下（示例）：

let arr = [1, 2, 3, 4, 3, 2, 3, 4, 6, 7, 6];
let result = []; 

for(var i = 0; i < arr.length; i++) {
	for(var j = 0 ; j < result.length ; j++) {
		if(arr[i] === result[j]){
			break;
		};
	};
	if(j == result.length){
		result.push(arr[i]);
	};
};

console.log(result); // 输出结果:[1, 2, 3, 4, 6, 7]

4. splice()方法

使用JS内置对象Array提供的splice方法

代码如下（示例）：

let arr = [1, 2, 3, 4, 3, 2, 3, 4, 6, 7, 6];
        
function unique(arr){ 
	for(var i = 0; i<arr.length; i++){ 
		for(var j = i+1; j < arr.length; j++){
		
			if(arr[i] == arr[j]){
				arr.splice(j, 1); 
				j--; 
			}
			
		} 
	}
    return arr; 
}

console.log(unique(arr))

5. filter()方法

使用JS内置对象Array提供的splice方法

代码如下（示例）：

let arr = [1, 2, 3, 4, 3, 2, 3, 4, 6, 7, 6]

let unique = (arr) => {
	return arr.filter((item,index) => {
		return arr.indexOf(item) === index
	}) 
}

console.log(unique(arr)) // 输出结果：[1, 2, 3, 4, 6, 7]

6. Map

利用 Map 数据结构去重

代码如下（示例）：

let arr = [1, 2, 3, 4, 3, 2, 3, 4, 6, 7, 6]
let unique = (arr)=> {
	let seen = new Map()
	
	return arr.filter((item) => {
		return !seen.has(item) && seen.set(item,1)
	})
	
}

console.log(unique(arr)) // 输出结果：[1, 2, 3, 4, 6, 7]

总结

很实用的方法，记得点赞收藏哦~