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数组排序技巧汇总(冒泡、sort、快速、希尔等排序)

    JS数组排序技巧汇总 在 Javascript 中,排序操作是非常常见的操作。本篇文章将会介绍常见的几种排序算法:冒泡排序、选择排序、插入排序、快速排序和希尔排序。同时,我们也会讲解如何使用这些算法在 Javascript 中进行排序。 冒泡排序 冒泡排序是最基础的算法之一,也是最容易理解的算法之一。它通过依次比较相邻的两个元素,把大的元素往后排,小的元素往…

    JavaScript 2023年5月27日
    00
  • Vue3 跨域配置devServer的参数和设置方法

    Vue3 是一款流行的前端框架,它允许我们在开发中使用各种功能强大的功能,其中包括跨域请求。在本篇文章中,我将为您讲解如何在 Vue3 项目中配置 devServer 实现跨域请求。 什么是跨域请求? 在 Web 开发中,域指的是通过互联网来唯一标识一个网络资源的字符串。跨域请求则是指在客户端浏览器向服务器发起请求时,所请求的资源的域名与当前网页的域名不同,…

    JavaScript 2023年6月11日
    00
  • 上周方法病毒来源竟然为ad.pchome.net原来被挂马

    背景 近期有关“上周方法病毒来源竟然为ad.pchome.net原来被挂马”的消息引起了广泛关注。该事件中,许多用户访问了ad.pchome.net网站后,他们的电脑就被感染了这个叫做“上周方法”的恶意软件。 方法 如何避免这种恶意软件的感染,以下是一些防范方法供您参考: 1.更新系统和软件 恶意软件通常利用系统或软件的漏洞进行传播。因此,及时更新操作系统和…

    JavaScript 2023年6月11日
    00
  • JS实现在状态栏显示打字效果完整实例

    下面是关于“JS实现在状态栏显示打字效果完整实例”的攻略: 1. 实现思路 在状态栏上显示打字效果,我们需要借助 JS 来动态地修改状态栏文字,并模拟打字效果。 具体实现思路如下: 设置一个状态栏元素,例如 <span> 标签。 通过 JS 动态修改状态栏文本,实现打字效果。 将打字效果分段,通过定时器控制每段文字的出现时间,实现逐个显示效果。 …

    JavaScript 2023年6月11日
    00
  • asp.net Javascript获取CheckBoxList的value

    下面我将详细讲解如何使用 JavaScript 在 ASP.NET 中获取 CheckBoxList 的值。 1. 获取 CheckBoxList 中选中项的值 要想获取 CheckBoxList 中选中项的值,可以通过以下的方式实现: // 获取 CheckBoxList 的实例 var cbList = document.getElementById(‘…

    JavaScript 2023年6月10日
    00
  • js跳转页面方法总结

    JS跳转页面方法总结 在Web开发中,JS跳转页面是非常常见的操作。下面我们来总结几种JS跳转页面的方法。 方法一:使用JavaScript中的location对象 可以通过JavaScript提供的location对象来实现跳转页面的功能。使用方法如下: // 跳转到指定URL location.href = "http://www.exampl…

    JavaScript 2023年6月11日
    00
  • JS实现点击颜色块切换指定区域背景颜色的方法

    针对“JS实现点击颜色块切换指定区域背景颜色”的情况,可以考虑以下实现方案。 实现思路 定义颜色块选项和给定区域(例如div); 给颜色块添加点击事件,记录点击的颜色值; 利用DOM操作,将颜色值赋予给定区域的背景色; 代码示例 <!doctype html> <html> <head> <meta charset=…

    JavaScript 2023年6月11日
    00
  • javascript请求servlet实现ajax示例(分享)

    下面我来详细讲解“javascript请求servlet实现ajax示例(分享)”的完整攻略。 什么是 Ajax? Ajax 指的是一种创建交互式、快速动态网页的技术。利用 Ajax,在不重新加载整个页面的情况下,实现局部更新数据的功能,并且不会打断用户正在进行的操作。 实现 Ajax 的方式 实现 Ajax 的方式有很多,其中比较典型的方式就是使用 Jav…

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