JS-常见数组六种去重方式（附实现原理）

一、Set + 扩展运算符：我愿称之为数组去重-终极神器

利用 Set 元素不重复的特性，使用创建数组的字面量语法，然后在里面使用扩展运算符展开 Set

const arr = [11, 20, 10, 33, 11, 22, 22, 33]

const newArr = [...new Set(arr)]
console.log(newArr) // [ 11, 20, 10, 33, 22 ]

二、for + 对象

我们知道对象的 key 是不会重复的，可以将数组的元素作为对象的key值，作为 key 值的时候进行判断，若 key 值存在则不添加，在将当前的数组元素添加进入新数组

const obj = {}
const newArr = []
for (let i = 0; i < arr.length; i++) {
	if (!obj[arr[i]]) {
		obj[arr[i]] = 1
		newArr.push(arr[i])
	}
}
console.log(newArr) // [ 11, 20, 10, 33, 22 ]

三、filter

filter 可以返回一个新数组，新数组的元素是通过符合条件的元素，所以可以利用 indexOf 返回的元素的索引是元素第一次出现的索引，所以当 indexOf 返回的索引不等于当前循环的索引，就表示是重复了

const newArr = arr.filter((item, index) => {
	return arr.indexOf(item) === index
})
console.log(newArr) // [ 11, 20, 10, 33, 22 ]

四、for + indexOf

首先创建一个新数组，for 循环遍历数组的时候使用 indexOf 检测新数组中是否存在当前值，不存在则加入进新数组

const newArr = []
for (let i = 0; i < arr.length; i++) {
	if (newArr.indexOf(arr[i]) === -1) {
		newArr.push(arr[i])
	}
}
console.log(newArr) // [ 11, 20, 10, 33, 22 ]

五、双重 for 循环

将数组第一项加入到新数组，然后利用双重 for 循环外层循环执行一次，内部 for 循环执行一整个循环的特性，可以充分让原数组每个元素和新数组元素进行对比，如果出现了相等的情况表示新数组存在此元素，同时将开关改为 false，并退出本次循环，提高效率，当没有发现相同的情况下，开发为 true，后续的三元判断就会将本次的元素加入到新数组

const newArr = [arr[0]]
for (let i = 0; i < arr.length; i++) {
	let flag = true
	for (let j = 0; j < newArr.length; j++) {
		if (arr[i] === newArr[j]) {
			flag = false
			break
		}
	}
	flag ? newArr.push(arr[i]) : 1
}
console.log(newArr) // [ 11, 20, 10, 33, 22 ]

六、includes

includes 方法可以判断一个数组中是否包含某一个元素, 并且返回true 或者false

const newArr = []
for (let i = 0; i < arr.length; i++) {
	if (!newArr.includes(arr[i])) {
		newArr.push(arr[i])
	}
}
console.log(newArr) // [ 11, 20, 10, 33, 22 ]