数组、数组对象去重

一、纯数组

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将字符串转化成对象,实现数组去重。

2.数组对象 - 利用filter()+findIndex() 

arr.filter((item,index)=>item?.findIndex( i => i.id===item.id ) === index) 

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

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

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

3.数组对象 - 利用reduce()+some()

arr.reduce((total,item)=>total?.some( i => i.id===item.id ) ? total : [...total,item] , [] )

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

some遍历数组,判断数组中否存在符合条件的元素,如果存在返回true,如果不存在返回false。

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

本篇文章只是介绍一些简单的去重方法,其实数组去重的方法有很多,大家自行摸索~~~

相关推荐

  1. 数组数组对象

    2024-04-12 16:34:03       35 阅读
  2. 问题:数组对象

    2024-04-12 16:34:03       68 阅读
  3. 【js】js数组对象

    2024-04-12 16:34:03       62 阅读
  4. 对象数组通用方法

    2024-04-12 16:34:03       38 阅读
  5. js中数组对象的方法

    2024-04-12 16:34:03       62 阅读
  6. js 数组

    2024-04-12 16:34:03       58 阅读
  7. ArrayList数组

    2024-04-12 16:34:03       25 阅读
  8. js如何数组

    2024-04-12 16:34:03       62 阅读
  9. 事件委托,数组

    2024-04-12 16:34:03       46 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-04-12 16:34:03       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-04-12 16:34:03       101 阅读
  3. 在Django里面运行非项目文件

    2024-04-12 16:34:03       82 阅读
  4. Python语言-面向对象

    2024-04-12 16:34:03       91 阅读

热门阅读

  1. python 最简单的网页爬虫

    2024-04-12 16:34:03       30 阅读
  2. Python 大麦抢票脚本

    2024-04-12 16:34:03       41 阅读
  3. AcWing-5:多重背包问题 II

    2024-04-12 16:34:03       36 阅读
  4. C++| QT定时器QTimer

    2024-04-12 16:34:03       33 阅读
  5. 探索JVM类加载机制

    2024-04-12 16:34:03       27 阅读
  6. SQL SERVER 备份

    2024-04-12 16:34:03       31 阅读
  7. stmmac_dvr_probe解析

    2024-04-12 16:34:03       38 阅读
  8. Go 之缓冲通道限制协程并发数目

    2024-04-12 16:34:03       34 阅读
  9. C语言什么是寄存器变量?如何实现?

    2024-04-12 16:34:03       37 阅读