当前位置: 首页 > news >正文

JS数组或数组对象去重常用方法

数组去重有许多种方法,下面列举几种常见方法

    • 数组去重
    • 数组对象去重

数组去重

  1. 使用 Set:将数组转化为 Set 对象,去重后再转化回数组,Set 会自动去重
const arr = [1, 2, 3, 2, 1, 4]
const newArr = [...new Set(arr)]
console.log(newArr) // [1, 2, 3, 4]
  1. 使用 filter:遍历数组,对每个元素判断是否在新数组中出现过。
const arr = [1, 2, 3, 2, 1, 4]
const newArr= arr.filter((item, index) => {return arr.indexOf(item) === index
})
console.log(newArr) // [1, 2, 3, 4]
  1. 使用 reduce:遍历数组,对每个元素判断是否在新数组中出现过,如果没有则将其添加到新数组中。
const arr = [1, 2, 3, 2, 1, 4]
const newArr= arr.reduce((acc, cur) => {if (!acc.includes(cur)) {acc.push(cur)}return acc
}, [])
console.log(newArr) // [1, 2, 3, 4]
  1. 使用 Map:遍历数组,将每个元素作为 key 存储到 Map 中,去重后再转化回数组。
const arr = [1, 2, 3, 2, 1, 4]
const map = new Map()
arr.forEach((item) => {map.set(item, true)
})
const newArr= Array.from(map.keys())
console.log(newArr) // [1, 2, 3, 4]

需要注意的是,以上方法都无法去重包含对象、数组等引用类型的元素的数组,需要使用其他方法实现。另外,以上方法去重后的数组顺序可能与原数组不同,如果需要保持顺序可以使用其他方法,比如通过遍历原数组将不重复的元素依次添加到新数组的尾部。

数组对象去重

  1. 使用 Set :Set 是 ES6 中新增的一种数据结构,它类似于数组,但是成员的值都是唯一的,可以用来去重。我们可以使用 Set 来去重数组对象,然后再将结果转换为数组。
const arr = [{ id: 1, name: 'AAAA' },{ id: 2, name: 'BBBB' },{ id: 1, name: 'AAAA' },{ id: 3, name: 'CCCC' }
];const result = Array.from(new Set(arr.map(JSON.stringify)), JSON.parse);
console.log(result); // [{ id: 1, name: 'AAAA' }, { id: 2, name: 'BBBB' }, { id: 3, name: 'CCCC' }]
  1. 使用 reduce :我们也可以使用 reduce 方法进行去重,具体步骤如下:
    · 遍历数组中的每一个元素;
    · 对于每一个元素,判断它是否已经出现过(使用 Array.prototype.findIndex() 判断);
    · 如果没有出现过,就将它添加到结果数组中;
const arr = [{ id: 1, name: 'AAAA' },{ id: 2, name: 'BBBB' },{ id: 1, name: 'AAAA' },{ id: 3, name: 'CCCC' }
]const result = arr.reduce((acc, curr) => {const index = acc.findIndex((item) => item.id === curr.id)if (index < 0) {acc.push(curr)}return acc
}, [])console.log(result) // [{ id: 1, name: 'AAAA' }, { id: 2, name: 'BBBB' }, { id: 3, name: 'CCCC' }]
  1. 使用 Map : Map 也可以用来去重数组对象,具体步骤如下:
    · 遍历数组中的每一个元素;
    · 对于每一个元素,判断它是否已经出现过(使用 Map.has() 判断);
    · 如果没有出现过,就将它添加到结果数组中;
const arr = [{ id: 1, name: 'AAAA' },{ id: 2, name: 'BBBB' },{ id: 1, name: 'AAAA' },{ id: 3, name: 'CCCC' }
]const map = new Map()
const result = []for (const item of arr) {if (!map.has(item.id)) {map.set(item.id, true)result.push(item)}
}console.log(result) // [{ id: 1, name: 'AAAA' }, { id: 2, name: 'BBBB' }, { id: 3, name: 'CCCC' }]
http://www.lryc.cn/news/192271.html

相关文章:

  • allure测试报告生成逻辑--解决在Jenkins里打开allure报告页面后空白显示无数据问题(以window环境为例)
  • 基于JAYA优化的BP神经网络(分类应用) - 附代码
  • JavaScript进阶(二十六):ES各版本特性详解
  • 排序算法-快速排序法(QuickSort)
  • Python 简介
  • grafana api创建dashboard 记录
  • 局域网上IP多播与IP单播关于MAC地址的区别
  • 三数之和[中等]
  • 基于天牛须优化的BP神经网络(分类应用) - 附代码
  • 渗透波菜网站
  • Spring Boot:Dao层-实例介绍
  • 接口测试入门:深入理解接口测试!
  • Redis微服务架构
  • 【C++】 局部对象,引用返回
  • 线性代数中涉及到的matlab命令-第二章:矩阵及其运算
  • 计算机毕业设计选什么题目好?springboot 美食推荐系统
  • 爆肝整理,Jmeter接口性能测试-跨线程调用变量实操(超详细)
  • Maven导入程序包jakarta.servlet,但显示不存在
  • es6(二)——常用es6说明
  • 经典垃圾回收器
  • 台达DOP-B07S410触摸屏出现HMI no response无法上传的解决办法
  • [资源推荐] 复旦大学张奇老师科研分享
  • C++数位动态规划算法:统计整数数目
  • ip 网段设置 --chatGPT
  • 使用JMeter进行接口测试教程
  • 文本生成解码策略
  • 华为数通方向HCIP-DataCom H12-831题库(单选题:221-240)
  • AttributeError: module ‘hanlp.utils.rules‘ has no attribute ‘tokenize_english‘
  • 苍穹外卖(四) AOP切面公共字段自动填充及文件上传
  • vue-cli + vue3 项目 ios 苹果手机白屏问题