这篇文章主要介绍了JS数组去重有几种类型，分别怎么实现相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇JS数组去重有几种类型，分别怎么实现文章都会有所收获，下面我们一起来看看吧。

// 测试用例
const a = {};
const b = { c: 1 };
const array = [
  1, 1, "1", "1",
  {}, {}, { c: 1 }, { c: 1},
  a, a, b, b, 
  [], [], [1], [1],
  undefined, undefined,
  null, null,
  NaN, NaN,
];

2 JS 数组去重4大类型

2.1 元素比较型

此类型通过数组元素之间进行比较来去重

2.1.1 双层 for 循环逐一比较（es5常用）

使用双层for循环逐一比较数组元素，用splice方法去除重复的元素

// 双层for循环
function uniq1(arr) {
    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
}

// 去重结果
// [1,'1',{},{},{c:1},{c:1},{},{c:1},[],[],[1],[1],undefined,null,NaN,NaN]

通过对比去重前后结果，重复的NaN没有去掉，因为NaN === NaN为false

2.1.2 排序相邻比较

使用sort()方法对数组元素进行排序，然后比较相邻元素，用splice方法去除重复的元素。

function uni2(arr) {
    arr.sort();
    for (let i = 0; i < arr.length - 1; i++) {
        arr[i] === arr[i + 1] && arr.splice(i + 1, 1) && i--;
    }
    return arr;
}

也可以创建新数组，将不重复的元素放入新数组中

function uniq3(arr) {
    arr = arr.sort()
    const newArr = [arr[0]]
    for (let i = 1; i < arr.length; i++) {
        if (arr[i] !== arr[i - 1]) {
            newArr.push(arr[i])
        }
    }
    return newArr
}

// 去重结果
// [[],[],1,'1',[1],[1],NaN,NaN,{},{},{c:1},{c:1},{},{c:1},null,undefined]

重复的NaN没有去掉，因为NaN === NaN为false
sort默认排序顺序是将元素转换为字符串，对象转换为字符串都是[object Object] ，所以sort方法不能对数组中的对象进行排序，也就有可能无法去除重复的对象，除非重复的对象本就相邻

2.2 查找元素位置型

此类型通过查找元素第一次出现的位置来去重

2.2.1 indexOf

通过indexOf查找当前元素第一次出现的位置是否为当前位置，若是，则放入新数组

function uniq4(arr) {
    let res = []
    for (let i = 0; i < arr.length; i++) {
        if (arr.indexOf(arr[i]) === i) {
            res.push(arr[i])
        }
    }
    return res
}

// 去重结果
// [1,'1',{},{},{c:1},{c:1},{},{c:1},[],[],[1],[1],undefined,null]

同样，因为NaN === NaN为false，所以用indexOf查找NaN结果总是-1，从而在新数组中不会有NaN

2.2.2 findIndex

通过findIndex查找当前元素第一次出现的位置是否为当前位置，若是，则放入新数组

function uniq5(arr) {
    let res = []
    for (let i = 0; i < arr.length; i++) {
        if (arr.findIndex(item => item === arr[i]) === i) {
            res.push(arr[i])
        }
    }
    return res
}
// 去重结果
// [1,'1',{},{},{c:1},{c:1},{},{c:1},[],[],[1],[1],undefined,null]

同样，因为NaN === NaN为false，所以用findIndex查找NaN结果总是-1，从而在新数组中不会有NaN

2.3 元素是否存在型

此类型通过判断在新数组中是否存在当前元素来去重

2.3.1 includes

includes方法用来判断一个数组是否包含一个指定的值

function uniq6(arr) {
    let res = []
    for (let i = 0; i < arr.length; i++) {
        if (!res.includes(arr[i])) {
            res.push(arr[i])
        }
    }
    return res
}
// 去重结果
// [1,'1',{},{},{c:1},{c:1},{},{c:1},[],[],[1],[1],undefined,null,NaN]

