js如何实现数组去重的常用方法

2023-11-01


⭐ 专栏简介

前端入门之旅:探索Web开发的奇妙世界 记得点击上方或者右侧链接订阅本专栏哦 几何带你启航前端之旅

欢迎来到前端入门之旅!这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发者,这里都将为你提供一个系统而又亲切的学习平台。在这个专栏中,我们将以问答形式每天更新,为大家呈现精选的前端知识点和常见问题解答。通过问答形式,我们希望能够更直接地回应读者们对于前端技术方面的疑问,并且帮助大家逐步建立起一个扎实的基础。无论是HTML、CSS、JavaScript还是各种常用框架和工具,我们将深入浅出地解释概念,并提供实际案例和练习来巩固所学内容。同时,我们也会分享一些实用技巧和最佳实践,帮助你更好地理解并运用前端开发中的各种技术。

在这里插入图片描述

不仅如此,我们还会定期推出一些项目实战教程,让你能够将所学知识应用到实际开发中。通过实际项目的练习,你将能够更好地理解前端开发的工作流程和方法论,并培养自己解决问题和独立开发的能力。我们相信,只有不断积累和实践,才能真正掌握前端开发技术。因此,请准备好迎接挑战,勇敢地踏上这段前端入门之旅!无论你是寻找职业转型、提升技能还是满足个人兴趣,我们都将全力以赴,为你提供最优质的学习资源和支持。让我们一起探索Web开发的奇妙世界吧!加入前端入门之旅,成为一名出色的前端开发者! 让我们启航前端之旅

在 JavaScript 中,有多种方法可以实现数组去重。以下是其中几种常见的方法以及示例:


⭐ 使用 Set(ES6)

ES6 引入了 Set 数据结构,它自动去重数组元素。

const arr = [1, 2, 2, 3, 4, 4, 5];
const uniqueArr = [...new Set(arr)];
console.log(uniqueArr); // [1, 2, 3, 4, 5]

⭐ 使用 filter 和 indexOf

通过遍历原始数组,利用 indexOf 方法检查元素是否已经存在于新数组中。

const arr = [1, 2, 2, 3, 4, 4, 5];
const uniqueArr = arr.filter((value, index, self) => {
  return self.indexOf(value) === index;
});
console.log(uniqueArr); // [1, 2, 3, 4, 5]

⭐ 使用 reduce

使用 reduce 方法遍历原始数组,将不重复的元素添加到新数组。

const arr = [1, 2, 2, 3, 4, 4, 5];
const uniqueArr = arr.reduce((accumulator, currentValue) => {
  if (!accumulator.includes(currentValue)) {
    accumulator.push(currentValue);
  }
  return accumulator;
}, []);
console.log(uniqueArr); // [1, 2, 3, 4, 5]

⭐ 使用对象属性

利用对象属性的唯一性,遍历数组并将元素作为对象属性添加,然后将对象属性提取为数组。

const arr = [1, 2, 2, 3, 4, 4, 5];
const uniqueArr = Object.keys(arr.reduce((obj, value) => {
  obj[value] = true;
  return obj;
}, {}));
console.log(uniqueArr); // ["1", "2", "3", "4", "5"]

⭐ 使用 includes 方法(ES6)

遍历原始数组,检查新数组是否已包含当前元素。

const arr = [1, 2, 2, 3, 4, 4, 5];
const uniqueArr = [];
for (const element of arr) {
  if (!uniqueArr.includes(element)) {
    uniqueArr.push(element);
  }
}
console.log(uniqueArr); // [1, 2, 3, 4, 5]

以上是几种常见的数组去重方法,你可以根据具体情况选择合适的方法来去除数组中的重复元素。在 ES6 中,使用 Set 是最简洁和高效的方法。


⭐ 写在最后

本专栏适用读者比较广泛,适用于前端初学者;或者没有学过前端对前端有兴趣的伙伴,亦或者是后端同学想在面试过程中能够更好的展示自己拓展一些前端小知识点,所以如果你具备了前端的基础跟着本专栏学习,也是可以很大程度帮助你查漏补缺,由于博主本人是自己再做内容输出,如果文中出现有瑕疵的地方各位可以通过主页的左侧联系我,我们一起进步,与此同时也推荐大家几份专栏,有兴趣的伙伴可以订阅一下:除了下方的专栏外大家也可以到我的主页能看到其他的专栏;

