史上最全JavaScript数组去重的十种方法(推荐)

下面是对于“史上最全JavaScript数组去重的十种方法(推荐)”这篇文章的详细讲解。

1. 引言

文章介绍了在JavaScript中使用十种方法对数组进行去重的详细解析,旨在让读者学会如何在实际开发中解决数组去重问题。

2. 数组去重方法

2.1 使用Set

使用Set可以很方便地对数组进行去重,因为Set内部的元素是唯一的,所以会自动去除重复元素。

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

2.2 使用indexOf

使用indexOf可以找出一个元素在数组中第一次出现的位置,因此遍历数组,对于元素第一次出现的位置保留,后续出现的则忽略。

const arr = [1, 2, 2, 3, 3, 4, 5];
const uniqueArr = [];
for (let i = 0; i < arr.length; i++) {
  if (uniqueArr.indexOf(arr[i]) === -1) {
    uniqueArr.push(arr[i]);
  }
}
console.log(uniqueArr); // [1, 2, 3, 4, 5]

2.3 使用includes

includes方法与indexOf类似,都是判断元素是否在数组中,但是includes返回的是true或false,可以更直观地进行判断。

const arr = [1, 2, 2, 3, 3, 4, 5];
const uniqueArr = [];
for (let i = 0; i < arr.length; i++) {
  if (!uniqueArr.includes(arr[i])) {
    uniqueArr.push(arr[i]);
  }
}
console.log(uniqueArr); // [1, 2, 3, 4, 5]

2.4 使用filter

使用filter可以过滤出符合条件的元素组成新的数组,结合indexOf可以实现数组去重。

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

2.5 使用reduce

reduce方法可以通过累加器去除重复元素。

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

2.6 使用Map

使用Map也可以实现数组去重,因为它内部存储的是键值对,所以重复的元素会被自动去除。

const arr = [1, 2, 2, 3, 3, 4, 5];
const map = new Map();
const uniqueArr = [];
for (let i = 0; i < arr.length; i++) {
  if (!map.has(arr[i])) {
    map.set(arr[i], true);
    uniqueArr.push(arr[i]);
  }
}
console.log(uniqueArr); // [1, 2, 3, 4, 5]

2.7 使用递归

使用递归可以进行数组去重,每次取出一个元素,去掉之后的重复的元素组成新的数组,然后继续进行去重操作。

const arr = [1, 2, 2, 3, 3, 4, 5];
function unique(arr) {
  if (arr.length === 1) {
    return arr;
  }
  const first = arr[0];
  const rest = unique(arr.slice(1));
  if (rest.includes(first)) {
    return rest;
  } else {
    return [first, ...rest];
  }
}
console.log(unique(arr)); // [1, 2, 3, 4, 5]

2.8 使用双重循环

使用双重循环可以对数组进行去重,外层循环遍历每一个元素,内层循环判断是否有相同的元素。

const arr = [1, 2, 2, 3, 3, 4, 5];
const uniqueArr = [];
for (let i = 0; i < arr.length; i++) {
  let isDuplicate = false;
  for (let j = i + 1; j < arr.length; j++) {
    if (arr[i] === arr[j]) {
      isDuplicate = true;
      break;
    }
  }
  if (!isDuplicate) {
    uniqueArr.push(arr[i]);
  }
}
console.log(uniqueArr); // [1, 2, 3, 4, 5]

2.9 使用hash表

使用hash表可以对数组进行去重,遍历数组时,将元素存储在hash表中,并记录是否重复出现。

const arr = [1, 2, 2, 3, 3, 4, 5];
const uniqueArr = [];
const hashTable = {};
for (let i = 0; i < arr.length; i++) {
  if (!hashTable[arr[i]]) {
    hashTable[arr[i]] = true;
    uniqueArr.push(arr[i]);
  }
}
console.log(uniqueArr); // [1, 2, 3, 4, 5]

2.10 使用ES6 Map和Set

使用ES6的Map和Set可以实现高效的数组去重。

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

const map = new Map();
const uniqueArr2 = [];
for (let i = 0; i < arr.length; i++) {
  if (!map.has(arr[i])) {
    map.set(arr[i], true);
    uniqueArr2.push(arr[i]);
  }
}
console.log(uniqueArr2); // [1, 2, 3, 4, 5]

