聊聊Javascript数组 “去重” 的几种实现

简述

简述：数组去重，就是消除数组中相同的元素。

集合方式去重

介绍这种方式之前先补给一点关于集合的知识吧！

集合就是一种数据存储的结构，该结构类不存在重复的元素。在ES6中增加Set类型定义一个集合（有序列表）。

创建集合并添加元素的三种方法

1. 创建Set实例通过add()方法添加元素

var set = new Set();
set.add(1).add("2").add({a:"a"})
// 注意在set中NaN === NaN  => true
console.log(set)

2. 传递数组初始化集合

var set = new Set([1,2,3])
console.log(set)

3. 函数中arguments类数组对象初始化集合

// 创建IIFE
(function(){
	let set = new Set(arguments)
	console.log(set)
})(1,2,3,4,5)

集合相关方法及属性

size属性：返回Set 集合的成员总数。
add(value) 方法：添加某个值，返回 Set 集合本身。
delete(value) 方法：删除某个值，返回一个布尔值，表示删除是否成功。
has(value) 方法：返回一个布尔值，表示该值是否为Set的成员。
clear() 方法：清除所有成员，没有返回值。

具体关于集合相关的知识可以学习这篇文章，了解集合的交集以及并集等的相关实现 链接 。

集合去重代码实现

现在大概已经了解了关于集合的相关的知识，那么下面我们就先用集合的方式实现 数组去重。

var array = [1,2,3,4,54,1,2,3];
var newArray = [...new Set(array)];
console.log(newArray);

···符号是ES6新增的扩展运算符，就是把对象或者数组都展开。

下面我用几个例子让你认识下扩展运算符···

var a = [1,2,3]
var b = [4,5,6]
var c = [...a,...b]
console.log(c)  // [1,2,3,4,5,6]

var a = {a:"a"}
var b = {b:"b"}
var c = {..a,...b}
console.log(c)  // {a:"a",b:"b"}

var a = [..."Hello"]
console.log(a) // ["H","e","l","l","o"]

上面我们已经了解了集合方式实现数组的去重，相对来说是非常简单的。下面实现数组去重的方式相对来说相对复杂点。

手写函数式去重

下面这种方式是在数组原型上添加去重函数方法。

// Deduplication 去重
Array.prototype.Deduplication = function(){
	let newArray = []
	this.forEach((element)=>{
		if(!newArray.includes(elements)){
			// 如果数组中没有此元素就添加
			newArray.push(elements)
		}
	)
	return newArray;
}
// 使用方法直接定义一个数组，打点调用即可，重点是思想。
var arr = [1,1,1,3,4,5,5,1,2]
var newArr = arr.Deduplication()  
console.log(newArr)   //  [1,3,4,5,2]

手写式函数数组去重有很多的方式，我就不，嗯！希望对大家有帮助！