数组去重方法总结

常用的方法:

  1. ES6 Set去重
  2. 双重for循环+splice()方法去重
  3. indexOf()去重
  4. includes()去重
  5. filter()方法去重

ES6 中的 Set 去重

Set 数据结构,类似数组,区别在于它所有的成员都是唯一的,不能有重复的值。它本身是一个构造函数。

let arr = [1, 2, 2, 3];
let set = new Set(arr);
console.log(set);  //{1,2,3} 是一个对象
let newArr = Array.from(set);//将对象转成数组
console.log(newArr); // [1, 2, 3]

// 最终简化为一行代码:
let array = Array.from(new Set([1, 2, 2, 3]))
console.log(array )

拓展了解:
      let arr = [1, 2, 2, 3, 3, 3, 3, 4, 4, 4, 4, 5];
      let set = new Set(arr);
      console.log(set);
      console.log(set.size); //5
      console.log(set.add(9)); //Set(6) {1, 2, 3, 4, 5, 9}
      console.log(set.delete(9)); //true
      console.log(set.has(9)); // false 因为上面已经删除
      set.clear(); // 清空set数据结构中的所有数据
      console.log(set); //Set(0) {}
      // let testArr = new Array() // 用来去重数组
      // console.log(testArr)
      // let newArr = Array.from(set) // 把类数组转成数组
      // console.log(newArr) // [1, 2, 3]

set数据结构打印如下:
在这里插入图片描述

Array.form可以把一个类数组或者可比案例对象转化成一个真正的数组
在这里插入图片描述

使用新数组变量来装去过重的数组 去重方法:

    <script>
		//定义一个数据重复的数组
        var arr = [1,2,3,45,2,3,1,5,8,9];
		//定义一个空数组,用于接收去重后的数组元素
        var newarr = [];
        //便利arr数组,判断新数组的在这个位置有木有这个元素,如果有返回0,没有就返回-1,
        //这里大家自己打印
        for(var i = 0;i<arr.length;i++){
            if(newarr.indexOf(arr[i])<0){
                newarr.push(arr[i])
            }
        }    
        console.log(newarr);//[1, 2, 3, 45, 5, 8, 9]
    </script>

使用对象方法来数组去重

var array = [1, '1', 1, 2, 3, 2, 4];
var tmpObj = {};
var result = [];
array.forEach(function(a) {
  var key = (typeof a) + a;
  if (!tmpObj[key]) {
    tmpObj[key] = true;
    result.push(a);
  }
});
console.log(result);
// => [1, "1", 2, 3, 4]

Object 键值对方法:

function distinct(array) {
    var obj = {};
    return array.filter(function(item, index, array){
        return obj.hasOwnProperty(typeof item + item) ? false : (obj[typeof item + item] = true)
    })
}
这种方法是利用一个空的 Object 对象,我们把数组的值存成 Object 的 key 值,比如 Object[value1] = true,在判断另一个值的时候,如果 Object[value2]存在的话,就说明该值是重复的,但是最后请注意这里obj[typeof item + item] = true没有直接使用obj[item],是因为 123 和 '123' 是不同的,直接使用前面的方法会判断为同一个值,因为对象的键值只能是字符串,所以我们可以使用 typeof item + item 拼成字符串作为 key 值来避免这个问题。

双层 for 循环

function distinct(arr) {
    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;
}
// splice(index,howManny)  从什么位置开始删除,删除的个数。返回删除之后的新的数组

Array.filter() 加 indexOf

思想: 利用indexOf检测元素在数组中第一次出现的位置是否和元素现在的位置相等,如果不等则说明该元素是重复元素
function distinct(a, b) {
    let arr = a.concat(b);
    return arr.filter((item, index)=> {
        return arr.indexOf(item) === index
    })
}
// filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。
// 注意: filter() 不会对空数组进行检测。
// 注意: filter() 不会改变原始数组。

Array.sort() 加一行遍历冒泡(相邻元素去重)

function distinct(array) {
    var res = [];
    var sortedArray = array.concat().sort();
    var seen;
    for (var i = 0, len = sortedArray.length; i < len; i++) {
        // 如果是第一个元素或者相邻的元素不相同
        if (!i || seen !== sortedArray[i]) {
            res.push(sortedArray[i])
        }
        seen = sortedArray[i];
    }
    return res;
}

思想: 调用了数组的排序方法 sort(),V8引擎 的 sort() 方法在数组长度小于等于10的情况下,会使用插入排序,大于10的情况下会使用快速排序(sort函数在我之前高阶函数那篇文章有详细讲解【JS必知必会】高阶函数详解与实战)。然后根据排序后的结果进行遍历及相邻元素比对(其实就是一行冒泡排序比较),如果相等则跳过该元素,直到遍历结束。

第三方库lodash数组去重

简单说下 lodash 的 uniq 方法的源码实现。

这个方法的行为和使用 Set 进行去重的结果一致。

当数组长度大于等于 200 时,会创建 Set并将 Set 转换为数组来进行去重(Set 不存在情况的实现不做分析)。当数组长度小于 200 时,会使用类似前面提到的 双重循环 的去重方案,另外还会做 NaN 的去重。

本文章是根据所有的经验总结而来,入有侵权,联系删除

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值