解鎖多種JavaScript數組去重姿式

JavaScript數組去重，一個老生常談的問題了，但此次是解鎖多種JavaScript數組去重姿式。

對如下全部的實現算法，都使用如下代碼進行粗略測試：

const arr = [];
// 生成[0, 100000]之間的隨機數
for (let i = 0; i < 100000; i++) {
  arr.push(0 + Math.floor((100000 - 0 + 1) * Math.random()))
}

// ...實現算法

console.time('test');
arr.unique();
console.timeEnd('test');
複製代碼

雙重循環

雙重循環去重實現比較容易。
實現一：

Array.prototype.unique = function () {
  const newArray = [];
  let isRepeat;
  for (let i = 0; i < this.length; i++) {
    isRepeat = false;
    for (let j = 0; j < newArray.length; j++) {
      if (this[i] === newArray[j]) {
        isRepeat = true;
        break;
      }
    }
    if (!isRepeat) {
      newArray.push(this[i]);
    }
  }
  return newArray;
}
複製代碼

實現二：

Array.prototype.unique = function () {
  const newArray = [];
  let isRepeat;
  for (let i = 0; i < this.length; i++) {
    isRepeat = false;
    for (let j = i + 1; j < this.length; j++) {
      if (this[i] === this[j]) {
        isRepeat = true;
        break;
      }
    }
    if (!isRepeat) {
      newArray.push(this[i]);
    }
  }
  return newArray;
}
複製代碼

基於思路二的寫法改進版，實現三：

Array.prototype.unique = function () {
  const newArray = [];
  
  for (let i = 0; i < this.length; i++) {
    for (let j = i + 1; j < this.length; j++) {
      if (this[i] === this[j]) {
        j = ++i;
      }
    }
    newArray.push(this[i]);
  }
  return newArray;
}
複製代碼

通過測試代碼測試的時間以下：

test1: 3688.440185546875ms
test2: 4641.60498046875ms
test3: 17684.365966796875ms
複製代碼

Array.prototype.indexOf()

基本思路：若是索引不是第一個索引，說明是重複值。
實現一：

• 利用Array.prototype.filter()過濾功能
• Array.prototype.indexOf()返回的是第一個索引值
• 只將數組中元素第一次出現的返回
• 以後出現的將被過濾掉

Array.prototype.unique = function () {
  return this.filter((item, index) => {
    return this.indexOf(item) === index;
  })
}
複製代碼

實現二：

let arr = [1, 2, 3, 22, 233, 22, 2, 233, 'a', 3, 'b', 'a'];
Array.prototype.unique = function () {
  const newArray = [];
  this.forEach(item => {
    if (newArray.indexOf(item) === -1) {
      newArray.push(item);
    }
  });
  return newArray;
}
複製代碼

通過測試代碼測試的時間以下：

test1: 4887.201904296875ms
test2: 3766.324951171875ms
複製代碼

Array.prototype.sort()

基本思路：先對原數組進行排序，而後再進行元素比較。
實現一：

Array.prototype.unique = function () {
  const newArray = [];
  this.sort();
  for (let i = 0; i < this.length; i++) {
    if (this[i] !== this[i + 1]) {
      newArray.push(this[i]);
    }
  }
  return newArray;
}
複製代碼

通過測試代碼測試的時間以下：

test: 4300.39990234375ms
複製代碼

實現二：

Array.prototype.unique = function () {
  const newArray = [];
  this.sort();
  for (let i = 0; i < this.length; i++) {
    if (this[i] !== newArray[newArray.length - 1]) {
      newArray.push(this[i]);
    }
  }
  return newArray;
}
複製代碼

通過測試代碼測試的時間以下：

test1: 121.6259765625ms
test2: 123.02197265625ms
複製代碼

Array.prototype.includes()

Array.prototype.unique = function () {
  const newArray = [];
  this.forEach(item => {
    if (!newArray.includes(item)) {
      newArray.push(item);
    }
  });
  return newArray;
}
複製代碼

通過測試代碼測試的時間以下：

test: 4123.377197265625ms
複製代碼

Array.prototype.reduce()

Array.prototype.unique = function () {
  return this.sort().reduce((init, current) => {
    if(init.length === 0 || init[init.length - 1] !== current){
      init.push(current);
    }
    return init;
  }, []);
}
複製代碼

通過測試代碼測試的時間以下：

test: 180.401123046875ms
複製代碼

對象鍵值對

基本思路：利用了對象的key不能夠重複的特性來進行去重。
但須要注意：

• 沒法區分隱式類型轉換成字符串後同樣的值，好比 1 和 '1'
• 沒法處理複雜數據類型，好比對象（由於對象做爲 key 會變成 [object Object]）
• 特殊數據，好比 'proto'，由於對象的 proto 屬性沒法被重寫

解決第1、第三點問題，實現一：

Array.prototype.unique = function () {
  const newArray = [];
  const tmp = {};
  for (let i = 0; i < this.length; i++) {
    if (!tmp[typeof this[i] + this[i]]) {
      tmp[typeof this[i] + this[i]] = 1;
      newArray.push(this[i]);
    }
  }
  return newArray;
}
複製代碼

解決第二點問題，實現二：

Array.prototype.unique = function () {
  const newArray = [];
  const tmp = {};
  for (let i = 0; i < this.length; i++) {
    // 使用JSON.stringify()進行序列化
    if (!tmp[typeof this[i] + JSON.stringify(this[i])]) {
      // 將對象序列化以後做爲key來使用
      tmp[typeof this[i] + JSON.stringify(this[i])] = 1;
      newArray.push(this[i]);
    }
  }
  return newArray;
}
複製代碼

通過測試代碼測試的時間以下：

test1: 113.849365234375ms
test2: 157.030029296875ms
複製代碼

Map

實現一：

Array.prototype.unique = function () {
  const newArray = [];
  const tmp = new Map();
  for(let i = 0; i < this.length; i++){
        if(!tmp.get(this[i])){
            tmp.set(this[i], 1);
            newArray.push(this[i]);
        }
    }
    return newArray;
}
複製代碼

實現二：

Array.prototype.unique = function () {
  const tmp = new Map();
  return this.filter(item => {
    return !tmp.has(item) && tmp.set(item, 1);
  })
}
複製代碼

通過測試代碼測試的時間以下：

test1: 27.89697265625ms
test2: 21.945068359375ms
複製代碼

Set

Array.prototype.unique = function () {
  const set = new Set(this);
  return Array.from(set);
}
複製代碼

Array.prototype.unique = function () {
  return [...new Set(this)];
}
複製代碼

通過測試代碼測試的時間以下：

test1: 36.8046875ms
test2: 31.98681640625ms
複製代碼

總結

除了考慮時間複雜度外、性能以外，還要考慮數組元素的數據類型（例以下面的例子）等問題權衡選擇出採用哪一種算法，例如：

const arr = [1, 1, '1', '1', 0, 0, '0', '0', undefined, undefined, null, null, NaN, NaN, {}, {}, [], [], /a/, /a/];
複製代碼

通過綜合考慮，最優的數組去重算法是採用Map數據結構實現的算法。