前端小游戏(免费)这份专栏将带你进入一个充满创意和乐趣的世界,通过利用HTML、CSS和JavaScript的基础知识,我们将一起搭建各种有趣的页面小游戏。无论你是初学者还是有一些前端开发经验,这个专栏都适合你。我们会从最基础的知识开始,循序渐进地引导你掌握构建页面游戏所需的技能。通过实际案例和练习,你将学会如何运用HTML来构建页面结构,使用CSS来美化游戏界面,并利用JavaScript为游戏添加交互和动态效果。在这个专栏中,我们将涵盖各种类型的小游戏,包括迷宫游戏、打砖块、贪吃蛇、扫雷、计算器、飞机大战、井字游戏、拼图、迷宫等等。每个项目都会以简洁明了的步骤指导你完成搭建过程,并提供详细解释和代码示例。同时,我们也会分享一些优化技巧和最佳实践,帮助你提升页面性能和用户体验。无论你是想寻找一个有趣的项目来锻炼自己的前端技能,还是对页面游戏开发感兴趣,前端小游戏专栏都会成为你的最佳选择。点击订阅前端小游戏专栏

在这里插入图片描述

Vue3通透教程【从零到一】(付费) 欢迎来到Vue3通透教程!这个专栏旨在为大家提供全面的Vue3相关技术知识。如果你有一些Vue2经验,这个专栏都能帮助你掌握Vue3的核心概念和使用方法。我们将从零开始,循序渐进地引导你构建一个完整的Vue应用程序。通过实际案例和练习,你将学会如何使用Vue3的模板语法、组件化开发、状态管理、路由等功能。我们还会介绍一些高级特性,如Composition API和Teleport等,帮助你更好地理解和应用Vue3的新特性。在这个专栏中,我们将以简洁明了的步骤指导你完成每个项目,并提供详细解释和示例代码。同时,我们也会分享一些Vue3开发中常见的问题和解决方案,帮助你克服困难并提升开发效率。无论你是想深入学习Vue3或者需要一个全面的指南来构建前端项目,Vue3通透教程专栏都会成为你不可或缺的资源。点击订阅Vue3通透教程【从零到一】专栏

在这里插入图片描述

TypeScript入门指南(免费) 是一个旨在帮助大家快速入门并掌握TypeScript相关技术的专栏。通过简洁明了的语言和丰富的示例代码,我们将深入讲解TypeScript的基本概念、语法和特性。无论您是初学者还是有一定经验的开发者,都能在这里找到适合自己的学习路径。从类型注解、接口、类等核心特性到模块化开发、工具配置以及与常见前端框架的集成,我们将全面覆盖各个方面。通过阅读本专栏,您将能够提升JavaScript代码的可靠性和可维护性,并为自己的项目提供更好的代码质量和开发效率。让我们一起踏上这个精彩而富有挑战性的TypeScript之旅吧!点击订阅TypeScript入门指南专栏

在这里插入图片描述

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

