JavaScript数组去重的6个方法

在前端开发中,我们经常需要处理数组去重的问题。本文将介绍JavaScript中常用的6种去重方法,包括ES6及之前的实现方式,并提供每种方法的优缺点和适用场景。

1. 使用 Set

ES6引入了Set数据结构,可以用来去重一个数组。Set会自动忽略重复的值,只保留唯一的元素。

----- --- - --- -- -- -- -- -- ---
----- --------- - ------- ----------
----------------------- -- --- -- -- -- --

优点:代码简洁易懂,性能较好。

缺点:无法去重对象等非基本数据类型。

适用场景:数据类型为基本类型时使用。

2. 使用 filter

利用filter方法和indexOf方法对数组进行去重:

----- --- - --- -- -- -- -- -- ---
----- --------- - ----------------- ------ -- -
  ------ ----------------- --- ------
---
----------------------- -- --- -- -- -- --

优点:可根据需求扩展过滤条件。

缺点:性能不如Set。

适用场景:数据量较小的情况下使用。

3. 使用 reduce

reduce()方法遍历数组,将每个元素转换为一个累加器值。我们可以通过判断计数器中是否已存在该元素,实现数组去重:

----- --- - --- -- -- -- -- -- ---
----- --------- - ---------------- ---- -- -
  -- -------------------- -
    --------------
  -
  ------ ----
-- ----
----------------------- -- --- -- -- -- --

优点:可根据需求扩展过滤条件。

缺点:性能不如Set。

适用场景:数据量较小的情况下使用。

4. 使用 Map

Map是一种键值对的集合,可以通过key来区分不同的元素。我们可以利用Map的特性进行去重:

----- --- - --- -- -- -- -- -- ---
----- --- - --- ------
----- --------- - ---
---------------- -- -
  -- ---------------- -
    ------------- ------
    ---------------------
  -
---
----------------------- -- --- -- -- -- --

优点:可根据需求扩展过滤条件。

缺点:性能不如Set。

适用场景:数据类型为非基本类型时使用。

5. 使用 includes

includes()方法返回一个布尔值,表示某个数组是否包含给定的值。我们可以遍历原数组,在新数组中检查是否已经包含该元素,实现去重:

----- --- - --- -- -- -- -- -- ---
----- --------- - ---
---------------- -- -
  -- --------------------------- -
    ---------------------
  -
---
----------------------- -- --- -- -- -- --

优点:代码简单易懂。

缺点:性能不如Set。

适用场景:数据量较小的情况下使用。

6. 使用双重循环

最基本的方法是使用两层循环,比较每个元素是否与其他元素相同,如果不同,则将其加入新数组中:

----- --- - --- -- -- -- -- -- ---
----- --------- - ---
--- ---- - - -- - - ----------- ---- -

--------------------------------------------------------- ----------
-----------------------------------------------------------------------------------
  

