javaScript去重的11种方法
前言
去重是开发和面试中经常遇到的问题，下面是总结的 11 种去重方法
方法
示例数组
var arr = [1, 2, 4, 5, 5, 2, 1, 1, 4, 6]
set + 解构赋值
这种方法利用了 set 成员唯一的特征和扩展运算符方法实现
function fn1() {
return ([...new Set(arr)]);
}
console.log(fn1());
forEach 循环 + indexOf
先使用 foreach 循环取到每一个元素，在这里也可以改成 for 循环的写法道理是一样的，取到每一个元素后取这个元素的 index 和循环中 index 比较是否一样，一样则 push()
function fn2() {
let temp = []
arr.forEach((item, index) => {
arr.indexOf(item) == index ? temp.push(item) : null
})
return temp
}
console.log(fn2());
filter 过滤
和上一种方法思路差不多，filter 相当于上面的步骤合并到一个方法中实现
function fn3() {
let temp = arr.filter((item, index) => {
return arr.indexOf(item) == index
})
return temp
}
console.log(fn3());
对象键值唯一性
对象的键值因为具有唯一性，所以可以将数组成员作为 key 保存起来，在数组全部循环过一次后，再循环取出对象的 key 添加到一个空白数组中，但是这种方法会导致取出的数组成员数据类型全部转换为文本类型。
function fn4() {
let obj = {}
let temp = []
arr.forEach((item, index) => {
obj[item] = index //这一步赋值value其实没有必要，因为最后使用不到
})
for (const key in obj) {
temp.push(key)
}
return temp
}
console.log(fn4());
双重 for 循环
外循环的作用是取到每一个元素，内循环的作用是将外循环取到的元素和其余的元素做对比，如果能取到一样的将后一个删除，要注意的是删除的话需要将内循环的计数 - 1，因为数组的长度也 - 1 了。
function fn5() {
let temp = arr
for (let i = 0; i < temp.length; i++) {
for (let j = i + 1; j < temp.length; j++) {
if (temp[i] === temp[j]) {
temp.splice(j, 1)
j--
}
}
}
return temp
}
console.log(fn5());
indexOf + lastIndexOf
这种方法的思路是如果一个元素查找她的索引，从前获得和从后获得的索引一样，则必然是唯一的，如果不一样说明有重复，删除最后一个并将计数 i-1。
function fn6(){
for(let i =0;i<arr.length;i++){
if(arr.indexOf(i)!=arr.lastIndexOf(i)){
arr.splice(arr.lastIndexOf(i),1)
i--
}
}
return arr
}
console.log(fn6());
sort + 循环
思路是先将数组的内容按照大小排序，然后从第一开始和后一个进行对比，如果一样说明是重复的，将重复的删除并计数 - 1。
function fn7() {
let temp = arr.sort((a, b) => {
return a - b
})
for (let i = 0; i < temp.length; i++) {
if (temp[i] === temp[i + 1]) {
temp.splice(i + 1, 1)
i--
}
}
return temp
}
console.log(fn7());
includes + 循环
思路是先创建一个新数组，然后循环取到每一个元素，如果该元素不在新数组中，就将其添加进去。
function fn8() {
let temp = []
for (let i = 0; i < arr.length; i++) {
if (!temp.includes(arr[i])) {
temp.push(arr[i])
}
}
return temp
}
console.log(fn8());
Map
Map 是 ES6 中特性，是一种字典的数据结构，和对象一样也具有 key 的唯一性
- map.set 设置 map 的 key
- map.has 检测是否含有指定的 key，返回一个布尔值
function fn9() {
let map = new Map();
let temp = []
for (let i = 0; i < arr.length; i++) {
if (!map.has(arr[i])) { //如果键值不存在，则写入这个键值并添加到数组
map.set(arr[i], false);
temp.push(arr[i]);
}
}
return temp;
}
console.log(fn9());
递归
这个方法和 sort 方法也许相似，先使用 sort 排序，但是是使用递归的思路从后到前删除相同的元素
function fn10() {
let len = arr.length;
let temp = arr.sort(function (a, b) {
return a - b;
});
function loop(index) {
if (index >= 1) {
if (temp[index] === temp[index - 1]) {
temp.splice(index, 1);
}
loop(index - 1)
}
}
loop(len - 1);
return temp;
}
console.log(fn10());
Reduce
reduce 的数组的累加器方法，在本例中 reduce 的第一个参数是一个函数，用来处理每一个元素，第二个参数是一个空数组作为容器，reduce 的循环开始，空数组会被带入 prev，判断 prev 中是否含有当前处理的元素 item，如果已经有了就不做处理，如果没有就将 prev 和 item 合并为一个数组，处理完毕后这个数组会被返回给 reduce 作为下一轮处理的第二个参数，依次循环，最后得到的就是去重后的数组
function fn11() {
return arr.reduce((prev, item) => {
return prev.includes(item) ? prev : [...prev, item]
}, []);
}
console.log(fn11());
总结
数组的去重方法有很多，在使用的时候需要根据自己的需求去选择，比如使用了 sort 的方法的去重只能使用在纯数字数组中，而对象键值去重数组后数组成员都是纯字符串等等。本篇只是简单的方法总结，还有一些没有举例，重点是解决问题思路
