前端去重总结

最新推荐文章于 2024-07-16 15:16:34 发布

原创最新推荐文章于 2024-07-16 15:16:34 发布 · 884 阅读

1 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

38 篇文章

订阅专栏

本文介绍了三种在JavaScript中去除数组重复元素的方法：1. 使用循环与indexOf()结合；2. 利用filter()过滤重复项；3. ES6中通过Set与扩展运算符实现。详细解析了每种方法的工作原理，并提供了示例代码，帮助理解不同场景下的数组去重策略。

1 循环去重

var arrs = [2,3,4,2,5,6,1,1,3];

function unique(arr){
    var temp =[];
    for(var i = 0;i<arrs.length;i++){
        var item = arrs[i];
        if(-1 == temp.indexOf(item)){
               temp.push(item)
        }      
    }
    return temp;
}

unique(arrs);

2 filter去重

function unique(arr){
    var res = arr.filter(function(item,index,array){
      return  array.indexOf(item) === index;
    })

    return res;
}

unique([4,4,3,3,2,2,1,1])

这里解释下使用filter的原理。filter相当于是个过滤器，返回一个新的数组，array.indexOf(item) === index;相当于是判断，该元素是否
在数组中第一个出现，因为index肯定是大于等于0的嘛；当后面存在重复元素的时候，那么indexOf(item)肯定是前面那个元素的index；

3 es6 去重

    var arrs = [2,3,4,2,5,6,1,1,3];
    var unique = arrs => {return [...new Set(arrs)]}    
    console.log(unique(arrs))
    这里解释下：首先用set去重，然后用箭头函数去返回参数，用扩展运算符去构建数组
    更简单的写法：
    var unique = arrs => [...new Set(arrs)]
    1 new Set(arrs) 进行数组去重
    2 [...new Set(arrs)] 由于Set是对象，利用...扩展运算符去把它变成参数序列，然后放到数组里，构建数据
    3 用箭头函数返回