javascript数组去重的方法汇总

针对“javascript数组去重的方法汇总”的话题,我将为您提供完整的攻略,并给出两条示例说明。

一、问题背景

在javascript开发中,很常见的问题是如何从一个数组中找出不重复的数据。数组去重在实际开发中非常有用,例如:从数据库中查询数据后想要去除相同项展示给用户,或者需要合并两个数组并去除重复项。本文将为大家总结一下常用的去重方法。

二、方法汇总

1.使用Set

ES6中提供了一种新的数据结构Set,其中属性值唯一,可以很方便地实现数组去重。具体代码如下:

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

2.使用数组遍历

使用数组的indexOf()方法或者ES6的includes()方法进行遍历,遇到重复的删除此项。具体代码如下:

let arr = [1,2,3,4,5,5,6,6,7];
function unique(arr) {
    let newArr = [];
    for(let i=0;i<arr.length;i++) {
        if(newArr.indexOf(arr[i]) === -1) {
            newArr.push(arr[i]);
        }
    }
    return newArr;
}
console.log(unique(arr)); //[1, 2, 3, 4, 5, 6, 7]

3.使用对象键值对

遍历数组,以元素值为对象的键值对应到对象中,如对象存在该键,则说明重复,否则将该键值对应到对象中。最后返回键值数组即可。具体代码如下:

let arr = [1,2,3,4,5,5,6,6,7];
function unique(arr) {
    let obj = {};
    let newArr = [];
    for(let i=0;i<arr.length;i++) {
        if(!obj[arr[i]]) {
            obj[arr[i]] = true;
            newArr.push(arr[i]);
        }
    }
    return newArr;
}
console.log(unique(arr)); //[1, 2, 3, 4, 5, 6, 7]

4.使用reduce函数

使用reduce函数,对出现过的元素存到obj中,并返回不重复的元素到newArr中。具体代码如下:

let arr = [1,2,3,4,5,5,6,6,7];
function unique(arr) {
    let newArr = arr.reduce((prev,cur) => {
        if(!prev.includes(cur)) {
            prev.push(cur);
        }
        return prev;
    },[]);
    return newArr;
}
console.log(unique(arr)); //[1, 2, 3, 4, 5, 6, 7]

三、总结

本文介绍了javascript数组去重的四种方法:使用Set,使用数组遍历,使用对象键值对,使用reduce函数。具体使用哪种方法,取决于情况和个人喜好。

以上就是本文的内容,希望能够对您有所帮助!

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

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

相关文章

  • jQuery实现简单日期格式化功能示例

    下面是“jQuery实现简单日期格式化功能示例”的完整攻略: 什么是日期格式化? 在 JavaScript 中,日期对象通常以一定格式的字符串形式进行表示,而日期格式化是将日期对象转换成特定的字符串格式的过程。例如,“2021年8月16日”和“8/16/2021”就是两种不同的日期格式。 jQuery实现日期格式化 jQuery 提供了 format 函数,…

    JavaScript 2023年5月27日
    00
  • JavaScript 正则表达式备忘单实例代码

    下面是详细讲解“JavaScript 正则表达式备忘单实例代码”的攻略。 什么是正则表达式 正则表达式(regular expression,regex)是一种用来描述、匹配和查找文本字符串中模式的工具。JavaScript具有内置的正则表达式功能,可以使用正则表达式对象调用而不必创建新实例。 正则表达式的语法 正则表达式由两个正斜杠(/)包裹,例如: va…

    JavaScript 2023年6月11日
    00
  • Javascript Math asin() 方法

    JavaScript中的Math.asin()方法用于返回一个数的反正弦值,即弧度值。该方法接受一个参数,即要计算反正弦值的数值。以下是关于Math.asin()方法的完整攻略,包括两个示例。 JavaScript Math对象的asin()方法 JavaScript Math对象中的asin()方法用于返回一个数的反正弦值,即弧度值。该方法接受一个参数,即…

    JavaScript 2023年5月11日
    00
  • 详解JavaScript中循环控制语句的用法

    详解JavaScript中循环控制语句的用法 在JavaScript中,循环控制语句是非常常用的语句之一。它可以帮助我们更加方便快捷地进行重复处理的操作。下面,我们就来详细讲解一下JavaScript中的循环控制语句。 JavaScript中几种常见的循环控制语句 JavaScript中常见的循环控制语句有三种:for、while、do while。 for…

    JavaScript 2023年5月27日
    00
  • js实现弹框效果

    如何通过JavaScript实现弹框效果呢?下面是一些步骤和示例代码来帮助你实现这个功能: 步骤一:创建弹出框的 HTML 代码 首先,要在 HTML 代码中创建弹出框的模板,可以使用 <div> 标签来实现: <div id="myModal" class="modal"> <div c…

    JavaScript 2023年5月27日
    00
  • Javascript Date getMilliseconds() 方法

    以下是关于JavaScript Date对象的getMilliseconds()方法的完整攻略,包括两个示例说明。 JavaScript Date对象的getMilliseconds()方法 JavaScript Date对象的getMilliseconds()方法返回一个毫秒的数字(0-999)。该方法可用获取当前日期的毫秒数。 下使用Date的getMi…

    JavaScript 2023年5月11日
    00
  • Android 手机浏览器调试使用Chrome进行调试实例详解

    Android 手机浏览器调试使用Chrome进行调试实例详解 介绍 开发者通常需要在本地环境中对其网页进行调试,以确保其能够在不同设备和浏览器中正确运行。Android 手机作为一个复杂和多样化的设备,需要特定的工具和方法来进行调试。 Chrome浏览器提供了一个方便的方式来调试Android手机上的网页。本文将详细介绍如何使用Chrome浏览器来进行调试…

    JavaScript 2023年6月10日
    00
  • 在JavaScript中处理时间之getHours()方法的使用

    在JavaScript中处理时间之getHours()方法的使用 getHours()是JavaScript的Date对象的方法,用于获取当前的小时数。这个方法返回一个0到23之间的整数,表示当前时间的小时数。 语法 date.getHours() 其中date是一个Date对象。 示例说明 示例1:获取当前时间的小时数 let now = new Date…

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