zoukankan      html  css  js  c++  java
  • JavaScript数组去重

    数组去重的方法

    ES6的新方法实现数组去重

    ES6里新添加了两个很好用的东西,set和Array.from。

    • set:
      set是一种新的数据结构,它可以接收一个数组或者是类数组对象,自动去重其中的重复项目。
    var arr = [1,1,2,2,3,3,4,4,nan,nan,null,null,undefined,undefined]
    console.log(new Set(arr))
    // 输出{1,2,3,4}
    

    在这我们可以看见,重复的项目已经被去掉了,包括NaN。正常情况下,NaN === NaN 返回的是false,但是在set里,一样能够帮你去重,厉害了。
    但是这里大家可以看到,set返回的是一个对象,但是我们想要的是数组啊。
    这回,就该轮到Array.from出场了,它的作用,就是可以把类数组对象、可迭代对象转化为数组。

    var arr = [1,2,3,4,5]
    var newarr = Array.from(new Set(arr));
    console.log(newarr)
    //先讲arr去重 然后讲对象转化为数组
    

    TIP: IE去死,用IE的不配用我们的产品

    Array.filter() + indexOf

    这个方法的思路是,将两个数组拼接为一个数组,然后使用 ES6 中的 Array.filter() 遍历数组,并结合 indexOf 来排除重复项

    function distinct(a, b) {
        let arr = a.concat(b);
        return arr.filter((item, index)=> {
            return arr.indexOf(item) === index
        })
    } //ps:贼耗性能
    

    双重 for 循环

    最容易理解的方法,外层循环遍历元素,内层循环检查是否重复
    当有重复值的时候,可以使用 push(),也可以使用 splice()

    function distinct(a, b) {
        let arr = a.concat(b);
        for (let i=0, len=arr.length; i<len; i++) {
            for (let j=i+1; j<len; j++) {
                if (arr[i] == arr[j]) {
                    arr.splice(j, 1);
                    // splice 会改变数组长度,所以要将数组长度 len 和下标 j 减一
                    len--;
                    j--;
                }
            }
        }
        return arr
    }
    

    Array.sort()

    首先使用 sort() 将数组进行排序
    然后比较相邻元素是否相等,从而排除重复项

    function distinct(a, b) {
        let arr = a.concat(b)
        arr = arr.sort()
        let result = [arr[0]]
    
        for (let i=1, len=arr.length; i<len; i++) {
            arr[i] !== arr[i-1] && result.push(arr[i])
        }
        return result
    }
    

    for...of + Object

    这个方法我只在一些文章里见过,实际工作中倒没怎么用
    首先创建一个空对象,然后用 for 循环遍历
    利用对象的属性不会重复这一特性,校验数组元素是否重复

    function distinct(a, b) {
        let arr = a.concat(b)
        let result = []
        let obj = {}
    
        for (let i of arr) {
            if (!obj[i]) {
                result.push(i)
                obj[i] = 1
            }
        }
    
        return result
    }
    
  • 相关阅读:
    SpringMVC-乱码问题
    SpringMVC-数据提交
    SpringMVC-结果跳转方式
    SpringMVC-Controller&RestFul
    SpringMVC-基础
    Spring-声明式事务
    Spring-整合MyBatis
    Spring-AOP
    android 入门-工序
    android 入门-android Studio 解决方案
  • 原文地址:https://www.cnblogs.com/wangjiahui/p/11360265.html
Copyright © 2011-2022 走看看