JavaScript常用数组去重的方法及对比详解

yizhihongxing

JavaScript常用数组去重的方法及对比详解

在JavaScript开发中,常常需要对数组进行去重操作。本文将详细介绍JavaScript常用的数组去重方法,并对它们进行比较和详细解释。

一、方法1:双重循环去重法

方法描述

通过双重循环遍历数组,把数组中的每个元素依次与之后的每个元素相比较,如果发现重复的元素,则把后面的元素从数组中删除。

示例代码

function unique(arr) {
  for (var i = 0; i < arr.length; i++) {
    for (var j = i + 1; j < arr.length; j++) {
      if (arr[i] === arr[j]) {
        arr.splice(j, 1);
        j--;
      }
    }
  }
  return arr;
}

// 测试代码
var arr = [1, 2, 3, 3, 4, 5, 5, 6];
var result = unique(arr);
console.log(result); // [1, 2, 3, 4, 5, 6]

方法分析

该方法实现简单,但由于涉及到双重循环,时间复杂度较高,不适用于大型数组。

二、方法2:利用indexOf去重法

方法描述

通过indexOf函数检查每个值是否已经在新数组中出现过,如果没有出现过,则将其加入新数组中。

示例代码

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

// 测试代码
var arr = [1, 2, 3, 3, 4, 5, 5, 6];
var result = unique(arr);
console.log(result); // [1, 2, 3, 4, 5, 6]

方法分析

该方法是一种较为简单的去重方法,并且时间复杂度比双重循环去重法低,但在处理大型数组时,indexOf函数的性能问题会显现出来。

三、方法3:利用ES6 Set去重法

方法描述

利用ES6中的Set数据结构中的元素唯一性,将数组转换为Set,再将Set转换为数组。

示例代码

function unique(arr) {
  return Array.from(new Set(arr));
}

// 测试代码
var arr = [1, 2, 3, 3, 4, 5, 5, 6];
var result = unique(arr);
console.log(result); // [1, 2, 3, 4, 5, 6]

方法分析

该方法使用了ES6语法,代码简单易懂,并且时间复杂度较低,是一种比较常用的数组去重方法。

四、方法4:利用Object对象属性去重法

方法描述

通过建立一个新的Object对象,遍历原数组中的每个元素作为对象属性名并赋值为1,当再次出现该属性名时,将其删除。

示例代码

function unique(arr) {
  var obj = {};
  return arr.filter(function(item, index, arr) {
    return obj.hasOwnProperty(typeof item + item)
      ? false
      : (obj[typeof item + item] = true);
  });
}

// 测试代码
var arr = [1, 2, 3, 3, 4, 5, 5, 6];
var result = unique(arr);
console.log(result); // [1, 2, 3, 4, 5, 6]

方法分析

该方法利用了对象属性名不重复的特性,时间复杂度较低,但是当原数组中的元素是对象时,该方法就不适用了。

五、方法5:利用哈希表去重法

方法描述

建立一个新的哈希表,遍历原数组中的每个元素,在哈希表中寻找该元素,如果找到,则说明该元素重复,将其删除。如果未找到,则说明该元素不重复,将其加入哈希表中。

示例代码

function unique(arr) {
  var hashMap = {},
    newArr = [];
  for (var i = 0; i < arr.length; i++) {
    if (!hashMap[typeof arr[i] + arr[i]]) {
      hashMap[typeof arr[i] + arr[i]] = true;
      newArr.push(arr[i]);
    }
  }
  return newArr;
}

// 测试代码
var arr = [1, 2, 3, 3, 4, 5, 5, 6];
var result = unique(arr);
console.log(result); // [1, 2, 3, 4, 5, 6]

方法分析

该方法实现简单,时间复杂度较低,是一种常用的数组去重方法。

结语

本文介绍了JavaScript常用的5种数组去重方法,其中对比了它们的优缺点。在实际开发中,我们可以根据具体情况选择不同的方法来完成操作。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:JavaScript常用数组去重的方法及对比详解 - Python技术站

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

