js数组去重

简介: js数组去重的几种方法

1.双重循环
每次插入一个元素的时候都和前面的每个元素比较一下

var array = [1, 1, '1', '1'];
function unique(array) {
    // res用来存储结果
    var res = [];
    for (var i = 0, arrayLen = array.length; i < arrayLen; i++) {
        for (var j = 0, resLen = res.length; j < resLen; j++ ) {
            if (array[i] === res[j]) {
                break;
            }
        }
        // 如果array[i]是唯一的,那么执行完循环,j等于resLen
        if (j === resLen) {
            res.push(array[i])
        }
    }
    return res;
}

console.log(unique(array)); // [1, "1"]

2.indexOf
原理和双重循环是一样的

var array = [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));

3.排序后去重
对于排好序的数组,可以将每个元素与前一个比较

var array = [1, 1, '1'];

function unique(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;
}

console.log(unique(array));

4.Object 键值对
把每一个元素存成 object 的 key。例如 ['a'],存成{'a': true}

var array = [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(array)); // [1, 2]

我们可以发现,是有问题的,因为 1 和 '1' 是不同的,但是这种方法会判断为同一个值,这是因为对象的键值只能是字符串,所以我们可以使用 typeof item + item 拼成字符串作为 key 值来避免这个问题:

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"]

然而,即便如此,我们依然无法正确区分出两个对象,比如 {value: 1} 和 {value: 2},因为typeof item + item 的结果都会是 object[object Object],不过我们可以使用 JSON.stringify 将对象序列化:

var array = [{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)); // [{value: 1}, {value: 2}]

5.ES6 Set去重

function unique(array) {
   return Array.from(new Set(array));
}
function unique(array) {
    return [...new Set(array)];
}

6.ES6 Map

function unique (arr) {
    const seen = new Map()
    return arr.filter((a) => !seen.has(a) && seen.set(a, 1))
}
相关文章
|
6月前
|
JavaScript 前端开发
js实现对象数组去重
js实现对象数组去重
45 0
|
24天前
|
前端开发 JavaScript 算法
使用 JavaScript 数组方法实现排序与去重
【10月更文挑战第21天】通过灵活运用 `sort()` 方法和 `filter()` 方法,我们可以方便地实现数组的排序和去重。同时,深入理解排序和去重的原理,以及根据实际需求进行适当的优化,能够更好地应对不同的情况。可以通过实际的项目实践来进一步掌握这些技巧,并探索更多的应用可能性。
97 59
|
2月前
|
JavaScript
js数组去重
js数组去重
105 55
|
6月前
|
存储 JavaScript 前端开发
史上最详细JavaScript数组去重方法(11种)
使用set和Array.from ()方法 array.from可以将set结构转成数组
61 7
|
1月前
|
存储 JavaScript 前端开发
JavaScript数组去重的八种方法详解及性能对比
在JavaScript开发中,数组去重是一个常见的操作。本文详细介绍了八种实现数组去重的方法,从基础的双重循环和 indexOf() 方法,到较为高级的 Set 和 Map 实现。同时,分析了每种方法的原理和适用场景,并指出了使用 Set 和 Map 是目前最优的解决方案。通过本文,读者可以深入理解每种方法的优缺点,并选择最合适的数组去重方式。
62 0
|
1月前
|
JavaScript 索引
js数组去重的常见方法
js数组去重的常见方法
37 0
|
5月前
|
存储 JavaScript 前端开发
JS中数组去重的几种方法
JS中数组去重的几种方法
27 1
|
4月前
|
JavaScript
JS 数组去重(含简单数组去重【5种方法】、对象数组去重【2种方法】)
JS 数组去重(含简单数组去重【5种方法】、对象数组去重【2种方法】)
46 0
|
4月前
|
JavaScript 前端开发 C++
JavaScript 数组去重——普通数组去重 vs 对象数组去重
JavaScript 数组去重——普通数组去重 vs 对象数组去重
33 0
|
6月前
|
JavaScript
分享经典面试题:JS数组去重的多种方法
分享经典面试题:JS数组去重的多种方法