js如何实现数组去重的常用方法 的相关文章

  • 使用 jQuery 更改父元素样式

    我有下一个 html 设置 div class one div class two a href class three Click a div div 我想更改具有类的元素的背景颜色 one当我点击元素时 three使用 jQuery 这
  • 带换行符的 React/Momentjs 日期格式

    我有一个日期字符串 我想对其进行格式化 其中数字位于月份下 Jul 6 我尝试了几种不同的方法来添加新行
  • MailTo 从 Javascript

    我有一个链接按钮 用于从页面内容构建邮件 从 javascript 启动它而不打开空白窗口或干扰调用它的窗口的最佳方法是什么 function Email var sMailTo mailto var sBody var alSelecte
  • 类型错误:类扩展值未定义不是函数或 null

    尝试创建这些实体时出现以下错误 TypeError Class extends value undefined is not a function or null 我假设这与循环依赖有关 但是在使用表继承和一对多关系时应该如何避免这种情况
  • Eslint 从另一个文件确定全局变量

    我试图以这样的方式设置 ESLint 使其在对实际目标文件进行 linting 之前解析全局声明文件 这样我就不必将所有确实是全局的函数和变量声明为全局 而是让解析器弄清楚 In 一些 模块 js function do something
  • 如何在 DOM 中的每个元素中调用函数,即使它们是动态创建的

    我想对 DOM 上的特定元素调用函数 例如 red css backgroundColor pink 它适用于 DOM 中已经存在的任何元素 但我也希望在动态添加到 DOM 的元素中调用此方法 我尝试过类似的事情 red on functi
  • JQuery datepickers-从开始日期设置结束日期

    使用了两个 Jquery 日期选择器 StartDate 和 EndDate
  • 在随机位置启动 HTML5

    我有一个大约 2 小时长的音轨 我想在我的网站上使用它 我希望它在页面加载时在随机位置开始播放曲目 使用 HTML5 可以吗 我知道您可以使用 element currentTime 函数来获取当前位置 但是如何在完全下载之前获取曲目的总时
  • 水平滚动的表格上的“粘性”标题......完全不可能?

    经过过去几个小时的研究后 我开始认为这是不可能的 即使在最新的浏览器上也是如此 HTML table具有水平滚动的元素 带有 粘性 thead在顶部 作为垂直滚动的周围网页的一部分 这是我的尝试 a height 100px backgro
  • 如何立即启动setInterval循环? [复制]

    这个问题在这里已经有答案了 在一个简单的setInterval setInterval function Do something every 9 seconds 9000 第一个动作将在 9 秒后发生 t 9s 如何强制循环立即执行第一个
  • C# 和 Javascript SHA256 哈希的代码示例

    我有一个在服务器端运行的 C 算法 它对 Base64 编码的字符串进行哈希处理 byte salt Convert FromBase64String serverSalt Step 1 SHA256Managed sha256 new S
  • 检索 css3 缩放元素的宽度/高度

    我正在与 offsetWidth 属性的奇怪之处 我认为 作斗争 这是场景 比方说 我有一个span标签 在我的js中 在某个时刻我执行css3转换 对于这个元素 例如 el set styles transform scale scale
  • ES6继承:使用`super`访问父类的属性

    JavaScript 的super关键字 当我在 Chrome Babel TypeScript 上运行代码时 得到了不同的结果 我的问题是哪个结果是正确的 规范的哪一部分定义了这种行为 下面的代码 class Point getX con
  • webpack中动态加载外部模块失败

    我正在尝试建立以下架构 一个核心 React 应用程序 它具有一些基本功能 并且能够在运行时加载其他 React 组件 这些额外的 React 组件可以按需加载 并且它们在构建核心应用程序时不可用 因此它们不能包含在核心应用程序的捆绑包中
  • Web组件中嵌套槽的内容不可见

    我有一个 Web 组件 它应该接受任意元素来包装其内容 虽然我可以在 Chrome 开发工具中看到插槽已正确分配 但 DOM 中什么也没有出现 以前有人见过这个问题吗 定义 class ExampleParent extends HTMLE
  • 如何为我的整个 Node.js 应用程序使用相同的 MySQL 连接?

    我有一个app js 我从那里运行我的整个应用程序 在 app js 内部 我require许多文件中都有代码 对于每个文件 我都这样做 var mysql require mysql var mclient mysql createCon
  • 尝试使用 Javascript 解决对称差异

    我正在尝试找出对称的解决方案 使用 javascript 完成以下任务的差异 目标 接受未指定数量的数组作为参数 保留数组中数字的原始顺序 不删除单个数组中数字的重复项 删除数组中出现的重复项 因此 例如 如果输入是 1 1 2 6 2 3
  • 以角度访问窗口 TemplateUrl 内的范围

    我的模式有一个 windowTemplateUrl 如下 div class modal fade div class modal dialog div class modal content square btn div div div
  • Chrome 扩展:强制 popup.html 关闭

    我想知道是否可以强制 popup html 关闭 在弹出的 javascript 中 window close
  • 如何在运行脚本之前提交活动单元格中所做的更改? (Google 表格/Google Apps 脚本)

    我正在使用 Google Apps 脚本在 Google 表格中创建提交表单 该表单位于一页上 提交内容被移至第二个隐藏页面 当用户填写表单后 他们按下提交页面上的按钮以激活脚本 我遇到的问题是 当用户填写最后一个单元格然后单击按钮时 输入

