数组去重的几种实现方式

Posted on   |   In   |     |  

下面每种方法都采用普通的函数模式封装和原型模式封装

方法一:

普通函数模式封装

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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>数组去重</title>
</head>

<body>
    <script>
    var arr1 = [1, 2, 2, 3, 4, 3, 5, 4];

    function unique(arr) {
        var n = []; //声明一个临时数组
        for (var i = 0; i < arr.length; i++) {
            if (n.indexOf(arr[i]) == -1) n.push(arr[i]);//如果当前数组的第i项已经保存进了临时数组，那么跳过， 否则把当前项push到临时数组里面，运用了indexOf方法的使用
        }
        return n;
    }
    console.log(unique(arr1)); //[1, 2, 3, 4, 5]

    </script>
</body>

</html>

原型模式

与函数模式的不同是直接将这个去重方法封装到数组Array的原型属性当中，这样每一个数组都能后通过原型链访问到这个方法

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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>数组去重</title>
</head>

<body>
    <script>
    var arr1 = [1, 2, 2, 3, 4, 3, 5, 4];

    Array.prototype.unique = function() {
        var n = []; //声明一个临时数组
        for (var i = 0; i < this.length; i++) {
            if (n.indexOf(this[i]) == -1) n.push(this[i]);//如果当前数组的第i项已经保存进了临时数组，那么跳过，否则把当前项push到临时数组里面
        }
        return n;
    }
    console.log(arr1.unique());//[1, 2, 3, 4, 5]

    </script>
</body>

</html>

方法二:

普通函数模式封装

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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>数组去重</title>
</head>

<body>
    <script>
    var arr1 = [1, 2, 2, 3, 4, 3, 5, 4];

     function unique(arr) {
      var n = {}, //n为一个hash对象
          r = []; //r为一个临时数组
      for (var i = 0; i < arr.length; i++) {
          if (!n[arr[i]]){ //如果hash表中没有当前项
              n[arr[i]] = true; //存入hash表
              r.push(arr[i]); //把当前数组的当前项push到临时数组里面
          }
      }
      return r;
    }
    console.log(unique(arr1));//[1, 2, 3, 4, 5]

    </script>
</body>

</html>

原型模式

与函数模式的不同是直接将这个去重方法封装到数组Array的原型属性当中，这样每一个数组都能后通过原型链访问到这个方法

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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>数组去重</title>
</head>

<body>
    <script>
    var arr1 = [1, 2, 2, 3, 4, 3, 5, 4];

     Array.prototype.unique = function() {
      var n = {}, //n为hash表
          r = []; //r为临时数组
      for (var i = 0; i < this.length; i++) {
          if (!n[this[i]]) { //如果hash表中没有当前项
              n[this[i]] = true; //存入hash表
              r.push(this[i]); //把当前数组的当前项push到临时数组里面
          }
      }
      return r;
   }
    console.log(arr1.unique1()); //[1, 2, 3, 4, 5]
    </script>
</body>

</html>

方法三

普通函数模式封装

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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>数组去重</title>
</head>

<body>
    <script>
    var arr1 = [1, 2, 2, 3, 4, 3, 5, 4];

    function unique(arr) {
        var n = [arr[0]]; //结果数组
        for (var i = 1; i < arr.length; i++) { //从第二项开始遍历
            if (arr.indexOf(arr[i]) == i)  n.push(arr[i]);
            //如果当前数组的第i项在当前数组中第一次出现的位置不是i， 那么表示第i项是重复的，忽略掉。否则存入结果数组
        }
        return n;
    }
    console.log(unique(arr1));//[1, 2, 3, 4, 5]

    </script>
</body>

</html>

原型模式

与函数模式的不同是直接将这个去重方法封装到数组Array的原型属性当中，这样每一个数组都能后通过原型链访问到这个方法

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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>数组去重</title>
</head>

<body>
    <script>
    var arr1 = [1, 2, 2, 3, 4, 3, 5, 4];

    Array.prototype.unique = function() {
        var n = [this[0]]; //结果数组
        for (var i = 1; i < this.length; i++) { //从第二项开始遍历
            if (this.indexOf(this[i]) == i) n.push(this[i]);
            //如果当前数组的第i项在当前数组中第一次出现的位置不是i， 那么表示第i项是重复的，忽略掉。否则存入结果数组
        }
        return n;
    }
    console.log(arr1.unique1()); //[1, 2, 3, 4, 5]
    </script>
</body>

</html>

结语

这里总结这几种方法，也是提醒自己以后遇到问题注意发散思维，并且通过发散思维还能够让自己收获更多相关的知识运用，何乐而不为。