3. 总结

通过对十种数组去重方法的详细讲解和示例说明,读者可以更加深入地理解各种代码实现的方式和注意事项,同时也能更好地结合实际场景进行选择和使用。数组去重是JavaScript开发中经常遇到的问题,希望本文能为读者在实际开发中解决问题提供帮助。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:史上最全JavaScript数组去重的十种方法(推荐) - Python技术站

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

相关文章

  • 谈谈我对JavaScript中typeof和instanceof的深入理解

    我将为你讲解“谈谈我对JavaScript中typeof和instanceof的深入理解”的完整攻略。首先我们要了解typeof和instanceof这两个操作符的意义和用法,然后结合示例进行说明。 typeof操作符 typeof是一个JavaScript内置的操作符,用于检测变量的数据类型。它返回一个字符串表示变量的数据类型。 语法 typeof 操作数…

    JavaScript 2023年6月10日
    00
  • 详解JavaScript常用的Hook脚本

    详解JavaScript常用的Hook脚本 什么是Hook脚本? 在编程中,Hook脚本指的是通过修改或者扩展程序中已定义的功能来实现新的功能或者增强原有功能的一种技术手段。JavaScript常用的Hook脚本主要是基于前端页面中的DOM元素和事件实现的。 Hook脚本的实现方法 Hook脚本的实现方法主要有两种:一种是利用浏览器提供的API来操作DOM元…

    JavaScript 2023年6月10日
    00
  • 详解Element-UI中上传的文件前端处理

    下面就是详解 “Element-UI中上传的文件前端处理” 的完整攻略。 一、前言 Element-UI 是饿了么前端团队开发并开源的一款基于 Vue.js 2.0 的 UI 组件库,拥有非常丰富的组件和样式,其中包含了上传文件的组件。然而,如果我们需要自定义上传文件前的处理流程,怎么做呢?本文将详细介绍 Element-UI 中上传文件前端处理的方法。 二…

    JavaScript 2023年6月10日
    00
  • jquery validate和jquery form 插件组合实现验证表单后AJAX提交

    下面我将为您详细讲解如何使用jquery validate和jquery form插件完成验证表单后的AJAX提交。 步骤一:引入jQuery及相关插件 首先,在页面中引入jQuery和相关插件文件,这里需要演示的插件是jquery validate和jquery form,引用代码如下: <script src="https://code.…

    JavaScript 2023年6月10日
    00
  • javascript实现数字时钟特效

    下面是实现数字时钟特效的完整攻略。 一、准备工作 在开始实现之前,我们需要先搭建一个简单的HTML框架,并且引入jQuery库和一个字体库。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &l…

    JavaScript 2023年5月27日
    00
  • js验证身份证号码记录的方法

    下面我将为你详细讲解 “js验证身份证号码记录的方法” 的完整攻略。 一、验证身份证号码的规则 目前,中国大陆身份证号码的规则如下: 身份证号码共18位,前17位为数字,最后一位为数字或字母X。 第1-6位为地址码,表示身份证持有人的籍贯地。 第7-14位为出生日期码,表示身份证持有人的出生年月日。 第15-17位为顺序码,表示同一地址码的多个人员的顺序区分…

    JavaScript 2023年6月10日
    00
  • js与jquery回车提交的方法

    下面详细讲解js与jQuery回车提交的方法的完整攻略。 什么是回车提交 回车提交是指用户在输入框内输入内容后按下键盘上的回车键,就会自动提交表单或执行相应的操作,而不需要再点击提交按钮。在表单或查询页面中,这是一种很方便的操作方式。 JavaScript回车提交 Javascript可以通过监听页面上的键盘操作,并且每次键盘按下事件被触发时执行代码。利用这…

    JavaScript 2023年6月11日
    00
  • javascript获取时间戳的5种方法详解

    JavaScript获取时间戳的5种方法详解 时间戳是指一个时间点与1970年1月1日的间隔时间,通常是表示 Unix 时间或 POSIX 时间,可以用于表示距离某一时间点的时间差。获取时间戳在 JavaScript 开发中是一个比较常见的需求,下面将详细介绍获取时间戳的 5 种方法。 方法一:使用JS内置Date对象的getTime方法 Date 对象的 …

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