个人总结的几种数组去重方法

发表于

标签： 数组 JavaScript

前言

  博客第一篇技术文章（非常基础,因为我太菜了）总结了几种不同方法的数组去重方法。文章不是很全面，还有例如利用对象唯一性去重等方法，可是我觉得太麻烦和有些缺点就没有收集了。


双循环

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function unique(arr) {
      var result = [];
      for (var i = 0; i < arr.length; i++) {
        //对于原数组的每个元素遍历
        for (var j = i + 1; j < arr.length; j++) {
          //对选定元素跟后面的各个元素遍历比较
          if (arr[i] === arr[j]) {
            // 遇到重复元素就跳过
            j = ++i;
          }
        }
        //将不重复的元素添加到result数组
        result.push(arr[i]);
      }
      return result;
    }

说明：这就是基本的双循环去重。注释已经较好的说明原理，注意的就是j=++i;相当于j = j+1; i = i+1;。

sort()

1
2
3
4
5
6
7
8
9
10
11
12
function unique(arr) {
    var result = [];
    //先将原数组排序，再比较
    arr.sort();
    for (var i = 0; i < arr.length; i++) {
      if (arr[i] != arr[i + 1]) {
      //元素跟后一个元素比较，不同则添加
        result.push(arr[i]);
      }
    }
    return result;
  }

说明：由于排序的缘故，元素只需跟后一个元素比较就可以了，该方法效率偏低，但思路很清晰。

indexOf()

1
2
3
4
5
6
7
8
9
10
function unique(arr) {
      var result = [];
      for (var i = 1; i < arr.length; i++) {
        if (result.indexOf(arr[i]) === -1) {
        //在result中没找到的元素，就进行添加
          result.push(arr[i]);
        }
      }
      return result;
    }

说明：indexOf()是es5的语法，对它不熟悉的话可以点击下面的链接浏览一下。去重的原理是indexOf()会对没找到的元素，返回-1，此时添加此元素即可去重。

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf

includes()

1
2
3
4
5
6
7
8
9
function unique(arr) {
      var result = [];
      arr.forEach(function(item) {
        if (!newArr.includes(item)) {
          result.push(item);
        }
      });
      return result;
    }

说明：原理跟上面的indexOf()一样，值得注意的是forEach()是es5语法，ie6-8是不能用的，mdn上有兼容的方法。forEach()的作用是遍历数组元素，对它们执行相同的方法。includes()方法用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回true，否则返回false。下面链接介绍它们的用法。
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/includes

Map（es6)

对于es6不熟悉的人（我）可以看看阮一峰大神的著作，里面就有详细的Map和Set的说明
http://es6.ruanyifeng.com/#docs/set-map

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function unique(arr) {
      const res = new Map();
      return arr.filter((a) => !res.has(a) && res.set(a, 1))
    }

    function unique0(arr) {
      var result = [];
      var len = arr.length;
      var tmp = new Map();
      for (var i = 0; i < len; i++) {
        if (!tmp.get(arr[i])) {
          tmp.set(arr[i], 1);
          result.push(arr[i]);
        }
      }
      return newArr;
    }

说明：关于这部分我还不是很熟悉，待我研究后再来补充吧。
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Map

Set（es6)

1
2
3
4
function unique(arr) {
//使用Array.from()将Set对象转化为数组
      return Array.from(new Set(arr));
    }
1
2
// 拓展运算符(…)内部使用for...of循环,for...of支持数组，和类数组对象
let result=[...new Set(arr)];

说明：你没看错，去重就这么简单，具体的原理我再来补充吧！