如何利用es6去重

简介: 讲述了es6中常见的几种去重方式

以下是三种方法从数组里去重,并且返回唯一的值。我最喜欢的方式是使用Set,因为它是最短最简单的。

const array = [5, 2, 4, 5, 3];
console.log([...new Set(array)])
console.log(array.filter((item, index) => array.indexOf(item) === index))
console.log(array.reduce((unique, item) => unique.includes(item) ? unique: [...unique, item], []))
// result: [5, 2, 4, 3]

使用Set

让我开始解释Set是什么吧:

Set是由es6引入的一种新的数据对象,由于Set只允许你存储唯一值,所以当传递进去一个数组的时候,它将会移除任何重复的值。

好啦,然我们回到我们的代码中来看下到底都发生了什么。实际上他进行了以下的操作:

  1. 首先,我们创建了新的Set并且把数组当作入参传递了进去,由于Set仅仅允许唯一值,所以所有重复值将会被移除。
  2. 现在重复值已经消失了,我们将会利用...把它重新转为数组。

const array = [5, 2, 4, 5, 3];
const set = new Set(array)
const newArr = [...set]
console.log(newArr)
// result: [5, 2, 4, 3]

使用Array.from()函数来吧Set转为数组

另外呢,你也可以使用Array.from()来吧Set转为数组。

const array = [5, 2, 4, 5, 3];
const set = new Set(array)
const newArr = Array.from(set)
console.log(newArr)
// result: [5, 2, 4, 3]

使用filter

为了理解这个选项,让我们来看看这两个方法都做了什么:indexOf和filter

indexOf()

indexOf()返回我们从数组里找到的第一个元素的索引。

const array = [5, 2, 4, 5, 3];
console.log(array.indexOf(5)) // 0
console.log(array.indexOf(2)) // 1
console.log(array.indexOf(8)) // -1

filter

filter()函数会根据我们提供的条件创建一个新的数组。换一种说法,如果元素通过并且返回true,它将会包含在过滤后的数组中,如果有元素失败并且返回false,那么他就不会包含在过滤后的数组中。

我们逐步看看在每次循环数组的时候都发生了什么。

const array = [5, 2, 4, 5, 3];
array.filter((item, index) => {
console.log(item, index, array.indexOf(item), array.indexOf(item) === index)
return array.indexOf(item) === index
})
//输出
// 5 0 0 true
// 2 1 1 true
// 4 2 2 true
// 5 3 0 false
// 3 4 4 true
上面输出的代码见注释。重复的元素不再于indexOf相匹配,所以在这些情况下,它的结果将会是false并且将不会被包含进过滤后的值当中。

检索重复的值

我们也可以在数组中利用filter()函数来检索重复的值。我们只需要像这样简单的调整下代码:

const array = [5, 2, 4, 5, 3];
array.filter((item, index) => {
console.log(item, index, array.indexOf(item), array.indexOf(item) !== index)
return array.indexOf(item) !== index
})
//输出
// 5 0 0 false
// 2 1 1 false
// 4 2 2 false
// 5 3 0 true
// 3 4 4 false

使用reduce()函数

reduce()函数用于减少数组的元素并根据你传递过去的reducer函数,把他们最终合并到一个最终的数组中,

在这种情况下,我们的reducer()函数我们最终的数组是否包含了这个元素,如果不包含,就吧他放进最终的数组中,反之则跳过这个元素,最后再返回我们最终的元素。

reduce()函数理解起来总是有那么一点费劲,所以呢,咱们现在看下他是怎么运行的。

const array = [5, 2, 4, 5, 3];
array.reduce((unique, item) => {
console.log(item, unique, unique.includes(item), unique.includes(item) ? unique: [...unique, item])
return unique.includes(item) ? unique: [...unique, item]
}, [])
//输出
// 5 [] false [5]
// 2 [5] false [5, 2]
// 4 [5, 2] false [5, 2, 4]
// 5 [5, 2, 4] true [5, 2, 4]
// 3 [5, 2, 4] false [5, 2, 4, 3]

目录
相关文章
|
10天前
|
存储 关系型数据库 分布式数据库
PostgreSQL 18 发布,快来 PolarDB 尝鲜!
PostgreSQL 18 发布,PolarDB for PostgreSQL 全面兼容。新版本支持异步I/O、UUIDv7、虚拟生成列、逻辑复制增强及OAuth认证,显著提升性能与安全。PolarDB-PG 18 支持存算分离架构,融合海量弹性存储与极致计算性能,搭配丰富插件生态,为企业提供高效、稳定、灵活的云数据库解决方案,助力企业数字化转型如虎添翼!
|
8天前
|
存储 人工智能 Java
AI 超级智能体全栈项目阶段二:Prompt 优化技巧与学术分析 AI 应用开发实现上下文联系多轮对话
本文讲解 Prompt 基本概念与 10 个优化技巧,结合学术分析 AI 应用的需求分析、设计方案,介绍 Spring AI 中 ChatClient 及 Advisors 的使用。
389 130
AI 超级智能体全栈项目阶段二:Prompt 优化技巧与学术分析 AI 应用开发实现上下文联系多轮对话
|
3天前
|
存储 安全 前端开发
如何将加密和解密函数应用到实际项目中?
如何将加密和解密函数应用到实际项目中?
197 138
|
9天前
|
人工智能 Java API
AI 超级智能体全栈项目阶段一:AI大模型概述、选型、项目初始化以及基于阿里云灵积模型 Qwen-Plus实现模型接入四种方式(SDK/HTTP/SpringAI/langchain4j)
本文介绍AI大模型的核心概念、分类及开发者学习路径,重点讲解如何选择与接入大模型。项目基于Spring Boot,使用阿里云灵积模型(Qwen-Plus),对比SDK、HTTP、Spring AI和LangChain4j四种接入方式,助力开发者高效构建AI应用。
376 122
AI 超级智能体全栈项目阶段一:AI大模型概述、选型、项目初始化以及基于阿里云灵积模型 Qwen-Plus实现模型接入四种方式(SDK/HTTP/SpringAI/langchain4j)
|
3天前
|
存储 JSON 安全
加密和解密函数的具体实现代码
加密和解密函数的具体实现代码
194 136
|
21天前
|
弹性计算 关系型数据库 微服务
基于 Docker 与 Kubernetes(K3s)的微服务:阿里云生产环境扩容实践
在微服务架构中,如何实现“稳定扩容”与“成本可控”是企业面临的核心挑战。本文结合 Python FastAPI 微服务实战,详解如何基于阿里云基础设施,利用 Docker 封装服务、K3s 实现容器编排,构建生产级微服务架构。内容涵盖容器构建、集群部署、自动扩缩容、可观测性等关键环节,适配阿里云资源特性与服务生态,助力企业打造低成本、高可靠、易扩展的微服务解决方案。
1344 8
|
8天前
|
监控 JavaScript Java
基于大模型技术的反欺诈知识问答系统
随着互联网与金融科技发展,网络欺诈频发,构建高效反欺诈平台成为迫切需求。本文基于Java、Vue.js、Spring Boot与MySQL技术,设计实现集欺诈识别、宣传教育、用户互动于一体的反欺诈系统,提升公众防范意识,助力企业合规与用户权益保护。
|
20天前
|
机器学习/深度学习 人工智能 前端开发
通义DeepResearch全面开源!同步分享可落地的高阶Agent构建方法论
通义研究团队开源发布通义 DeepResearch —— 首个在性能上可与 OpenAI DeepResearch 相媲美、并在多项权威基准测试中取得领先表现的全开源 Web Agent。
1452 87