用生命谱写代码的赞歌

0%

数组去重的几种方式

Posted on Edited on In
随手总结了数组去重常用的几种方式。

数组去重方式有很多，下面详细说明几种常用的方式。

indexOf 方式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<div id="dv"></div>
<div id="dv2"></div>
<p id="pp"></p>

<body>
    <script>
        function my$(id) {
            return document.getElementById(id)
        }
        var arr = [1, 2, 3, '1', '2', 1]
        var arr2 = [my$('dv'), my$('dv'), my$('pp'), my$('pp'), my$('dv2')]
        // 1. 普通方式去重
        function unique(arr) {
            // 去重数组结果集
            var ret = []
            for (var i = 0, l = arr.length; i < l; i++) {
                if (ret.indexOf(arr[i]) === -1) {
                    ret.push(arr[i])
                }
            }
            return ret
        }
        var newArr = unique(arr)
        var elemArr = unique(arr2)
        console.log(newArr)
        console.log(elemArr)
    </script>
</body>

</html>

对象添加属性方式去重

1
2
3
4
5
6
7
8
9
10
11
12
13
// 2. hash对象添加属性方式去重(有瑕疵，会去掉字符串的重复值)
// 一个对象不可能作为另一个对象的属性名，因为对象的属性名只能用字符串表示，默认会调用对象的toString方法将对象转化为字符串
function hashUnique(arr) {
    var ret = [],
        hash = {}
    for (var i = 0, l = arr.length; i < l; i++) {
        if (!hash[arr[i]]) {
            ret.push(arr[i])
            hash[arr[i]] = 1
        }
    }
    return ret
}

解决字符串重复问题

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 3. 解决字符串重复值(以空间换区时间，使用对象比较占用空间)，对DOM元素组成的数组无法去重
function dereplicate(arr) {
    var type, ret = [], hash = {}
    for (var i = 0, l = arr.length; i < l; i++) {
        type = typeof arr[i]
        // 如果hash对象具有type属性
        if (hash[type]) {
            if (!hash[type][arr[i]]) {
                ret.push(arr[i])
                hash[type][arr[i]] = 1
            }
        } else {  // 不具有type属性，表示不是重复值
            ret.push(arr[i])
            hash[type] = {}
            hash[type][arr[i]] = 1
        }
    }
    return ret
}

完美解决方案

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 4. 完美去重方案
function goodUnique(arr) {
    var ret = []
    for (var i = 0, l = arr.length; i < l; i++) {
        for (var j = i + 1; j < l; j++) {
            if (arr[i] === arr[j]) {
                // 略过重复元素
                ++i
                break
            }
        }
        ret.push(arr[i])
    }
    return ret
}

相互比较元素，碰到相同的则跳出循环

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 5. 相互比较元素，碰到相同的则跳出循环
function dereplicate2(arr) {
    var ret = []
    for (var i = 0, l = arr.length; i < l; i++) {
        for (var j = i + 1; j < l; j++) {
            if (arr[i] === arr[j]) {
                j = false
                break
            }
        }
        if (j) ret.push(arr[i])
    }
    return ret
}

删除后面多余的元素

1
2
3
4
5
6
7
8
9
10
11
12
13
// 6. 删除后面多余的元素
function dereplicate3(arr) {
    for (var i = 0; i < arr.length; i++) {
        for (var j = i + 1; j < arr.length; j++) {
            if (arr[i] === arr[j]) {
                arr.splice(j, 1)
                break
                // j--  // (有点多余)
            }
        }
    }
    return arr
}