JS：数组去重的多种方法总结与一步步优化

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了JS：数组去重的多种方法总结与一步步优化，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含4388字，纯文字阅读大概需要7分钟。

内容图文

两层for循环

这种函数的优点是兼容性好比较通用，缺点是时空复杂度都很直观的为O(n²)，不利于维护和性能。

var array = [1,1,'1','1']
function unique(array) {
    var res = []
    for (var i=0,arrlen=array.length;i<arrlen;i++) {
        for (var j = 0,reslen=res.length;j<reslen;j++) {
            if (array[i] === res[j]) {
                break
            }
        }
        if (j === reslen) {
            res.push(array[i])
        }
    }
    return res
}
console.log(unique(array)) //[1,'1']

indexOf()

通过 indexOf 简化内层代码，优化上一 两层for循环 方法。

var array = [1,1,'1','1']
function unique(array) {
    var res = []
    for (var i=0,len=array.length;i<len;i++) {
        var current = array[i]
        if (res.indexOf(current) === -1) {
            res.push(current)
        }
    }
    return res
}
console.log(unique(array)) // [1,'1']

filter()

通过 filter 简化外层循环，优化上一 indexof 方法。

var array = [1,2,1,1,'1']
function unique(array) {
    var res = array.filter(function(item,index,array) {
        return array.indexOf(item) === index
    })
    return res
}
console.log(unique(array)) // [1,2,'1']

Object键值对

1. 通过 filter 为数组的每一个元素做条件过滤。
2. 再通过 三元运算 将数组的元素作为key登录在obj中，将它对应的值设为true。
3. 通过 hasOwnProperty 判断对象是否包含某一属性（键），如果包含即返回false， filter 接收到false将会过滤掉该 item (array[index]) 的return事件。

var array1 = [1,2,1,2,1]
var array2 = [1, 2, 1, 1, '1'];
function unique(array) {
    var obj = {}
    return array.filter(function(item, index, array){
        return obj.hasOwnProperty(item) ? false : (obj[item] = true)
    })
}
console.log(unique(array1)) //[1,2]
console.log(unique(array2)) // [1, 2]

• 缺点：由于Object的键只能是String类型，因此 obj[1] 与 obj['1'] 是等价的，它们引用同一个堆栈，最终在第二数组实参中 1 和 '1' 被去重为同一个元素。

typeof()

上一个方法说到Object的键只能是String类型，所以我们可以通过 typeof item + item 的方式拼成一个字符串，来作为 hasOwnProperty 的判断依据：

var array = [1,2,1,1,'1']
function unique(array) {
    var obj = {}
    return array.filter(function(item,index,array) {
        return obj.hasOwnProperty(typeof item+item)?false:(obj[typeof item+item] = true)
    })
}
console.log(unique(array)) //[1,2,'1']

array[0]和array[4]分别被 typeof 拼接成 "number1" 和 "string1"，很好的区分了不同类型转字符串后的区别。

但是如果数组中存在对象，比如[ { name: 97 }, { descript: 'z' } ]，由于 typeof item + item 的结果都会是 object[object Object] （String类型），所以除了数组中的第一个对象，所有的对象都会被过滤。

JSON.stringify()

上一方法说到 typeof item + item 两个拥有不同键值对的对象都会返回object[object Object]，所以我们可以使用 JSON.stringify() 将对象序列化来避免相同的键值对。

var array = [1,1,2,2,'1',{value: 1}, {value: 1}, {value: 2}]
function unique(array) {
    var obj = {}
    return array.filter(function(item, index, array){
        console.log(typeof item + JSON.stringify(item))
        return obj.hasOwnProperty(typeof item + JSON.stringify(item)) ? false : (obj[typeof item + JSON.stringify(item)] = true)
    })
}
console.log(unique(array)) // [1,2,'1',{value: 1}, {value: 2}]

obj[typeof item + JSON.stringify(item)] 中假设item是object类型，就会被格式化成JSON字符串，即可区分两个不同的object。

Array.from()

根据MDN描述：

ES6 - Set()

?Set 对象是ES6中的新数据结构，根据MDN描述：

也就是说，Set对象类似于数组，但是成员的值都是唯一的，没有重复的值。那么借助于Set，数组去重将变得异常简单：

var array = [1, 2, 1, '1']
function unique(array) {
   return Array.from(new Set(array))
}
console.log(unique(array)) // [1, 2, "1"]

ES6 - Array.prototype.Map()

 Map() 在参数上和 filter() 类似，可以通过它来改写 unique().

var array = [1, 2, 1, '1'];
function unique(array) {
    const seen = new Map()
    return array.filter(function(item,index,array) {
        return !seen.has(item) && seen.set(item,1)
    })
}
console.log(unique(array)) //[1,2,'1']

总结

如果有这样一个数组

var array = [1, 1, '1', '1', null, null, undefined, undefined, new String('1'), new String('1'), /a/, /a/, NaN, NaN];

用不同的方法对其去重，来查看方法的兼容性：

相关资源：JS数组去重方法总结.

- END -

内容总结

以上是互联网集市为您收集整理的JS：数组去重的多种方法总结与一步步优化全部内容，希望文章能够帮你解决JS：数组去重的多种方法总结与一步步优化所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端