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]

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系列对比文章，进行了解。

点关注，不迷路~