zoukankan      html  css  js  c++  java
  • 深入浅出:了解世上最全的数组去重方式

     //第一种:IndexOf(最简单数组去重法)
    /*
    * 新建一新数组,遍历传入数组,值不在新数组就push进该新数组中
    * IE8以下不支持数组的indexOf方法
    * */
    function uniq(array) {
    var temp = []; //一个新的临时数组
    for (var i = 0; i < array.length; i++) {
    if (temp.indexOf(array[i]) == -1) {
    temp.push(array[i]);
    }
    }
    return temp;
    }
    var aa = [{}, {}, 2, 4, 9, 6, 7, 5, 2, 3, 5, 6, 5];
    var bb = [2, 4, 9, 6, 7, 5, 2, 3, 5, 6, 5]
    console.log(uniq(aa)); //[{},{},2,4,9,6,7,5,3] 无法去除空对象
    console.log(uniq(bb)); //[2,4,9,6,7,5,3]
     

    (2)也可以用lastIndexOf 

    function unique(arr){
    var res = [];
    for(var i=0; i<arr.length; i++){
    res.lastIndexOf(arr[i]) !== -1 ? '' : res.push(arr[i]);
    }
    return res;
    }
    console.log(unique([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4, {}, {},[],[]])); //[1, 2, 3, 5, 6, 7, 4, {}, {}, Array(0), Array(0)]
    //第二种去重:(可去重复对象)
    /*
    * 速度最快, 占空间最多(空间换时间)
    *
    * 该方法执行的速度比其他任何方法都快, 就是占用的内存大一些。
    * 现思路:新建一js对象以及新数组,遍历传入数组时,判断值是否为js对象的键,
    * 不是的话给对象新增该键并放入新数组。
    * 注意点:判断是否为js对象键时,会自动对传入的键执行“toString()”,
    * 不同的键可能会被误认为一样,例如n[val]-- n[1]、n["1"];
    * 解决上述问题还是得调用“indexOf”。*/
    function uniq(array) {
    var temp = {},
    arr = [],
    len = array.length,val, type;
    for (var i = 0; i < len; i++) {
    val = array[i];
    type = typeof val;
    if (!temp[val]) {
    temp[val] = [type];
    arr.push(val);
    } else if (temp[val].indexOf(type) < 0) {
    temp[val].push(type);
    arr.push(val);
    }
    }
    return arr;
    }

    var aa = [1, 2, "2", 4, 9, "a", "a", 2, 3, 5, 6, 5];
    var bb = [{a:1},{a:1},[],[],NaN,NaN,null,null,1,1,"1","1","a","a"]
    console.log(uniq(aa));// [1, 2, "2", 4, 9, "a", 3, 5, 6]
    console.log(uniq(bb));// [{a:1}, Array(0), NaN, null, 1, "1", "a"]
     

    // 第三种去重(无法去空对象)

    /*
    * 给传入数组排序,排序后相同值相邻,
    * 然后遍历时,新数组只加入不与前一值重复的值。
    * 会打乱原来数组的顺序
    * */
    function uniq(array){
    array.sort();
    var temp=[array[0]];
    for(var i = 1; i < array.length; i++){
    if( array[i] !== temp[temp.length-1]){
    temp.push(array[i]);
    }
    }
    return temp;
    }
    var aa = [1,2,"2",4,9,"a","a",2,3,5,6,5];
    var bb = [{},{},[],[],NaN,NaN,1,1,"a","a","b","c"];
    console.log(uniq(aa));//[1, "2", 2, 3, 4, 5, 6, 9, "a"]
    console.log(uniq(bb));// [Array(0), Array(0), 1, NaN, NaN, {…}, {…}, "a", "b", "c"]
     

    第四种去重(无法去空对象,会把NaN删掉)

    * 还是得调用“indexOf”性能跟方法1差不多,
    * 实现思路:如果当前数组的第i项在当前数组中第一次出现的位置不是i,
    * 那么表示第i项是重复的,忽略掉。否则存入结果数组。
    * */
    function uniq(array){
    var temp = [];
    for(var i = 0; i < array.length; i++) {
    //如果当前数组的第i项在当前数组中第一次出现的位置是i,才存入数组;否则代表是重复的
    if(array.indexOf(array[i]) == i){
    temp.push(array[i])
    }
    }
    return temp;
    }
    var aa = [1,2,"2",4,9,"a","a",2,3,5,6,5];
    var bb = [{},{},[],[],NaN,NaN,1,1,"a","a","b","c"];
    console.log(uniq(aa));//[1, "2", 2, 3, 4, 5, 6, 9, "a"]
    console.log(uniq(bb));// [{…}, {…}, Array(0), Array(0), 1, "a", "b", "c"]
     

    //第五种:定义一个新数组,并存放原数组的第一个元素,然后将元素组一一和新数组的元素对比,若不同则存放在新数组中。(无法去除空对象)

    function unique(arr) {
    var res = [arr[0]];
    for (var i = 1; i < arr.length; i++) {
    var repeat = false;
    for (var j = 0; j < res.length; j++) {
    if (arr[i] === res[j]) {
    repeat = true;
    break;
    }
    }
    if (!repeat) {
    res.push(arr[i]);
    }
    }
    return res;
    }
    console.log(unique([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4, {}, {},[],[]]));//[1,2,3,5,6,7,4,{},{},[],[]]
     

    // 第六种去重(无法去空对象)

    // 思路:获取没重复的最右一值放入新数组
    * 推荐的方法
    * 方法的实现代码相当酷炫,
    * 实现思路:获取没重复的最右一值放入新数组。
    * (检测到有重复值时终止当前循环同时进入顶层循环的下一轮判断)*/
    function uniq(array) {
    var temp = [];
    var l = array.length;
    for (var i = 0; i < l; i++) {
    for (var j = i + 1; j < l; j++) {
    if (array[i] === array[j]) {
    i++;
    j = i;
    }
    }
    temp.push(array[i]);
    }
    return temp;
    }
    var aa = [1,2,"2",4,9,"a","a",2,3,5,6,5];
    var bb = [{},{},[],[],NaN,NaN,1,1,"a","a","b","c"];
    console.log(uniq(aa));// [1, "2", 4, 9, "a", 2, 3, 6, 5]
    console.log(uniq(bb));// [{…}, {…}, Array(0), Array(0), NaN, NaN, 1, "a", "b", "c"]
     

     第七种:对象去重:(利用属性名不重复,后面会覆盖前面,可去空对象)

    var ary1 =[{},{},[],[],"a","a",1,2,2,1,6,NaN,NaN,null,null];
        function uniq(ary1){
            var obj={};
            var arr=[];
         for (var key in ary1){
          obj[ary1[key]]=ary1[key]
            }
         for(var key in obj){
        arr.push(obj[key])
    }
    console.log(arr);//[1, 2, 6, {…}, Array(0), "a", NaN, null]
    }
    uniq(ary1)

     第八种去重(es6):

    1.Set去重:
    ES6中新增了Set数据结构,类似于数组,但是 它的成员都是唯一的 ,其构造函数可以接受一个数组作为参数,如:

    let array = [1, 1, 1, 1, 2, 3, 4, 4, 5, 3];
    let set = new Set(array);
    console.log(set); // => Set {1, 2, 3, 4, 5};

     

    2.Set配合Array.from

    ES6中新增了一个静态方法可以把类似数组的对象转换为数组,如通过querySelectAll方法得到HTML DOM Node List,以及ES6中新增的等可遍历对象,如:

    let array = Array.from(new Set([1, 1, 1, 2, 3, 2, 4]));
    console.log(array); // => [1, 2, 3, 4]


    3.Map对象(无法去重复空对象)

    var arr =[{},{},[],[],"a","a",1,2,2,1,6,NaN,NaN,null,null];
    var brr = ["a","a",1,2,2,1,6]
    function unique(arr) {
    const res = new Map();
    return arr.filter((a) => !res.has(a) && res.set(a, 1))
    }
    console.log(unique(arr))//[{…}, {…}, Array(0), Array(0), "a", 1, 2, 6, NaN, null]
    console.log(unique(brr))// ["a", 1, 2, 6]

    4.filter(无法去重复空对象)

    var oldArr = [1, 2, 1, 2, 1, 23, 4, 1, 23, 24, 4, 5, 2, 3, 6, 7];
    var oldArr1 = [{},{},[],[],NaN,NaN,"a","a"]
    function uniq(arrs){
    var arr = arrs.filter(function (item, index) {
    //每拿到一项,然后去看之前组成的数组中有没有这一项,如果有不留下,没有的话留下
    return !(arrs.slice(0, index).includes(item));
    });
    return arr;
    }
    console.log(uniq(oldArr));//[1, 2, 23, 4, 24, 5, 3, 6, 7]
    console.log(uniq(oldArr1));//[{…}, {…}, Array(0), Array(0), NaN, "a"]

    5.可去重复对象的去重

    var arr =[{a:1},{a:2},[],[],1,1,"a","a","b"];
    (function(){//去除数组中重复对象
    var unique = {};
    arr.forEach(function(a){ unique[ JSON.stringify(a) ] = 1 });
    arr= Object.keys(unique).map(function(u){return JSON.parse(u) });
    return arr;
    })(arr)
    console.log(arr)// [1, {a:1}, {b:2}, Array(0), "a", "b"]



    以上是我找了各种示例总结的,如果道友还有,求分享一下,谢谢!

  • 相关阅读:
    直播流RTMP 知识
    XSSearch 说明文档保存
    网海茫茫,有你最暖
    实践中 XunSearch(讯搜)更新索引方案对比
    实践中 XunSearch(讯搜)的使用教程步骤
    留的住的叫幸福,流逝的叫遗憾
    百度API ; 很多有用的接口及公用 数据
    ecshop 模板开发总结
    jquery库和cityselect插 件的省市 级联
    PHP Excel 下载数据,并分页下载
  • 原文地址:https://www.cnblogs.com/yunshangwuyou/p/9666856.html
Copyright © 2011-2022 走看看