js数组去重的11种方法

yizhihongxing

下面是详细讲解“js数组去重的11种方法”的完整攻略。

引言

在JavaScript开发中,常常需要我们对数组进行去重的操作。由于JavaScript本身没有提供去重的方法,开发者需要结合一些技巧和方法来完成这个任务。本文将由浅入深介绍11种JavaScript数组去重的方法,希望对大家有所帮助。

方式一:使用Set类型

Set是一种新的ES6数据类型,它存储的是独一无二的值,可以用来轻松去重。具体代码如下:

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

方式二:使用Map类型

Map是JavaScript中的一种数据结构,它存储键值对,可以用来解决数组去重的问题。具体代码如下:

const arr = [1, 2, 3, 2, 1];
const map = new Map();
const newArr = [];

arr.forEach(item => {
  if (!map.has(item)) {
    map.set(item, true);
    newArr.push(item);
  }
});

console.log(newArr); // [1,2,3]

方式三:使用Object类型

利用对象属性唯一的特性,我们可以使用Object类型进行数组去重。具体代码如下:

const arr = [1, 2, 3, 2, 1];
const obj = {};
const newArr = [];

arr.forEach(item => {
  if (!obj[item]) {
    obj[item] = true;
    newArr.push(item);
  }
});

console.log(newArr); // [1,2,3]

方式四:使用filter方法

使用filter方法可以遍历数组,返回由符合条件元素组成的新数组。具体代码如下:

const arr = [1, 2, 3, 2, 1];
const newArr = arr.filter((item, index, arr) => {
  return arr.indexOf(item) === index;
});

console.log(newArr); // [1,2,3]

方式五:使用reduce方法

使用reduce方法可以遍历数组,返回一个新的累加结果,可以用来进行数组去重。具体代码如下:

const arr = [1, 2, 3, 2, 1];
const newArr = arr.reduce((prev, cur) => prev.includes(cur) ? prev : [...prev, cur], []);

console.log(newArr); // [1,2,3]

方式六:使用for循环

使用for循环可以遍历数组,使用indexOf方法判断当前元素是否已经存在于新的数组中。具体代码如下:

const arr = [1, 2, 3, 2, 1];
const newArr = [];

for (let i = 0; i < arr.length; i++) {
  if (newArr.indexOf(arr[i]) === -1) {
    newArr.push(arr[i]);
  }
}

console.log(newArr); // [1,2,3]

方式七:使用includes方法

使用includes方法判断当前元素是否已经存在于新的数组中,如果不存在则添加到新数组中。具体代码如下:

const arr = [1, 2, 3, 2, 1];
const newArr = [];

arr.forEach(item => {
  if (!newArr.includes(item)) {
    newArr.push(item);
  }
});

console.log(newArr); // [1,2,3]

方式八:使用some方法

使用some方法可以遍历数组,判断是否有一个元素符合条件,可以用来进行数组去重。具体代码如下:

const arr = [1, 2, 3, 2, 1];
const newArr = [];

arr.forEach(item => {
  if (!newArr.some(val => val === item)) {
    newArr.push(item);
  }
});

console.log(newArr); // [1,2,3]

方式九:使用排序去重

使用数组排序可以去除重复元素,具体代码如下:

const arr = [1, 2, 3, 2, 1];
const newArr = [];

arr.sort().forEach((item, index, arr) => {
  if (item !== arr[index - 1]) {
    newArr.push(item);
  }
});

console.log(newArr); // [1,2,3]

方式十:使用集合算法去重

使用集合算法可以将复杂度优化到O(n),具体代码如下:

const arr = [1, 2, 3, 2, 1];
const newArr = Array.from(new Set(arr));

console.log(newArr); // [1,2,3]

方式十一:使用链表

使用链表可以在保证去重效果的同时,避免数组在删除元素时造成的性能问题。具体代码如下:

class Node {
  constructor(data) {
    this.data = data;
    this.next = null;
  }
}

class LinkedList {
  constructor() {
    this.head = null;
    this.tail = null;
  }

  add(data) {
    const node = new Node(data);

    if (!this.head) {
      this.head = node;
      this.tail = node;
    } else if (this.tail.data !== data) {
      this.tail.next = node;
      this.tail = node;
    }

    return this;
  }

