广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >JavaScript中数组去重常用的五种方法详解
  • 812
分享到

JavaScript中数组去重常用的五种方法详解

2024-04-02 19:04:59 812人浏览 泡泡鱼
摘要

目录1.对象属性(indexof)2.new Set(数组)3.new Map()4.filter() + indexof5.reduce() + includes补充原数组 con

原数组

const arr = [1, 1, '1', 17, true, true, false, false, 'true', 'a', {}, {}];

1.对象属性(indexof)

利用对象属性key排除重复项

遍历数组,每次判断新数组中是否存在该属性,不存在就存储在新数组中

并把数组元素作为key,最后返回新数组

这个方法的优点是效率高,缺点是使用了额外空间

var newArr = [];
arr.forEach((key,index)=>{
    if(newArr.indexOf(key) === -1){
        newArr.push(key)
  }        
})
console.log(newArr);// [1, '1', 17, true, false, 'true', 'a', {}, {}]

2.new Set(数组)

Set是一系列无序、没有重复值的数据集合,传入一个需要去重的数组,Set会自动删除重复的元素

再将Set转数组返回。此方法效率高,代码清晰,缺点是存在兼容性问题

const newArr = [...new Set(arr)];
console.log(newArr);// [1, '1', 17, true, false, 'true', 'a', {}, {}]

3.new Map()

利用Map的键值对同名覆盖,再将Map转数组

const m = new Map();
for (let i = 0; i < arr.length; i++) {
    m.set(arr[i], arr[i]);
}
const newArr = []
m.forEach(function (value, key) {
    newArr .push(value)
})
console.log(newArr );//[1, '1', 17, true, false, 'true', 'a', {}, {}]

4.filter() + indexof

filter把接收的函数依次作用于每一个数组项,然后根据返回值 true or false 决定是否保留该值

优点在于可在去重时插入对元素的操作,可拓展性强

const newArr= arr.filter(function(item,index,self){
    return self.indexOf(item) === index;
})
console.log(newArr);//  [1, '1', 17, true, false, 'true', 'a', {}, {}]

5.reduce() + includes

reduce()把结果继续和序列的下一个元素做累加计算

利用reduce遍历和传入一个空数组作为去重后的新数组,然后内部判断新数组中是否存在当前遍历的元素,不存在就插入新数组

缺点在于时间消耗多,内存空间也额外占用

const newArray = arr.reduce((newArr, element) => {
  if (!newArr.includes(element)) {
    newArr.push(element);
  }
   return newArr;
}, []);

注意点:

在数据量较低时,以上五个方法无较为明显的区别(10000条)

高于10000条时,前两种方法时间消耗最少,后三种时间消耗依次增加

第一种方法空间占用多,当下很多项目不再考虑低版本游览器兼容性问题

推荐使用Set()去重方法

补充

当然实现数组去重还有很多其他的方法,下面小编为大家整理了一些

利用for嵌套for,然后splice去重

    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]) { //第一个等同于第二个,splice方法删除第二个
                    arr.splice(j, 1);
                    j--;
                }
            }
        }
        return arr;
    }
    var arr = [1, 1, 'true', 'true', true, true, 15, 15, false, false, undefined, undefined, null, null, NaN, NaN,
        'NaN', 0, 0, 'a', 'a', {}, {}
    ];
    console.log(unique(arr))

hasOwnProperty

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

利用递归去重

 function unique(arr) {
        var array = arr;
        var len = array.length;

        array.sort(function (a, b) { //排序后更加方便去重
            return a - b;
        })

        function loop(index) {
            if (index >= 1) {
                if (array[index] === array[index - 1]) {
                    array.splice(index, 1);
                }
                loop(index - 1); //递归loop,然后数组去重
            }
        }
        loop(len - 1);
        return array;
    }
    var arr = [1, 1, 'true', 'true', true, true, 15, 15, false, false, undefined, undefined, null, null, NaN, NaN,
        'NaN', 0, 0, 'a', 'a', {}, {}
    ];
    console.log(unique(arr))

到此这篇关于javascript中数组去重常用的五种方法详解的文章就介绍到这了,更多相关JavaScript数组去重内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: JavaScript中数组去重常用的五种方法详解