相关文章

  • HTML5 本地存储之如果没有数据库究竟会怎样

    这里是 “HTML5 本地存储之如果没有数据库究竟会怎样” 的攻略。 什么是本地存储 本地存储是Web开发中比较重要的一个概念,它可以在不使用服务器数据库的情况下,让我们的Web应用程序缓存数据。HTML5 中的本地存储提供了两种方式:localStorage 和 sessionStorage。 localStorage 存储的数据是永久性的,而 sessi…

    JavaScript 2023年6月11日
    00
  • 推荐自用 Javascript 缩图函数 (onDOMLoaded)……

    推荐自用 Javascript 缩图函数 (onDOMLoaded) 完整攻略 简介 本文介绍如何使用自制的Javascript缩图函数,在网页加载完成时动态生成缩略图并缓存到浏览器。这个缩图函数可以实现对任何图片的缩放和加载加速,用户能够更快地预览高清图片,同时亦可以节省流量和加载时间。 准备工作 在开始之前,您需要了解一些前置知识: HTML, CSS和…

    JavaScript 2023年6月10日
    00
  • javascript开发技术大全 第2章 开始JAVAScript之旅

    “javascript开发技术大全 第2章 开始JAVAScript之旅” 是一本 JS 入门的好书,本章分为以下7部分: Javascript简介:介绍什么是JavaScript,学习JS的必要性以及什么是JS的应用领域。 JS基础:介绍JS的基本语法,变量和表达式,流程控制,数据类型和自定义函数。 DOM操作:介绍DOM的结构和功能,如何选择和操作页面元…

    JavaScript 2023年5月17日
    00
  • js实现字符串转日期格式的方法

    下面是实现字符串转日期格式的方法的完整攻略: 步骤一:创建日期对象 字符串转日期格式,我们需要先将字符串转为日期对象,再对日期对象进行格式化操作。我们可以通过Date对象来创建日期对象。 let dateStr = ‘2021-12-31’; let dateObj = new Date(dateStr); console.log(dateObj); 上面的…

    JavaScript 2023年5月27日
    00
  • 理解javascript中的严格模式

    理解 JavaScript 中的严格模式需要掌握以下内容: 严格模式是什么; 为什么要使用严格模式; 如何开启严格模式; 严格模式下的限制和变化。 接下来我将逐一解释。 1. 严格模式是什么 简单来说,严格模式是 ES5 中新增的一种执行模式,它使得 JavaScript 引擎在执行 JavaScript 代码时,会对一些不规范的语法和疏忽进行提示或者直接报…

    JavaScript 2023年5月18日
    00
  • php基于jquery的ajax技术传递json数据简单实例

    下面开始详细讲解“php基于jquery的ajax技术传递json数据简单实例”的完整攻略: 一、什么是 AJAX? AJAX(Ajax Asynchronous Javascript and XML),即异步的 JavaScript 和 XML。它是一种在Web页面直接与服务器进行数据交互的技术,可以提高页面的交互能力,免去了页面的刷新,页面在不刷新的情况…

    JavaScript 2023年5月27日
    00
  • 原生js实现表单的正则验证(验证通过后才可提交)

    下面是原生js实现表单的正则验证的完整攻略,分为以下几个步骤: 1. 前置知识 在实现表单的正则验证之前,需要先了解表单的基本结构和事件绑定的方法。 表单基本结构 <form> <input type="text" name="username" id="username">…

    JavaScript 2023年6月11日
    00
  • JavaScript canvas实现文字时钟

    JavaScript的Canvas是一个非常强大的图像处理工具,它可以用来创建各种各样的特效,比如实现文字时钟。下面我将提供完整的实现攻略,希望能够对你有所帮助。 准备工作 在开始实现之前,需要准备以下工作: 在HTML中创建一个canvas标签,并指定合适的宽度和高度。 在JavaScript中获取该canvas标签,并获取其上下文。 设定需要显示的时间格…

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