猜你喜欢

  • Javascript同时声明一连串(多个)变量的方法

    Javascript同时声明一连串变量的方法 在Javascript中,我们经常需要声明变量来存储数据。有时候我们需要一次性声明多个变量,这时候可以使用同时声明一连串变量的方法。

    8 年前
  • 微信小程序技巧之show内容展示,上传文件编码问题

    微信小程序技巧之show内容展示和上传文件编码问题 在微信小程序开发中,展示内容和上传文件是很常见的两个功能。在实际开发中,我们可能会遇到一些问题,例如内容展示不完整或者上传的文件乱码等。

    8 年前
  • 微信小程序侧边栏滑动特效(左右滑动)

    微信小程序侧边栏滑动特效(左右滑动) 微信小程序是一种快速开发跨平台应用的工具,它提供了丰富的组件和API接口。在实际开发中,我们经常需要实现各种UI特效,其中侧边栏滑动效果是比较常见的一种。

    8 年前
  • 详解微信小程序 wx.uploadFile 的编码坑

    在开发微信小程序时,我们经常会使用 wx.uploadFile 方法来上传文件。然而,在使用该方法进行文件上传时,我们可能会遇到一些编码方面的问题,导致文件上传失败或者出现乱码等问题。

    8 年前
  • JavaScript常用正则函数用法示例

    正则表达式是前端开发中十分重要的一部分,可以用于匹配和处理各种文本内容。JavaScript作为前端主流语言,提供了许多内置的正则函数,下面将介绍其中常用的几个函数及其用法示例。

    8 年前
  • js 颜色选择插件

    JS颜色选择插件 在前端开发过程中,颜色选择功能是一个必不可少的组件。为了提高用户体验和设计效率,我们可以使用JavaScript编写一个颜色选择插件。本文将会介绍如何编写一个简单但实用的JS颜色选择...

    8 年前
  • Node.js Express 框架 POST方法详解

    在Web开发中,使用POST方法是很常见的操作。 在Node.js的Express框架中也提供了对POST方法的支持,下面我们来详细介绍一下。 什么是POST方法? POST方法是HTTP协议中一种请...

    8 年前
  • JavaScript常用正则验证函数实例小结【年龄,数字,Email,手机,URL,日期等】

    JavaScript常用正则验证函数实例小结 在前端开发中,表单数据的验证是非常重要的一环。通过使用 JavaScript 正则表达式,可以方便地验证输入内容是否符合规定格式。

    8 年前
  • JS复制对应id的内容到粘贴板(Ctrl+C效果)

    JS复制对应id的内容到粘贴板 在前端开发中,经常会遇到需要将某个页面元素的内容复制到剪贴板的情况,比如用户点击一个按钮后需要将表单中的某个字段复制到剪贴板,以便用户可以方便地将其粘贴到其他应用程序中...

    8 年前
  • 浅谈javascript的闭包

    浅谈JavaScript的闭包 JavaScript中的闭包是一个广为人知但也常被误解的概念。本文将深入探讨什么是闭包、它的优缺点以及如何使用它来提高代码的可读性和性能。

    8 年前
  • jquery easyui DataGrid简单示例

    jQuery EasyUI DataGrid简单示例 在前端开发中,我们经常会用到表格展示数据的场景。而jQuery EasyUI是一个基于jQuery的UI组件库,提供了丰富易用的组件,其中包括了D...

    8 年前
  • ajax分页效果(bootstrap模态框)

    Ajax分页效果(Bootstrap模态框) 在Web开发中,分页是一个常见的需求。Ajax分页可以提供更好的用户体验,因为页面不需要重新加载。而使用Bootstrap模态框可以让分页更加美观和易于操...

    8 年前
  • 用nodejs搭建websocket服务器

    用 Node.js 搭建 WebSocket 服务器 在 Web 应用程序中,WebSocket 是一种用于实现双向通信的通信协议。与传统的 HTTP 请求-响应协议不同,WebSocket 允许客户...

    8 年前
  • 微信小程序开发的四十个技术窍门总结(推荐)

    微信小程序开发的四十个技术窍门总结 微信小程序是一种轻量级应用,适用于快速搭建简单应用,同时也提供了丰富的API和组件库,以及完善的调试和部署工具。本文总结了40个微信小程序开发的技巧和窍门,旨在帮助...

    8 年前
  • JavaScript中动态向表格添加数据

    JavaScript动态向表格添加数据的实现方法 在前端开发中,我们经常需要将数据以表格形式呈现在网页上。而有时候这些数据是需要不断更新,比如实时股票行情等。此时,我们就需要使用JavaScript来...

    8 年前
  • javascript 正则表达式去空行方法

    JavaScript 正则表达式去空行方法 在前端开发中,我们经常需要处理文本数据,其中包含了各种格式的换行符和空白字符,例如空行。这些无用的空行会给我们的代码和视觉效果带来不必要的干扰。

    8 年前
  • AngularJS实现使用路由切换视图的方法

    在前端开发中,使用路由切换视图是非常常见的需求。AngularJS作为一款流行的JavaScript框架,提供了强大的路由功能,使得切换视图变得十分简单。 路由基础 在AngularJS中,路由通过n...

    8 年前
  • bootstrap table之通用方法( 时间控件,导出,动态下拉框, 表单验证 ,选中与获取信息)代码分享

    Bootstrap Table通用方法 Bootstrap Table是一款基于jQuery和Bootstrap框架的强大表格插件。它提供了丰富的功能和易于使用的API,可以帮助我们快速地创建美观且高...

    8 年前
  • JavaScript解析JSON格式数据的方法示例

    在前端开发中,经常需要将服务端返回的JSON格式数据进行解析,以便在页面上进行展示或者对数据进行操作。本文将分享如何使用JavaScript解析JSON格式数据的方法,包括基础语法、深度解析和使用建议...

    8 年前
  • input获取焦点时底部菜单被顶上来问题的解决办法

    Input获取焦点时底部菜单被顶上来问题的解决办法 在移动端开发中,经常会遇到用户输入表单时,底部固定的菜单被软键盘顶起来的问题。这不仅影响了用户体验,也给开发带来了一些困扰。

    8 年前

相关推荐

    暂无文章