本文链接: https://www.lsjlt.com/news/152114.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • JavaScript中数组去重常用的五种方法详解
    目录1.对象属性(indexof)2.new Set(数组)3.new Map()4.filter() + indexof5.reduce() + includes补充原数组 con...
    99+
    2022-11-13
  • Javascript数组去重的几种方法详解
    目录数组去重1 双层for循环(类似冒泡排序的双层循环写法)2 循环和indexof、循环和includes3 利用对象属性不能重复去重4 ES6 Set5 ES6 Array. p...
    99+
    2022-11-12
  • JavaScript数组去重的五种方法是什么
    本篇内容介绍了“JavaScript数组去重的五种方法是什么”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!...
    99+
    2022-10-19
  • JavaScript数组去重的几种方法详谈
    目录一、Set去重二、双重for循环去重三、利用indexOf去重四、利用icludes去重五、filter六、Map总结一、Set去重 function funSet(arr...
    99+
    2022-11-12
  • JavaScript常用数组去重的方法及对比详解
    目录前言特殊类型代码一(暴力解法)代码二(ES6)代码三(indexOf + forEach)代码四(indexOf + filter)代码五(sort排序,不支持Symbol)代码...
    99+
    2022-11-13
  • Java实现List去重的五种方法详解
    目录通过HashSet去重(不保证顺序)通过HashSet去重(保证顺序)遍历后判断赋给另一个list集合去重(保证顺序)通过TreeSet去重(保证顺序)Java8中Stream流...
    99+
    2022-11-13
    Java List去重方法 Java List去重 Java去重 List 去重
  • JavaScript常用数组去重方法
    本篇内容主要讲解“JavaScript常用数组去重方法”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“JavaScript常用数组去重方法”吧!数组去重,一般都是在面试的时候才会碰到,一般是要求手...
    99+
    2023-06-20
  • JS数组去重的常用4种方法
    1.ES6的Set类数组去重 var arr = [1,2,2,3,3,4,4,1,5,6,6,5] function unique (arr) { return Array.f...
    99+
    2022-11-13
  • JavaScript实现数组去重的7种方法
    目录前言方法实现双循环去重indexOf方法去重1indexOf方法去重2相邻元素去重利用对象属性去重set与解构赋值去重Array.from与set去重总结前言 去重是开发中经常会...
    99+
    2022-11-13
  • javascript中数组去重常用方法有哪些
    这篇文章将为大家详细讲解有关javascript中数组去重常用方法有哪些,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。具体如下:数组去除重复值是面试常考内容,也是很容易用...
    99+
    2022-10-19
  • js数组去重常见的方法汇总(7种)
    目录1、借助ES6提供的Set结构 new Set() 简单好用 强烈推荐2、利用 filter() 去重3、利用for 循环 搭配 indexOf 去重4、将数组的每一个元素依次与...
    99+
    2022-11-13
  • JavaScript实现数组对象去重的多种方法
    目录JavaScript实现数组对象去重的多种方法一、使用 Set 对象:二、使用`reduce`方法:三、使用`filter`方法补充:js数组对象去重1、使用reduce()方法...
    99+
    2023-02-10
    js数组对象去重 js数组去重
  • 关于JavaScript数组对象去重的几种方法
    数组对象如下: let repeatData = [ { id: 1, name: 'sun', age: 18 }, { id: 1, name: ...
    99+
    2023-05-17
    JavaScript数组去重 js数组对象去重
  • 非常全面的12种js数组去重的方法
    目录前言方法1、双重for循环方法2、for循环 +findIndex方法3、sort 排序方法4、Set方法5、set + Array.from方法6、filter + index...
    99+
    2022-11-13
  • 详解JavaScript数组的常用方法
    目录数组的常用方法pop()unshift()shift()slice()splice()数组元素去重concat()join()reverse()sort()总...
    99+
    2022-11-12
  • SQL数据去重的3种方法实例详解
    目录1、使用distinct去重2、使用group by3、使用ROW_NUMBER() OVER 或 GROUP BY 和 COLLECT_SET/COLLECT_LIST3.1 ROW_NUMBER() OVER3....
    99+
    2023-01-03
    SQL数据去重 sql 去重方法 sql去重的多种方式
  • JavaScript中数组去重的方法有哪些
    本篇内容介绍了“JavaScript中数组去重的方法有哪些”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成! ...
    99+
    2022-10-19
  • JavaScript常用数组元素搜索或过滤的四种方法详解
    目录Array.filter()Array.find()Array.includes()Array.indexOf()结语获取满足特定条件的数组中的所有项目要检查是否满足条件?检查数...
    99+
    2022-11-13
  • 使用JavaScript对数组去重的方法有哪些
    这篇文章将为大家详细讲解有关使用JavaScript对数组去重的方法有哪些,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。1. 利用对象的 key 唯一众所周知,对象的key不可重复,否则后者...
    99+
    2023-06-14
  • Oracle表中重复数据去重的方法实例详解
    Oracle表中重复数据去重的方法实例详解 我们在项目中肯定会遇到一种情况,就是表中没有主键 有重复数据 或者有主键 但是部分字段有重复数据 而我们需要过滤掉重复数据 下面是一种解决方法 del...
    99+
    2022-10-18
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作