  toArray() {
    const arr = [];

    for (let node = this.head; node; node = node.next) {
      arr.push(node.data);
    }

    return arr;
  }
}

const arr = [1, 2, 3, 2, 1];
const list = new LinkedList();
arr.forEach(item => list.add(item));
const newArr = list.toArray();

console.log(newArr); // [1,2,3]

结语

以上就是11种JavaScript数组去重的方法,希望对大家有所帮助。当然,在实际开发中,不同的场景可能需要选择不同的方法,大家可以根据自己的业务需求来选择最合适的方法。

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

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

相关文章

  • javascript 判断中文字符长度的函数代码

    下面是详细的攻略。 1. 需求说明 在实际开发中,有时候需要限制输入框中的字符长度,尤其是中英文混合的情况下,一个中文字符长度应该算比一个英文字符长度大。 因此,需要编写一个 Javascript 函数用来判断字符串中的中文字符长度。 比如,字符串 “Hello,世界!” 中包含了一个英文逗号和两个中文字符,因此总长度应该为 8。 2. 代码实现 下面是一个…

    JavaScript 2023年5月19日
    00
  • 浅谈javascript的Array.prototype.slice.call

    接下来我将详细讲解“浅谈JavaScript的Array.prototype.slice.call”的完整攻略。 首先,我们来了解一下Array.prototype.slice.call的含义。 在JavaScript中,Array.prototype.slice.call()是指将一个类数组对象或可遍历对象(如 DOM NodeList对象)转换成一个真正…

    JavaScript 2023年5月27日
    00
  • javacript获取当前屏幕大小

    获取当前屏幕大小可以通过JavaScript的内置对象window来实现。使用window对象提供的属性和方法可以获取浏览器窗口的相关信息。 方法一:使用innerWidth和innerHeight属性获取屏幕大小 window.innerWidth属性返回浏览器窗口的视口宽度,即不包括滚动条的宽度。window.innerHeight属性返回浏览器窗口的视…

    JavaScript 2023年6月11日
    00
  • JavaScript字符串对象fromCharCode方法入门实例(用于把Unicode值转换为字符串)

    JavaScript字符串对象fromCharCode方法入门实例 简介 fromCharCode()是JavaScript中字符串对象的一个方法,用来将Unicode编码转换成实际字符串。 语法 String.fromCharCode(num1, num2, …, numN) 参数 num1 – 必选参数,当前要被转换的Unicode编码值 (必须在0…

    JavaScript 2023年5月19日
    00
  • JS实现数组的增删改查操作示例

    下面我来为您讲解一下JS实现数组的增删改查操作的完整攻略。 1. 增加操作 对于增加数组元素的操作,可以使用push()方法或者splice()方法。 push()方法 push()方法可以向数组末尾追加一个或多个元素,示例代码如下: let arr = [1, 2, 3]; arr.push(4); console.log(arr); // [1, 2, …

    JavaScript 2023年5月27日
    00
  • jquery 时间戳转日期过程详解

    下面是详细讲解“jquery 时间戳转日期过程详解”的完整攻略。 1. 背景 在前端开发中,我们经常需要将时间戳转换成可读性较好的日期。很多人使用 JavaScript 的内置函数进行转换,但很多开发者更愿意使用 jQuery 来完成这一任务,因为它更加简单并且易于操作。本文将详细介绍如何使用 jQuery 将时间戳转换成日期。 2. 前置知识 在本文中,我…

    JavaScript 2023年5月27日
    00
  • js实现时间日期校验

    JS实现时间日期校验需要用到正则表达式,下面我将介绍实现这一过程的完整攻略。 步骤一:获取输入框的值 首先,我们需要获取输入框中用户输入的值,可以使用document.getElementById()方法获取对应输入框的元素对象,进而获取输入框中的值: let inputDate = document.getElementById(‘date’).value…

    JavaScript 2023年5月27日
    00
  • Three.js+React制作3D梦中海岛效果

    下面我将详细讲解“Three.js+React制作3D梦中海岛效果”的完整攻略。 简介 Three.js是一款JavaScript 3D库,它可以为我们简化3D场景的创建和管理。React是一款流行的JavaScript库,它可以让我们更容易地构建用户界面。将这两个库结合起来,我们可以更加高效的创建3D界面。 在本攻略中,我们将使用Three.js和Reac…

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