阅读 462

JS学习笔记--常用数组去重、伪数组转数组

话不多说,直接开干吧!

数组去重

第一种、最简单的思路--循环

//上面的ary总共14项,每一项都和后面的所有项比,最后一项的后面没有内容了,所以我们不需要再比较,所以总共循环length-1次
for (var i = 0; i < ary.length - 1; i++) {
    var cur = ary[i];//=>当前项
    //这一项和后面的每一项进行比较
    //i+1:把当前项和它后面项比较,当前项索引是i,后一项索引是i+1
    for (var j = i + 1; j < ary.length; j++) {
        if (cur === ary[j]) {
            //如果比较的这一项和当前项相同,在原有数组中把作比较的这一项删除掉(作比较这一项的索引是j)
            ary.splice(j, 1);
            //这里会造成一个问题使用splice删除数组中的某一项后,删除这一项后面的每一项索引都要向前进一位(在原有索引上减一),但是下一次循环还是会j++造成被删的后一项直接被循环掠过,所以此时应该j--来解决这个问题。
            j--;
        }
    }
}
复制代码

当然我们也可以这样来玩玩儿

for (var i = 0; i < ary.length - 1; i++) {
    var cur = ary[i];
    //二次循环只有不执行去重的时候我们再j++
    for (var j = i + 1; j < ary.length;) {
        if (cur === ary[j]) {
            ary.splice(j, 1);
        } else {
            j++;
        }
       
    }
}
复制代码

还可以在偷懒一点

for (var i = 0; i < ary.length - 1; i++) {
    var cur = ary[i];
    for (var j = i + 1; j < ary.length;) {
       //三目运算代替if else 程序员必备良品啊
        cur === ary[j] ? ary.splice(j, 1) : j++;
    }
}
复制代码

第二种方法、利用对象去重

var obj = {};
for (var i = 0; i < ary.length; i++) {
    var cur = ary[i];
    if (typeof obj[cur] !== 'undefined') {
    //对象中已经存在该属性说明当前项是数组中的重复项,用最后一项来代替这一项,然后删除最后一项(这里也可以用splice,但是用splice更耗费性能)
        ary[i] = ary[ary.length - 1];
        ary.length--;
        i--;
        continue;
    }
    obj[cur] = cur;
}
复制代码

第三种、indexOf法去重

for (var i = 0; i < ary.length; i++) {
    var cur = ary[i];
    //把当前项后面的那些值以一个新数组返回。
    var curNextAry = ary.slice(i + 1);
    //遍历后面的项组成的新数组。
    if (curNextAry.indexOf(cur) > -1) {
        //后面项组成的数组中包含当前这一项就把当前这一项删除
        ary.splice(i, 1);
        i--;
    }
}
复制代码

第四种、排序后相邻去重法

function uniq(ary){
   //先把数组排序,相同的元素就会相邻。
    ary.sort();
    var temp=[ary[0]];
    for(var i = 1; i < ary.length; i++){
      //遍历数组 与新数组最后一个值比较(也就是和原来他相邻的那个数比较)
        if( ary[i] !== temp[temp.length-1]){
         //不相同就加入新数组
            temp.push(ary[i]);
        }
    }
    return temp;
}
复制代码

第五种、ES6新增方法Set

console.log(new Set(arr));//这样就能得到一个新的去重类数组
复制代码

怎么把类数组转换为数组就看下面的方法吧

当然,还有其他的方法这里只是列举了部分。

类数组转数组

第一种、最笨的方法---声明一个空数组,通过遍历伪数组把它们重新添加到新的数组中。

var aLi = document.querySelectorAll('li');
     var arr = [];
     for (var i = 0; i < aLi.length; i++) {
         arr[arr.length] = aLi[i]
     }
复制代码

第二种、使用call或者apply改变this指向,让类数组拥有数组的方法

var arr = Array.prototype.slice.call(aLi);
复制代码

讲讲他的原理吧

首先,模拟下slice的内部实现机制

Array.prototype.slice = function(start,end) {
    var result = new Array();
    //没传参数给的默认值
    var start = start || 0;
    var end = end || arr.length;
    for (var i = start; i < end; i++) {
    // this=》当前调用slice的那个数组
        result.push(this[i]);
    }
    return result;
}
复制代码

由上面的代码可以发现改变slice的this指向后可以构建出一个新数组。

第三种、ES6中数组的新方法 from()

var newArg = Array.from(aLi);
复制代码

当然jQuery也提供了两种方法makeArray(),toArray()。

当然,还有其他的方法这里只是列举了部分。

😁这篇笔记到这里就结束啦😁

文章分类
前端