数组去重

前端开发

数组去重是一个比较常用的操作，在ES5时代我们一般通过loop循环来判断数组中是否有元素重复，这种方法在现在看来是比较古老了，而且代码量大（相比之下）。

来到ES6时代，我们很容易就可以实现数组去重的功能，而且仅仅需要两三行代码就搞定，需要用到ES6的扩展运算符和Set数据解构来实现。

1. 扩展运算符

扩展运算符是三个点（...），其作用为将一个数组转为一组参数序列。

console.log(...[1,2,3])  //1 2 3
console.log(1, ...[1,2,3], 5)  //1 2 3 4 5

这个扩展运算符麻雀虽小，但可谓大有作为。
例如，在对于合并数组，用ES5语法我们要这样写：

[1,2].concat([2,3,4]);  //[1,2,2,3,4]

而在ES6中，用扩展运算符可更简洁直观地表示出来：

[1,2, ...[2,3,4]]；  //[1,2,2,3,4]

又如，扩展运算符可以将字符串转为真正的数组：

[...'hello'];  //['h', 'e', 'l', 'l', 'o']

或如，将任何类似数组的对象转为真正的数组：

var nodeList = document.querySelectorAll('all');
var arr = [...nodeList];

上面代码中，querySelectorAll方法返回的是一个nodeList对象，扩展运算符可以将其转为真正的数组。

2. Set

ES6提供了新的数据结构——Set。它类似与数组，但其特点为成员的值都是唯一的，没有重复的值。
Set本身时一个构造函数，用来生成Set数据结构。

var s = new Set();
[2,3,5,4,5,2,2].map(x => s.add(x))
for (i of s) {console.log(i)}  // 2 3 5 4

上面代码通过add方法向Set结构加入成员，结果表明Set结构不会添加重复的值。

Set函数可以接受一个数组（或类似数组的对象）作为参数，用于初始化。

let set = new Set([1,2,3,4,4,5,5,5]);
[...set];  // [1,2,3,4,5]
set.size;  // 5

Set实例有4个操作方法：

• add(value)：添加某个值，返回Set结构本身。
• delete(value)：删除某个值，返回一个布尔值，表示删除是否成功。
• has(value)：返回一个布尔值，表示参数是否为Set的成员。
• clear()：清除所有成员，没有返回值

let set =new Set([1,2,3,4,4]);
s.add(5).add(6);
s.size;  //6
s.has(5)  //true
s.delete(6);
s.has(6)  //false

3. 数组去重

方法一：

function arrUni(a) {return Array.from(new Set(a));}  //Array.from方法可将Set结构转为数组
arrUni([1,1,2,3]);  //[1,2,3]    

方法二:

function arrUni(a){return [... new Set(a)]}
arrUni([1,2,3,4,4,3,5])   //[1,2,3,4,5]

若用函数定义，甚至还可以写成这样...

var arrUni = a => [... new Set(a)];

加上元素排序功能：

var arrUni = a => [... new Set(a)].sort((a,b)=>a-b);

4. 算法实现

以下是通过loop循环用算法实现的数组去重方法。

1. 比较两个元素是否相等，若相等，则把第二个元素从数组中删除

function arrUnique1(a){
        for(var i=0;i<a.length;i++)
            for(var j=i+1;j<a.length;j++)
                if(a[i]===a[j]){
                    a.splice(j,1);
                    j--;
                }
        return a.sort((a,b)=>a-b);
    }

2. 比较两个元素是否相等，若不相等，则将第一个元素推入数组b，若相等，则跳出循环，继续执行。最后返回数组b。

function arrUnique2(a) {
       let b =[],
           i,
           j;
       for (i = 0; i < a.length; i++) {
           for (j = i + 1; j < a.length; j++){
               if (a[i] === a[j]){
                   j=false;
                   break;
               }
           }
           if(j){
               b.push(a[i]);
           }
       }
       return b.sort((a,b)=>a-b);
   }

3. 比较两个元素是否相等，若相等，则将整个循环向前移动一位，若一个元素之后没有与其相等的元素，则将其推入数组b。最后返回数组b。

function arrUnique3(a) {
   var b = [],
        i,
        j;
   for (i = 0; i < a.length; i++) {
       for (j = i + 1; j < a.length; j++){
           if (a[i] === a[j]){
               j = ++i;
           }
       }
       b.push(a[i]);
   }
   return b.sort((a,b)=>a-b);
}

4. 利用对象来判断元素是否重复。

function arrUnique4(a){
   var m,
        b = [],
        o = {};
   for (var i = 0; (m = a[i]) !== undefined; i++){
       if (!o[m]){
           b.push(m);
           o[m] = true;
       }
   }
   return b.sort((a,b)=>a-b);
}