JavaScript数组去重的常见方法 Set filter indexOf

知识回调(不懂就看这儿!)

知识专栏专栏链接
JavaScript知识专栏https://blog.csdn.net/xsl_hr/category_12024214.html?spm=1001.2014.3001.5482

有关JavaScript的相关知识可以前往JavaScript知识专栏查看复习!!

场景复现

在近期的前端学习中,接触到了小程序和uniapp,对于列表或者数据的展示来说,很多情况下是需要限制展示条数的。下面给出一个具体的需求!!

具体需求卡片区的内容最多展示四条数据

方法采用JS原生函数获取键值并去重

最终效果
在这里插入图片描述

下面我们来通过代码示例来详细介绍五种常见的去重方法。 👇👇👇

实现数组去重的五种方法

将下面数组去除重复元素(以多种数据类型为例)

const arr = [1, 2, 2, 'abc', 'abc', true, true, false, false, undefined, undefined, NaN, NaN]

1.Set()+Array.from()

Set方法是最简单的方法,因为Set只存储唯一值。

  • Set对象:是值的集合,你可以按照插入的顺序迭代它的元素。 Set中的元素只会出现一次,即Set中的元素是唯一的。
  • Array.from() 方法:对一个类似数组或可迭代对象创建一个新的,浅拷贝的数组实例。
const result = Array.from(new Set(arr))
console.log(result) // [ 1, 2, 'abc', true, false, undefined, NaN ]

注意

  • 以上去重方式对NaN和undefined类型去重也是有效的,是因为NaN和undefined都可以被存储在Set中,
  • NaN之间被视为相同的值(尽管在js中:NaN !== NaN)。

2.filter() + indexOf()

filter方法会对满足条件的元素存放到一个新数组中,结合indexOf方法进行判断。

  • filter() 方法:会创建一个新数组,其包含通过所提供函数实现的测试的所有元素。
function removeDuplicate(arr) {
  return arr.filter((item, index) => {
    return arr.indexOf(item) === index
  })
}

const result = removeDuplicate(arr)
console.log(result) // [ 1, 2, 'abc', true, false, undefined ]

注意

  • 这里的输出结果中不包含NaN,是因为indexOf()无法对NaN进行判断,即arr.indexOf(item) === index返回结果为false。(测试如下👇👇👇)
const testArr = [1, 'a', NaN]
console.log(testArr.indexOf(NaN)) // -1

3.for 嵌套 for,splice 去重

利用Object.assign(), 第一个参数必须是空对象

function unique(arr){            
        for(var i=0; i<arr.length; i++){
            for(var j=i+1; j<arr.length; j++){
                if(arr[i]==arr[j]){         //第一个等同于第二个,splice方法删除第二个
                    arr.splice(j,1);
                    j--;
                }
            }
        }
return arr;
}
var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
    console.log(unique(arr))
    //[1, "true", 15, false, undefined, NaN, NaN, "NaN", "a", {…}, {…}]     //NaN和{}没有去重,两个null直接消失了

双层循环,外层循环元素,内层循环时比较值。值相同时,则删去这个值。

4.利用Map()

Map对象是JavaScript提供的一种数据结构,结构为键值对形式,将数组元素作为map的键存入,然后结合has()set()方法判断键是否重复。

  function removeDuplicate(arr) {
  const map = new Map()
  const newArr = []

  arr.forEach(item => {
    if (!map.has(item)) { // has()用于判断map是否包为item的属性值
      map.set(item, true) // 使用set()将item设置到map中,并设置其属性值为true
      newArr.push(item)
    }
  })
  return newArr
}

const result = removeDuplicate(arr)
console.log(result) // [ 1, 2, 'abc', true, false, undefined, NaN ]

5.利用includes

function unique(arr) {
    if (!Array.isArray(arr)) {
        console.log('type error!')
        return
    }
    var array =[];
    for(var i = 0; i < arr.length; i++) {
            if( !array.includes( arr[i]) ) {//includes 检测数组是否有某个值
                    array.push(arr[i]);
              }
    }
    return array
}
var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
    console.log(unique(arr))
    //[1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {…}, {…}]     //{}没有去重

实际开发问题解决

首先我们来看看后端返回的数据,我们需要将数据的键值获取到,然后渲染到相应的小标签上。
在这里插入图片描述
下图绿色的标签即为渲染上去的效果,至于为什么只有两个被渲染了,原因很简单,因为加了某些限制条件,所以第三条数据被筛选掉了。
在这里插入图片描述

1.采用Object.keys()获取键值

在之前的文章中,我们讲过如何获取到数组对象的键值。

JavaScript获取数组对象里面的键(key)和值(value)

在实际代码中,我们这样解决:👇👇👇
在这里插入图片描述
于是轻松拿到了键值
在这里插入图片描述

2.filter() indexOf()筛选有效数据

这里我们拿到的键值并不全是有效值,因为涉及到有的数据不满足条件,所以我们要进行下一步过滤操作。
在这里插入图片描述

// 筛选出有效的数据
          tagOldList.filter(item => {
            contentData[item].filter((itemitem: { issueState: number; }) => {
              if(itemitem.issueState != 0 ) {
                tagArr.push(item)
              }
            })
          })

筛选过后的结果如下:
在这里插入图片描述
我们不难发现,筛选过后的结果有很多重复的元素,因为在对数据进行筛选时使用了push方法,导致很多重复的元素都被装进了数组当中,所以我们需要对数组进行相同元素合并。

3.Set() Array.from()数组去重

在这里插入图片描述

 tagList = Array.from(new Set(tagArr))

去重之后的效果如下:👇👇
在这里插入图片描述
此时,我们拿到了有效且不重复的数据。


以上就是关于实现数组查重的常见方法分享,相信看完这篇文章的小伙伴们一定能运用这些方法在项目开发中。当然,可能有不足的地方,欢迎大家在评论区留言指正!

下期文章将介绍JS截取数组和字符串的相关内容~
感兴趣的小伙伴可以订阅本专栏,方便后续了解学习~
觉得这篇文章有用的小伙伴们可以点赞➕收藏➕关注哦~

在这里插入图片描述

  • 3
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Dorable_Wander

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值