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日

相关文章

  • 动态加载js文件 document.createElement

    动态加载JavaScript文件可以提高网页的性能,避免在页面加载时全部加载JavaScript文件导致的性能问题。常见的通过JavaScript动态加载JS文件的方法是通过创建标签并添加到文档中。而document.createElement是这个过程中一个必备的步骤。 使用document.createElement(“script”)方法动态加载JS文…

    JavaScript 2023年5月27日
    00
  • javascript设计模式之Adapter模式【适配器模式】实现方法示例

    下面我会详细讲解“Javascript设计模式之Adapter模式【适配器模式】实现方法示例”的完整攻略,包括如何使用适配器模式以及示例的具体实现。 什么是适配器模式? 适配器模式是一种行为型设计模式,用于将一个类的接口转换成另一个客户端所期望的接口。通俗来讲,就是使得一个类能够应对多种不同的接口。 适配器模式的应用场景 在实际的编程中,适配器模式的应用场景…

    JavaScript 2023年6月10日
    00
  • Javascript注入技巧

    Javascript注入技巧 Javascript注入是一种将代码注入到Web页面中的攻击技巧,它可以通过一些手段在Web页面中运行恶意代码。攻击者可以利用这种技术窃取用户的敏感信息、篡改页面内容、运行恶意程序等,对网站和用户造成不良影响。下面是一些Javascript注入的技巧和示例说明。 基础技巧 1. 隐藏字段注入 隐藏字段注入是一种简单的注入技巧,攻…

    JavaScript 2023年5月18日
    00
  • 实例讲解JS中setTimeout()的用法

    当需要在一定时间延迟之后再执行一段代码时,可以使用JavaScript中的setTimeout()函数。setTimeout()的语法格式为: setTimeout(function, milliseconds, parameter1, parameter2, …) 其中,function是要执行的函数,milliseconds是延迟的毫秒数,param…

    JavaScript 2023年6月11日
    00
  • JavaScript获取字符串实际长度(包含中英文)

    获取字符串实际长度是一个比较常见的问题,由于中英文字符在内存中占用的字节数不同,所以它们在字符串长度计算上也不同。在JavaScript中,我们可以使用以下方法获取一个字符串的实际长度。 方法一:通过正则匹配 正则表达式可以用来匹配所有非英文字符,我们可以使用它来判断字符串中是否包含中文字符。代码如下: function getLength(str) { r…

    JavaScript 2023年5月19日
    00
  • JS函数进阶之prototy用法实例分析

    下面我详细讲解一下 “JS函数进阶之prototype用法实例分析” 的完整攻略。 1. 什么是JS中的prototype 在JavaScript中,每个函数都有一个prototype属性,它是函数构造器的原型对象,也是通过构造器创建的对象的原型。这个原型对象是一个普通对象,其中包含一些方法和属性,它们可以被构造器所创建的所有实例对象所共享。 2. prot…

    JavaScript 2023年5月28日
    00
  • 使用dynatrace-ajax跟踪JavaScript的性能

    使用Dynatrace AJAX跟踪JavaScript的性能可以帮助我们分析网站页面中的JavaScript代码的性能瓶颈,进而优化网站性能。下面是使用Dynatrace AJAX跟踪JavaScript的性能的完整攻略: 步骤一:安装Dynatrace AJAX Dynatrace AJAX是一款用于分析网站性能的浏览器扩展程序,可以方便地对网站进行性能…

    JavaScript 2023年6月11日
    00
  • 数据类型和Json格式分析小结

    好的!关于“数据类型和Json格式分析小结”的攻略,我可以为你详细讲解,主要包括以下几个方面: 数据类型的概念 在计算机科学中,数据类型即数据的种类,通常被指定为指令集和编程语言的一部分。常见的数据类型包括整数、浮点数、字符等。不同的数据类型有不同的数据存储方式、运算规则和支持的操作等特点。 在编程中,合理使用数据类型能够有效地提高程序的效率和性能,同时可以…

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