JS数组去重方法整理，再也不用担心数组如何去重了

短命女 2022-12-04 08:46 175阅读 0赞

前端笔试的过程中，大概率会有这样一道题，给你一个字符串数组，让你输出其中不重复的字符串的个数，这就是典型的数组去重了，那应该如何进行数组去重呢？本篇文章整理了近10种方案，你来看看那个最适合。

# 1.利用set对数组去重 #

`set`是ES6中的一种数据结构，类似于数组，但是成员的值都是唯一的，没有重复的值。

function unique(arr) { 
    	return [...new Set(arr)]  // 扩展运算符，将伪数组转换为真正的数组
    }
    var arr = ["abc","ade","bef","bef","abd","efg"];
    console.log(unique(arr))

同时，也可以使用`Array.from`方法将类数组或可遍历对象转换为真正的数组。

function unique(arr) { 
    	return Array.from(new Set(arr))
    }
    var arr = ["abc","ade","bef","bef","abd","efg"];
    console.log(unique(arr))

# 2.双层for循环 #

该方法用到了一个中间数组，下面是不需要借助中间数组的一种方式：

# 3.indexOf #

`indexOf()` 方法可返回某个指定的字符串值在字符串中首次出现的位置，如果要检索的字符串值没有出现，则该方法返回 -1。

# 4.sort #

`sort()`排序方法，会对数组进行排序，最终输出的数组和传入的数组，元素位置不一样

# 5.includes #

`includes()` 方法用于判断字符串是否包含指定的子字符串。如果找到匹配的字符串则返回 true，否则返回 false。

# 6.reduce+includes #

function unique(arr) { 
    	return arr.reduce((prev, cur) => prev.includes(cur) ? prev : [...prev,cur],[])
    }
    var arr = ["abc","ade","bef","bef","abd","efg"];
    console.log(unique(arr))

`reduce()`函数为归并类函数，最常见的应用场景就是，计算数组中每一项的总和。该方法会遍历数组的每一项，它接收两个参数：第一个参数是：每次遍历都会调用的函数，而这个函数又接收四个参数，分别为：前一个值、当前项、项目的索引和数组对象，而这个函数的返回值，会传给下一次遍历时，执行的这个方法的第一个参数。第二个参数是：归并基础的初始值。

上面代码中，传递了两个参数，第一个参数是`(prev, cur)`，第二个参数是`[]`，所以在第一次循环时，`prev`是一个空数组，`cur`是数组的第一项，返回的函数结果作为第二次循环时的`prev`值，`cur`变为数组的第二项，由此可以实现数组去重的效果。

# 7.filter #

function unique(arr){ 
    	return arr.filter(function(item, index, arr) { 
    		return arr.indexOf(item) === index;   // 过滤出原数组中的第一个索引等于当前索引值的元素
    	})
    }
    var arr = ["abc","ade","bef","bef","abd","efg"];
    console.log(unique(arr))

关于数组去重这块今天就分享到这里了，当然，方案不只这几个，还有好多种方案等着大家去探索呦！