includes使用零值相等算法来确定是否找到给定的元素，所以可以判断NaN是否在新数组中存在

2.3.2 some

some方法用来测试数组中是否至少有1个元素通过了被提供的函数测试

function uniq7(arr) {
    let res = []
    for (let i = 0; i < arr.length; i++) {
        if (!res.some(item => item === arr[i])) {
            res.push(arr[i])
        }
    }
    return res
}
// 去重结果
// [1,'1',{},{},{c:1},{c:1},{},{c:1},[],[],[1],[1],undefined,null,NaN,NaN]

同样，这里仍旧使用了===来比较元素，因为NaN === NaN为false，所以新数组中会有多个NaN

2.4 依托数据结构特性

此类型通过ES6提供的数据结构Map、Set本身不可重复特性来去重

2.4.1 Map

ES6提供的Map结构可以用各种类型的值（包括对象）当作键，且键是唯一的

function uniq8(arr) {
    const map = new Map()
    for (let i = 0; i < arr.length; i++) {
        !map.has(arr[i]) && map.set(arr[i], true)
    }
    return [...map.keys()]
}
// 去重结果
// [1,'1',{},{},{c:1},{c:1},{},{c:1},[],[],[1],[1],undefined,null,NaN]

map.has方法对NaN也有效

2.4.2 Set（ES6 最常用）

Set结构的成员的值都是唯一的，没有重复的值。

function uniq9(arr) {
    return [...new Set(arr)]
}

// 去重结果
// [1,'1',{},{},{c:1},{c:1},{},{c:1},[],[],[1],[1],undefined,null,NaN]

3 补充

上面所说的方法可以使用不同的Api进行改动，比如使用splice方法去除数组元素的地方，我们可以通过filter方法来过滤数组得到新数组；

再比如includes的方法中不用for循环遍历数组，通过reduce方法来代替等等。

总之，方法有很多，但是万变不离其宗

有些去重方法对NaN无效，因为NaN === NaN为false，如果有需求，可以使用Object.is(NaN, NaN)为true来进行修改

实际应用中，最常用的方法就是使用Set，也可以使用第三方库lodash来处理

关于“JS数组去重有几种类型，分别怎么实现”就介绍到这了，如果大家觉得不错可以参考了解看看，如果想要了解更多，欢迎关注群英网络，小编每天都会为大家更新不同的知识。

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• JS实现排序算法有哪些方式，简单的实现是怎样的

  这篇文章主要给大家介绍了关于JavaScript实现的七种排序算法的相关资料,七种排序算法分别是：冒泡排序、选择排序、插入排序、希尔排序、堆排序、快速排序以及归并排序,需要的朋友可以参考下

• 如何用canvas实现手写输入并能识别的功能

  这篇文章主要介绍了vue使用canvas手写输入识别中文，工作时遇到一些项目如：系统上的输入法使用不方便，客户要求做一个嵌入web网页的手写输入法。下面我们来看看文章得具体描述吧

• JavaScript中判断奇偶数的方法是什么？

  JavaScript中判断奇偶数的方法是什么？在JavaScript中，求奇偶数的方法有很多，这里主要是使用if语句来实现，对新手学习if语句的使用会有一定的帮助，文中示例代码介绍的很详细，感兴趣的朋友接下来一起跟随小编看看吧。

• vuex-persistedstate插件的原理是什么，怎么实现存储

  目录vuex-persistedstate将vuex本地存储使用场景Vuex-persistedstateAPIvuex的本地存储vuex是什么vuex中的五大核心当然vuex的本地存储还有一种方式vuex-persistedstate将vuex本地存储使用场景最近在做Vue项目中的登录模块，登陆成功后获取到token

• 一文搞懂Js中new操作符的作用

  JavaScript是一种前端开发语言，与其他高级语言一样，JavaScript也有new操作符。那么在js中new操作符的作用是什么呢？很多刚接触前端朋友对此都不是很了解，本文详细介绍了js中new操作符的作用，感兴趣的朋友继续往下看吧。