JavaScript数组去重

王布尔

已于 2024-04-26 10:46:46 修改

阅读量221

点赞数 1

分类专栏： JavaScript 文章标签：前端 javascript 算法

于 2024-04-12 15:19:20 首次发布

本文链接：https://blog.csdn.net/m0_67011584/article/details/137682206

版权

JavaScript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一、纯数组

1. 纯数组 - 利用new Set()集合

Array.from(new Set(arr));

Set是es6新增的数据结构，似于数组，但并非真正的数组，我们可以称之为类数组对象，它的一大特性就是所有元素都是唯一的，没有重复的值。

Array.from的作用是允许在 JavaScript 集合(如: 数组、类数组对象、或者是字符串、map 、set 等伪数组对象或可迭代对象) 上进行有用的转换。

我们可以利用Set的特性，进行去重，最后使用Array.from()将类数组对象转化成真正的数组。

2. 纯数组 - 利用filter()+indexOf()

arr.filter((item, index) => arr.indexOf(item) === index);

filter函数的作用是遍历数组并返回符合条件的元素组成的数组，第一个参数是数组元素，第二个参数是索引。

indexOf的作用是查询并返回数组中第一个符合条件的元素的索引。

两个方法组合起来，filter循环遍历数组，indexOf判断当前元素在数组中第一次出现的位置是否等于当前索引，如果等于(说明第一次出现)就返回true，如果不等于(说明该元素是重复的元素)返回false，通过filter过滤获得去重后的数组。

3. 纯数组 - 利用reduce()+includes()

arr.reduce((total, item) => (total?.includes(item) ? total : [...total, item]) , []);

reduce是一个累加器，第一个参数是回调函数，第二个参数是累加器但默认值。回调函数中第一个参数是累加的数组，第二个参数是遍历的元素，返回值是累加器的值。

includes用于查找数组中书否存在符合条件的元素，如果存在返回true，如果不存在返回false。

设置reduce累加器的默认值为空数组，开始遍历数组，通过includes判断累加器中是否存在当前元素，如果当前元素在累加器中不存在，就把它添加到累加器中，并返回出去，如果当前元素已经存在，直接把累加器返回出去，实现去重。

二、数组对象

1.数组对象 - 利用new Set()集合

Array.from(new Set(arr.map((item) => JSON.stringify(item)))).map(item=>JSON.parse(item))

Set是es6新增的数据结构，似于数组，但并非真正的数组，我们可以称之为类数组对象，它的一大特性就是所有元素都是唯一的，没有重复的值。

Array.from的作用是允许在 JavaScript 集合(如: 数组、类数组对象、或者是字符串、map 、set 等伪数组对象或可迭代对象) 上进行有用的转换。

JSON.stringify()：将数据格式转化成JSON字符串格式

JSON.parse()：将JSON字符串转化成数据格式

Set对象只能对简单的数组去重，无法对数组对象去重，我们可以遍历数组并通过JSON.stringify()将数组元素转化成JSON字符串，此时数组变成字符串组成的数组，通过Set特性去重，去重之后通过Array.form转化成真数组，最后遍历数组并通过JSON.parse将字符串转化成对象，实现数组去重。