JavaScript —— 极简主义
点关注，不迷路~
喝了一天水，今天继续肉，一天不学习，便觉得食而无味。今天主要讲解数组的去重，方法有很多，让我们一一道来。
1、Set 去重
function unique(arr) {
// 异常处理，健壮性！
if(!Array.isArray(arr)) {
console.log('type error!')
return
}
return Array.from(new Set(arr)) // 方式一
// return [...new Set(arr)] // 方式二
}
let arr = [2, 4, 3, 2, 3, 3, 5, 4];
let result = unique(arr);
console.log(result)
结果: [2, 4, 3, 5]
2、splice 去重
function unique(arr) {
// 异常处理，健壮性！若arr未定义浏览器会主动提示错误。
if(!Array.isArray(arr)) {
console.log('type error!')
return
}
for(let i = 0; i < arr.length; i++) {
for(let j = i+1; j < arr.length; j++) {
if(arr[i] === arr[j]) {
arr.splice(j, 1);
j--;
}
}
}
return arr
}
arr = [2, 4, 3, 2, 3, 3, 5, 4];
result = unique(arr)
console.log(result)
结果: [2, 4, 3, 5]
原理：双层循环，外层循环元素，内层循环比较。值相同时，则删去这个值，同时要将内循环的 j--，否则会遗漏一个数的比较；所给的示例数组都是精心设计的。
3、indexOf 去重
function unique(arr) {
// 异常处理，健壮性！若arr未定义浏览器会主动提示错误。
if(!Array.isArray(arr)) {
console.log('type error!')
return
}
let res = [];
for(let i = 0; i < arr.length; i++) {
if(res.indexOf(arr[i]) === -1 ) {
res.push(arr[i]);
}
}
return res
}
arr = [2, 4, 3, 2, 3, 3, 5, 4];
result = unique(arr)
console.log(result)
结果: [2, 4, 3, 5]
原理: 新建一个空的结果数组，for 循环原数组，判断结果数组是否存在当前元素，如果有相同的值则跳过，不相同则push进数组。
4、includes 去重
function unique(arr) {
// 异常处理，健壮性！若arr未定义浏览器会主动提示错误。
if(!Array.isArray(arr)) {
console.log('type error!')
return
}
let res = [];
for(let i = 1; i < arr.length; i++) {
if(!res.includes( arr[i] )) {
res.push(arr[i]);
}
}
return res
}
arr = [2, 4, 3, 2, 3, 3, 5, 4];
result = unique(arr)
console.log(result)
结果: [2, 4, 3, 5]
原理: 检测数组是否包含某个值。
5、sort 去重
function unique(arr) {
// 异常处理，健壮性！若arr未定义浏览器会主动提示错误。
if(!Array.isArray(arr)) {
console.log('type error!')
return
}
arr.sort(); // 会改变原始数组，还记得吗？
let res = [arr[0]];
for(let i = 1; i < arr.length; i++) {
if(arr[i-1] !== arr[i] ) {
res.push(arr[i]);
}
}
return res
}
arr = [2, 4, 3, 2, 3, 3, 5, 4];
result = unique(arr)
console.log(result)
结果: [2, 4, 3, 5]
原理: 利用sort()排序方法，然后根据排序后的结果进行遍历与相邻元素比对，不相等就push。res赋初始值、i从1开始，都是经过用心考虑的。但是，顺序会发生变化。
6、filter 去重
function unique(arr) {
// 异常处理，健壮性！若arr未定义浏览器会主动提示错误。
if(!Array.isArray(arr)) {
console.log('type error!')
return
}
let res = arr.filter( (item, index, arr) => {
return arr.indexOf(item, 0) === index
} )
return res
}
arr = [2, 4, 3, 2, 3, 3, 5, 4];
result = unique(arr)
console.log(result)
结果: [2, 4, 3, 5]
原理：索引值判断，元素在数组中的第一个索引值 === 当前索引值，则返回当前元素。
7、reduce 去重
function unique(arr) {
// 异常处理，健壮性！若arr未定义浏览器会主动提示错误。
if(!Array.isArray(arr)) {
console.log('type error!')
return
}
let res = arr.reduce( (prev, currentItem, index, arr) => {
return prev.includes(currentItem) ? prev : [...prev, currentItem]
} , [])
return res
}
arr = [2, 4, 3, 2, 3, 3, 5, 4];
result = unique(arr)
console.log(result)
结果: [2, 4, 3, 5]
原理: 利用reduce + includes + es6扩展运算符。
总结：
1) 涉及到时间复杂度和空间复杂度，本文不做过多介绍，后续专题算法文章讲解；
2) 是否需要双重循环；
3) 是否需要新变量，即是否改变原始数组；
4) forEach和filter方法大同小异，indexOf与includes方法大同小异；本文就不再赘述，但是实现上的细微差别，可以通过查看前面的array系列对比文章，进行了解。
点关注，不迷路~