js数组去重的5种算法实现

yizhihongxing

JS数组去重的5种算法实现

1. 利用Set数据结构

使用Set数据结构是JS中去重最简单的方法,它可以快速对数组进行去重,这种方式不需要对原数组进行操作,不会改变原数组。

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

这里用了ES6的扩展运算符将Set转成数组。

2. 利用indexOf

使用indexOf的方式比较适合对于基本数据类型进行去重,因为引用类型的数据indexOf方法无法正确比较,需要转成字符串再进行比较。这种方式同样不会改变原数组。

let arr = [1, 1, 2, 3, 2, 4, 5, 5];
let 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]

3. 利用includes

includes方法也类似于indexOf,只不过它返回的是布尔值,需要做一个判断。同样,它也不会改变原数组。

let arr = [1, 1, 2, 3, 2, 4, 5, 5];
let 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]

4. 利用排序

排序可以将相同的元素放到一起,这样再遍历数组时就可以只与相邻的元素比较了。但是需要注意,这种方式会改变原数组。

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

5. 利用Object键值对

利用Object的键值对来记录数组元素是否出现过,这种方式同样不会改变原数组。

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

以上就是五种JS数组去重的实现方法,各有优缺点,可以根据实际情况进行选择。

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

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

相关文章

  • 原生JS+HTML5实现的可调节写字板功能示例

    下面是我对于“原生JS + HTML5 实现的可调节写字板功能示例”的攻略详解,包括过程和示例说明: 1. 准备工作 首先,我们需要明确一下目标:实现一个可调节写字板的功能。为此,我们需要对写字板功能的实现进行详细的分析,并列出需要用到的相关技术和工具。 1.1 写字板需求分析 写字板的基本要求是:用户可以在一个空白画布上自由绘画,还可以设置画笔的颜色及粗细…

    JavaScript 2023年5月28日
    00
  • 详解js中Json的语法与格式

    下面是详解“详解js中Json的语法与格式”的完整攻略。 什么是 JSON JSON(Javascript Object Notation)是一种轻量级的数据交换格式,在前端开发中广泛应用。它基于JavaScript对象语法,但是可以被用于保存和交换任何类型的数据。 JSON 的语法 JSON的语法非常简洁,只有两种结构:对象(Object)和数组(Arra…

    JavaScript 2023年5月27日
    00
  • JS异步编程之generator与async/await语法糖详解

    JS异步编程之generator与async/await语法糖详解 什么是异步编程? 通俗地讲,异步编程是指不需要等待上一个代码块执行完毕,就可以开始执行下一个代码块的编程方式。在JavaScript中,异步编程是常见的编程方式,它主要使用回调函数、Promise、Generator和async/await等语法来实现。其中,Generator和async/…

    JavaScript 2023年5月28日
    00
  • asp.net(C#)中给控件添加客户端js事件的方法

    给控件添加客户端js事件是asp.net(C#)开发中的常见需求,我们可以通过以下步骤完成: 第一步:在aspx页面中引入js文件 在aspx页面中需要引入相应的js文件,例如: <script type="text/javascript" src="~/scripts/jquery-3.6.0.min.js"&…

    JavaScript 2023年6月11日
    00
  • 原生js实现日期计算器功能

    非常感谢您对“原生js实现日期计算器功能”的关注。下面是我对这个话题的详细讲解,希望能够帮助到您。 什么是日期计算器功能? 日期计算器功能指的是在网页上实现日期的计算,如计算两个日期之间相差的天数、周数、月数、年数等等。这个功能在实际的项目中很常见,比如生日计算器、工作日计算器等等。 使用JavaScript实现日期计算器功能 原生JavaScript能够轻…

    JavaScript 2023年5月27日
    00
  • uniapp实现人脸识别功能的具体实现代码

    实现人脸识别功能需要用到Uniapp的uni plugins插件,其中uni.plugins.facedetect插件可以用于实现人脸识别。 下面是实现人脸识别的代码示例: 引入uni.plugins.facedetect插件 import faceDetect from ‘@/uni_modules/facedetect/js_sdk/face_detec…

    JavaScript 2023年5月19日
    00
  • JavaScript箭头函数与普通函数的区别示例详解

    JavaScript中有两种定义函数的方式:普通函数和箭头函数。它们在语法和用法上有一些差异。在本文中,我们将通过两个示例来详细介绍箭头函数和普通函数之间的区别。 示例1:this 关键字 一个函数的 this 值取决于调用方式。 在普通函数中,this 关键字根据函数被调用的方式动态绑定。而在箭头函数中,它会捕获它所在上下文的 this 值,而不是动态绑定…

    JavaScript 2023年5月27日
    00
  • JavaScript入门初体验书写方式

    关于“JavaScript入门初体验书写方式”的攻略,我可以作如下的详细讲解: 1. 引入JavaScript 想要使用JavaScript,首先需要将JavaScript代码引入HTML文档中,可以用以下的方法: <script src="js/myScript.js"></script> 其中,src指定需要引…

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