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

目录
  • 1.对象属性（indexof）
  • 2.new Set(数组)
  • 3.new Map()
  • 4.filter() + indexof
  • 5.reduce() + includes
  • 补充

原数组

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数组去重内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 七种JS实现数组去重的方式

    目录 1.利用Set()+Array.from() 2.利用两层循环+数组的splice方法 3.利用数组的indexOf方法 4.利用数组的includes方法 5.利用数组的filter()+indexOf() 6.利用Map() 7.利用对象 例:将下面数组去除重复元素(以多种数据类型为例) const arr = [1, 2, 2, 'abc', 'abc', true, true, false, false, undefined, undefined, NaN, NaN] 1.利用Se

  • JavaScript中数组去重的5种方法

    正常情况下,数据去重的工作一般都是由后端同事来完成的,但是前端也要掌握好处理数据的能力,万一去重的工作交给我们大前端处理,我们也不能怂呀.现在我总结了一些去重的方法,希望对大家有点帮助. 方法一:new Set()实现数组去重 ES6 提供了新的数据结构 Set,它类似于数组,但是成员的值都是唯一的,没有重复的值. Set 本身是一个构造函数,用来生成 Set 数据结构.Set函数可以接受一个数组,用于初始化.根据 Set的数据特性,我们可以实现数组去重. let list = [1, 1, '

  • JS数组去重的常用4种方法

    1.ES6的Set类数组去重 var arr = [1,2,2,3,3,4,4,1,5,6,6,5] function unique (arr) { return Array.from(new Set(arr)) } console.log(unique(arr)) //[1,2,3,4,5,6] ES6的Set是类数组,里面的值是唯一的,但是不是真正的数组所以要通过Array.from()方法转化为数组,不考虑兼容问题是最简单的去重方法 2.for循环嵌套for循环 var arr = [1,

  • JavaScript实现数组去重的7种方法

    目录 前言 方法实现 双循环去重 indexOf方法去重1 indexOf方法去重2 相邻元素去重 利用对象属性去重 set与解构赋值去重 Array.from与set去重 总结 前言 去重是开发中经常会碰到的一个热点问题,不过目前项目中碰到的情况都是后台接口使用SQL去重,简单高效,基本不会让前端处理去重. 那么前端处理去重会出现什么情况呢?假如每页显示10条不同的数据,如果数据重复比较严重,那么要显示10条数据,可能需要发送多个http请求才能够筛选出10条不同的数据,而如果在后台就去重了的

  • JS实现数组去重的11种方法总结

    JS实现数组去重的11种方法总结

    目录 1.ES5常用:利用for嵌套for,然后splice去重 2.ES6常用:Set去重 3.indexOf去重 4.sort()排序 5.对象属性不能相同(不建议) 6.includes() 7.hasOwnProperty 8.filter 9.利用递归去重 10.Map去重 11.reduce+includes 1.ES5常用:利用for嵌套for,然后splice去重 function unique(arr) { for (var i = 0; i < arr.length; i++

  • js数组去重的11种方法

    在实际工作或面试中,我们经常会遇到"数组去重"问题,接下来就是使用js实现的数组去重的多种方法: 1.将数组的每一个元素依次与其他元素做比较,发现重复元素,删除 var arr = [1,23,1,1,1,3,23,5,6,7,9,9,8,5,5,5,5]; console.log(arr); //[1, 23, 1, 1, 1, 3, 23, 5, 6, 7, 9, 9, 8, 5, 5, 5, 5] function noRepeat1(arr) { for(var i = 0;

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

    目录 1.对象属性(indexof) 2.new Set(数组) 3.new Map() 4.filter() + indexof 5.reduce() + includes 补充 原数组 const arr = [1, 1, '1', 17, true, true, false, false, 'true', 'a', {}, {}]; 1.对象属性(indexof) 利用对象属性key排除重复项 遍历数组,每次判断新数组中是否存在该属性,不存在就存储在新数组中 并把数组元素作为key,最后返

  • JavaScript中数组去除重复的三种方法

    废话不多说了,具体方法如下所示: 方法一:返回新数组每个位子类型没变 function outRepeat(a){ var hash=[],arr=[]; for (var i = 0; i < a.length; i++) { hash[a[i]]!=null; if(!hash[a[i]]){ arr.push(a[i]); hash[a[i]]=true; } } console.log(arr); } outRepeat([2,4,4,5,"a","a"

  • JavaScript生成UUID的五种方法详解

    目录 简介 1.第一种 2.第二种 3.第三种 4.第四种 5.第五种 简介 UUID(Universally Unique IDentifier) 全局唯一标识符. UUID是一种由算法生成的二进制长度为128位的数字标识符.UUID的格式为“xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx”,其中的 x 是 0-9 或 a-f范围内的一个32位十六进制数.在理想情况下,任何计算机和计算机集群都不会生成两个相同的UUID. 1.第一种 function guid() {

  • Redis实现分布式锁的五种方法详解

    Redis实现分布式锁的五种方法详解

    目录 1. 单机数据一致性 2. 分布式数据一致性 3. Redis实现分布式锁 3.1 方式一 3.2 方式二(改进方式一) 3.3 方式三(改进方式二) 3.4 方式四(改进方式三) 3.5 方式五(改进方式四) 3.6 小结 在单体应用中,如果我们对共享数据不进行加锁操作,会出现数据一致性问题,我们的解决办法通常是加锁. 在分布式架构中,我们同样会遇到数据共享操作问题,本文章使用Redis来解决分布式架构中的数据一致性问题. 1. 单机数据一致性 单机数据一致性架构如下图所示:多个可客户访

  • Springboot配置返回日期格式化五种方法详解

    目录 格式化全局时间字段 1.前端时间格式化(不做无情人) 2.SimpleDateFormat格式化(不推荐) 3.DateTimeFormatter格式化(不推荐) 4.全局时间格式化(推荐) 实现原理分析 5.部分时间格式化(推荐) 总结 应急就这样 格式化全局时间字段 在yml中添加如下配置: spring.jackson.date-format=yyyy-MM-dd HH:mm:ss 或者 spring: jackson: ## 格式为yyyy-MM-dd HH:mm:ss date-

  • Python中提取人脸特征的三种方法详解

    目录 1.直接使用dlib 2.使用深度学习方法查找人脸,dlib提取特征 3.使用insightface提取人脸特征 安装InsightFace 提取特征 1.直接使用dlib 安装dlib方法: Win10安装dlib GPU过程详解 思路: 1.使用dlib.get_frontal_face_detector()方法检测人脸的位置. 2.使用 dlib.shape_predictor()方法得到人脸的关键点. 3.使用dlib.face_recognition_model_v1()方法提取

  • 在Vue2中注册全局组件的两种方法详解

    第一种:在main.js中直接注册 //引入 import FixedTop from '@/components/FixedTop //注册为全局组件 Vue.componet('FixedTop',FixedTop) //页面直接使用 <FixedTop /> 缺点:如果我们需要注册的全局组件非常多,那么需要一个一个引入,然后分别调用Vue.componet方法,main.js文件会变得很大很臃肿,不好维护,所以当需要注册的全局组件非常多的时候可以采用插件的形式注册 第二种:使用插件的形式

  • JS实现导出Excel的五种方法详解【附源码下载】

    本文实例讲述了JS实现导出Excel的五种方法.分享给大家供大家参考,具体如下: 这五种方法前四种方法只支持IE浏览器,最后一个方法支持当前主流的浏览器(火狐,IE,Chrome,Opera,Safari) <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>html 表格导出道</title> <sc

  • JS实现数组随机排序的三种方法详解

    JS实现数组随机排序的三种方法详解

    目录 1.利用数组方法sort实现随机排序 2.洗牌算法实现随机排序 3.洗牌算法深入分析 全部代码 1.利用数组方法sort实现随机排序 实现随机排序方法还是很多的,用for循环是可以写的,用Lodash等三方js方法库也行.但个人以为使用sort比较方便,但是他又缺点,缺点就是不够那么的随机,我看过sort运行机制后,发现他竟然是利用一个比较器两两比较出来的. var arr = [1, 2, 3, 4, 5] arr.sort(function () { return Math.rando

  • Javascript中数组去重与拍平的方法示例

    数组的判断 在说如何进行数组的去重和拍平之前,先说一下怎么判断数组,因为要进行数组的处理当然要先判断下传过来的数据是不是数组. 首先我们都知道js的数据类型只有5种,分别是Undefined.Null.Boolean.Number和String,数组只是一个对象,用typeof([])返回的结果知识一个Object的字符串,因此我们需要通过其他手段来判断它,这里就说两种方法. 第一种用instenceof方法 instanceof是ES5提供的一个方法,它可以用来判断实例是否是某个类的实例,例如

随机推荐