继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

JS数组去重

梁凤波
关注TA
已关注
手记 27
粉丝 4318
获赞 1744

方法一

  • 优点:简单,性能好
  • 缺点1:在IE6-8下数组的indexOf方法不存在
  • 缺点2:相同的字符串类型数值和数字类型的数值不会去重
function unique(arr) {
    var ret = [];

    for (var i = 0; i < arr.length; i++) {
        var item = arr[i];
        if (ret.indexOf(item) === -1) {
            ret.push(item);
        }
    }

    return ret;
}

方法二

  • 优化方法一:在IE6-8下数组的indexOf方法不存在时,手动添加indexOf实现方法
  • 缺点2:相同的字符串类型数值和数字类型的数值不会去重
var indexOf = [].indexOf ?
    function (arr, item) {
        return arr.indexOf(item)
    } :
    function indexOf(arr, item) {
        for (var i = 0; i < arr.length; i++) {
            if (arr[i] === item) {
                return i
            }
        }

        return -1
    }

function unique(arr) {
    var ret = []

    for (var i = 0; i < arr.length; i++) {
        var item = arr[i]
        if (indexOf(ret, item) === -1) {
            ret.push(item)
        }
    }

    return ret
}

方法三

  • 优化方法二:写2个函数方法表示很繁琐,可以使用使用对象属性来判断
  • 缺点:相同的字符串类型数值和数字类型的数值不会去重
function unique(arr) {
    var ret = [];
    var hash = {};

    for (var i = 0; i < arr.length; i++) {
        var item = arr[i];
        var key = typeof (item) + item;
        if (hash[key] !== 1) {
            ret.push(item);
            hash[key] = 1;
        }
    }

    return ret;
}

方法四

  • 优化:简单,简洁快捷
  • 缺点1:兼容低版本浏览器差
  • 缺点2:相同的字符串类型数值和数字类型的数值不会去重
function unique(arr) {
    return [...new Set(arr)];
}

方法五

  • 优点:兼容性好
  • 优化点:相同的字符串类型数值和数字类型的数值会去重
function unique(arr) {
    let ret = [];
    let obj = {};
    for (var i = 0; i < arr.length; i++) {
        let item = arr[i];
        if (!obj[item]) {
            ret.push(item);
            obj[item] = 1;
        }
    }

    return ret;
}

思考

JS去重的方法有非常多种,以上的5种仅是代表不同的差异。我觉得需要结合实际项目需求开发,根据需求来选择哪种去重方法,根据需求来修改某些条件,或者增加条件,适合需求的才是最好的去重方法。

最简单的,我不用适配低版本浏览器,也不考虑严格的数据类型值,直接用 …new Set(arr) 最快啦~

打开App,阅读手记
1人推荐
发表评论
随时随地看视频慕课网APP