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 屬性無法被重寫
解決第一、第三點問題，實現一：
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資料結構實現的演算法。