随机推荐

  • 关于移动端H5使用xhr上传文件

    首先我是用的是uniapp框架 所以以下内容皆以此未前提 我是第一次用uniapp 所以有些地方也不太熟悉 比如在写h5时 页面上的input的type写成file时页面上没有效果 查看官方文档后知道 需要使用js 插入一个input标签
  • Go语言学习(八)-- Gin入门

    Gin 是一个 Go Golang 编写的轻量级 http web 框架 运行速度非常快 Gin 最擅长的就是 Api 接口的高并发 如果项目的规模不大 业务相对简单 这个时候我们 也推荐您使用 Gin 当某个接口的性能遭到较大挑战的时候
  • js逆向实战案例集目录

    一 js逆向基础篇 js逆向之字体加密 js逆向webpack篇 某电商网站 拼xx js逆向基础篇 某房地产网站 登录 js逆向基础篇 某音乐网站 xx音乐 js逆向之猿人学 反混淆刷题平台第一题 手把手教学 js逆向验证码篇之某程 智能
  • react 创建sass router mobx项目

    尽量不要再vscode中安装依赖推荐使用gitbash 创建项目第一步 基本搭建 git 在创建之前 需要有一个git 仓库 我们之后要把项目搭建到git 中 node版本 查看node 版本 node v v14 15 3 为了保证同步
  • CUDA Vector Add Test 2048x1024

    1 include cuda runtime h CUDAVectorAdd cu 2 include device launch parameters h 3 include IML PrecisionTimer h 4 5 includ
  • 【笔记】Git及Github使用

    目录 Git概述及安装 Git常用命令 设置用户签名 姓名和邮箱地址 gitconfig 初始化本地库 查看本地库状态 本地文件添加到暂存区 提交本地库 形成历史版本 修改文件 历史版本信息 版本穿梭 回溯历史版本 查看当前本地库中所有文件
  • canvas清空画布方法

    1 最简单的方法 由于canvas每当高度或宽度被重设时 画布内容就会被清空 因此可以用以下方法清空 function clearCanvas span style font family none span var c document
  • mysql 存储引擎 原理_【MySQL—原理】体系结构和存储引擎

    在数据库领域中有两个词很容易混淆 这就是 数据库 database 和 实例 instance 作为常见的数据库术语 这两个词的定义如下 数据库 物理操作系统文件或其他形式文件类型的集合 实例 数据库管理程序 MySQL数据库由后台线程以及
  • 【狂神】MySQL - 连表查询 Join On 详解

    1 连表查询详解 市面上有 7 种连表查询 总共归为三大类 左查询 LEFT JOIN 以左表为基准 右查询 RIGHT JOIN 以右表为基准 交叉查询 INNER JOIN 查询两表都有的数据 操作 描述 inner join 如果表中
  • ajax嵌套的场景有哪些,ajax嵌套

    一 ajax嵌套ajax 传说中的嵌套金字塔 以及这种方式只能串联发起ajax请求 function getDataFun ajax url equip rank type GET dataType jsonp success functi
  • Qt之键盘事件无法响应问题

    Qt之键盘事件无法响应问题 概述 代码 over 文末一句话 概述 新公司的加班第一天 在调试公司项目代码时发现个小问题 鼠标 键盘事件都已写好 但是键盘事件无效无法进入断点 接来下去查文档并没有查到相关说明 翻阅百度翻到如下代码 并进行测
  • 配置文件文档

    Tranquilpeak Version 0 5 3 BETA Author Thibaud Lepr tre I STRONGLY recommend you to use a CDN to speed up loading of pag
  • Linux驱动入门(6.1)LED驱动---设备树

    前言 1 在韦东山Linux驱动入门实验班 5 LED驱动 驱动分层和分离 平台总线模型我们已经讲解了如何将驱动程序和硬件程序进行剥离 但是大佬们感觉这样还不行 他们认为要专门弄一个结构存储硬件信息 而不是用c文件存储 于是 大佬们就发明了
  • 数据结构-后序中序

    PTA 后序中序遍历给出先序结果 根据要求给定一棵二叉树的后序遍历和中序遍历结果 输出该树的先序遍历结果 输入格式 positive integer N lt 30 表示树中节点的个数 随之而来的是两行遍历序列 分别对应后序遍历和中序遍历结
  • 手把手教你ubuntu下移植MJPG-streamer

    一 嵌入式视频图像开源库 在嵌入式系统中 常用的视频图像处理开源系统有 luvcview cheese motion mjpg streamer或者ffmpeg 其中 luvcview 基于V4L2 SDL的程序 支持拍照录像 参数调节 代
  • Linux centos 卸载 ceph

    在CentOS上卸载Ceph的操作步骤 1 停止Ceph集群 首先 你需要停止Ceph集群中的所有服务 在每个节点上运行以下命令来停止所有服务 systemctl stop ceph target 2 卸载Ceph软件包 在每个节点上 使用
  • 在1-100中随机生成10个数字并进行排序

    1 生成10以内的数字 可以参考rand 10 2 生成1 10之间的数字 可以参考rand 10 1 3 特定的 要生成a b之间的数字 可以参考rand b a 1 a include
  • CSharp: QuestPDF create pdf file in donet core 6

  • UE4 分屏显示

    比较简单 直接附上蓝图 注意 启动模式选择独立游戏进程启动这样能够在两个屏幕上满屏显示 在UE4 版本上可以实现 不清楚在UE5上实现不了在两个屏幕上满屏显示 有疑惑或者想法这欢迎沟通交流 还要注意设置项目里面的屏幕设置 下面附上简单的分屏
  • js如何实现数组去重的常用方法

    聚沙成塔 每天进步一点点 专栏简介 使用 Set ES6 使用 filter 和 indexOf 使用 reduce 使用对象属性 使用 includes 方法 ES6 写在最后 专栏简介 前端入门之旅 探索Web开发的奇妙世界 记得点击上