javascript数组去重方法汇总

yizhihongxing

JavaScript数组去重方法汇总

在JavaScript中,数组是一种非常重要的数据类型,经常在实际的开发中用来存储一系列数据。但是,有时候我们需要对数组进行去重操作,即只保留数组中的不重复元素。本文将介绍几种常用的JavaScript数组去重方法。

1.使用Set对象

使用ES6中新增的Set对象可以非常方便地对数组进行去重。Set对象中的所有元素都是唯一的,可以保证去重后的数组中不会有重复元素。

示例代码如下:

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

上述代码中,先定义了一个包含重复元素的数组arr,然后通过...运算符和Set对象,将数组去重后得到不重复元素的数组uniqueArr,并输出到控制台。

2.使用Array.prototype.filter()

使用Array.prototype.filter()方法可以比较简单地实现数组去重操作。该方法会返回一个新的、根据指定条件过滤后的数组,可以根据数组的indexOf方法来过滤掉重复元素。

示例代码如下:

let arr = [1, 2, 3, 2, 1];
let uniqueArr = arr.filter((item, index, arr) => {
  return arr.indexOf(item) === index;
});
console.log(uniqueArr); // [1, 2, 3]

上述代码中,filter()方法接收一个回调函数作为参数,该回调函数中的三个参数分别表示当前元素、当前元素的索引和当前数组。通过对当前元素在数组中第一次出现的位置进行比较,可以过滤掉重复元素,最终得到去重后的数组uniqueArr,并输出到控制台。

3.使用for循环嵌套比较

当数组中包含的元素不是基本类型(如对象等)时,上述方法不能实现去重。此时,可以使用for循环嵌套比较的方法来实现数组去重。遍历原数组,将每个元素与其后面的所有元素依次进行比较,如果重复则将其剔除。

示例代码如下:

let arr = [1, 2, 3, { name: 'Tom' }, { name: 'Tom' }, 1];
let uniqueArr = [];
for (let i = 0; i < arr.length; i++) {
  for (let j = i + 1; j < arr.length; j++) {
    if (arr[i] === arr[j]) {
      j = ++i;
    }
  }
  uniqueArr.push(arr[i]);
}
console.log(uniqueArr); // [1, 2, 3, { name: 'Tom' }]

上述代码中,先定义了一个包含重复元素和对象的数组arr,然后使用for循环嵌套比较的方法去除数组中的重复元素,并将去重后的元素添加到uniqueArr数组中,最终输出到控制台。

结语

本文介绍了几种常用的JavaScript数组去重方法,包括使用Set对象、Array.prototype.filter()方法以及for循环嵌套比较的方法。对于不同的情况,可以选择不同的去重方法来实现需求。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:javascript数组去重方法汇总 - Python技术站

(0)
上一篇 2023年5月27日
下一篇 2023年5月27日

相关文章

  • mockjs,json-server一起搭建前端通用的数据模拟框架教程

    搭建前端数据模拟框架可以帮助我们在开发前端页面时,模拟后端数据库返回的数据,提高开发效率。本文将详细讲解如何使用mockjs和json-server搭建前端通用的数据模拟框架。 1. 安装mockjs和json-server 首先,在项目根目录下安装mockjs和json-server: npm install mockjs json-server –sa…

    JavaScript 2023年5月27日
    00
  • 国庆节到了,利用JS实现一个生成国庆风头像的小工具 详解实现过程

    下面提供一份详细的攻略,分为以下几个部分。 实现效果 实现一个生成国庆风头像的小工具,将用户输入的头像图片加上国旗和五角星等元素,并生成新的头像图片。 实现过程 准备工作 首先,我们需要准备一些素材,如国旗图片和五角星图片,用于后面合成头像。可以在网络上下载这些图片进行使用。然后,我们需要引入canvas标签,因为我们要使用canvas来进行头像的合成。这里…

    JavaScript 2023年6月11日
    00
  • Java使用正则表达式匹配获取链接地址的方法示例

    下面是“Java使用正则表达式匹配获取链接地址的方法示例”的详细攻略: 1. 简介 在HTML页面中,链接地址是一个常见的元素。使用正则表达式可以快速地匹配出所有链接地址或者特定类型的链接地址。Java中的正则表达式使用Pattern和Matcher类进行实现。 2. 获取网页源代码 在Java程序中,获取网页源代码可以使用Java中自带的URLConnec…

    JavaScript 2023年6月10日
    00
  • JavaScript关于提高网站性能的几点建议(一)

    下面是详细讲解 “JavaScript关于提高网站性能的几点建议(一)” 的完整攻略: 1. 使用事件委托 当我们需要在多个元素上绑定相同的事件,传统的做法是给每个元素都绑定一遍,这样就会导致页面加载过慢,影响用户体验。使用事件委托可以解决这个问题,它会将事件绑定到元素的父元素上,当子元素触发事件时,事件会冒泡到父元素,再去执行绑定的事件处理函数。 下面是一…

    JavaScript 2023年5月27日
    00
  • 浅谈JavaScript宏任务和微任务执行顺序

    浅谈JavaScript宏任务和微任务执行顺序 在 JavaScript 中,任务被分为 宏任务(macrotask)和 微任务(microtask)。而在 JavaScript 中,事件循环(event loop)来负责管理和执行这些任务。 宏任务(macrotask) 宏任务是 JavaScript 中较为常见的任务类型,包括以下几种: 脚本本身; 用户…

    JavaScript 2023年6月11日
    00
  • JS中2种定时器的使用及清除的实现

    JS中有两种定时器,分别是setInterval()和setTimeout(),这两种定时器都有其特殊的用处。下面我将为你详细讲解这两种定时器的使用方法和如何清除定时器。 setInterval()定时器 setInterval() 根据指定的周期(以毫秒为单位)来调度一个函数,函数会按照指定的周期被周期性地执行。setInterval函数接受两个参数——第…

    JavaScript 2023年6月11日
    00
  • javascript实现的多个层切换效果通用函数实例

    接下来我会详细讲解“javascript实现的多个层切换效果通用函数实例”的完整攻略,包括实现思路、代码实现和示例说明。 实现思路 本例中,我们使用 JavaScript 实现多个层(div)之间的切换效果。我们将所有的层使用 CSS 定位,每次切换时修改对应的层的 z-index 属性为最高,其他层的 z-index 属性为较低。同时,也需要使用 Java…

    JavaScript 2023年6月11日
    00
  • vue-router的使用方法及含参数的配置方法

    准备工作:使用vue-cli创建一个vue项目,安装vue-router。安装命令: npm install vue-router –save。 一、常规路由的使用方法 1. 在router目录下创建router.js文件 该文件主要配置路由相关信息,导出一个Router实例。 代码如下: import Vue from ‘vue’; import Rou…

    JavaScript 2023年6月11日
    00
合作推广
合作推广
分享本页
返回顶部