JavaScript陣列去重—ES6的兩種方式
說明
JavaScript陣列去重這個問題,經常出現在面試題中,以前也寫過一篇陣列去重的文章,(JavaScript 陣列去重的多種方法原理詳解)但感覺程式碼還是有點不夠簡單,今天和大家再說兩種方法,程式碼可是足夠的少了。
解釋
方法一:
function unique(arr) {
const res = new Map();
return arr.filter((a) => !res.has(a) && res.set(a, 1))
}
就這麼短,就可以了,我們來解釋一下為什麼。
Map物件
Map是ES6 提供的新的資料結構。
Map 物件儲存鍵值對。任何值(物件或者原始值) 都可以作為一個鍵或一個值。
下表列出了 Map 物件的方法。
方法 | 描述 |
---|---|
clear | 刪除所有的鍵/值對,沒有返回值。 |
delete | 刪除某個鍵,返回true。如果刪除失敗,返回false。 |
forEach | 對每個元素執行指定操作。 |
get | 返回Map物件key相對應的value值。 |
has | 返回一個布林值,表示某個鍵是否在當前 Map 物件之中。 |
set | 給Map物件設定key/value 鍵/值對。 |
Map物件還有一個size屬性,他返回Map物件的鍵/值對的數量。
陣列的 filter() 方法
filter() 方法建立一個新的陣列,新陣列中的元素 是 通過檢查 指定陣列 中 符合條件的所有元素。
語法:
array.filter(function(currentValue,index,arr), thisValue)
引數說明:
箭頭函式
return arr.filter((a) => !res.has(a) && res.set(a, 1))
//上面的程式碼可以改成這樣
return arr.filter(function(a){
return !res.has(a) && res.set(a, 1);
});
1、箭頭函式寫程式碼擁有更加簡潔的語法;
2、不會繫結this。
瞭解更多,點這裡
方法一 分析
function unique(arr) {
//定義常量 res,值為一個Map物件例項
const res = new Map();
//返回arr陣列過濾後的結果,結果為一個數組
//過濾條件是,如果res中沒有某個鍵,就設定這個鍵的值為1
return arr.filter((a) => !res.has(a) && res.set(a, 1))
}
方法二:
function unique(arr) {
return Array.from(new Set(arr))
}
這個方法的程式碼量更少,簡直不可思議。
陣列的 from方法
Array.from() 方法從一個類似陣列或可迭代的物件(包括 Array,Map,Set,String,TypedArray,arguments 物件等等) 中建立一個新的陣列例項
語法:
Array.from(arrayLike[, mapFn[, thisArg]])
引數 | 描述 |
---|---|
arrayLike | 必需,想要轉換成真實陣列的類陣列物件或可迭代的物件。 |
mapFn | 可選,如果指定了該引數,則最後生成的陣列會經過該函式的加工處理後再返回。 |
thisArg | 可選,執行 mapFn 函式時 this 的值。 |
示例程式碼:
const bar = ["a", "b", "c"];
Array.from(bar);
// ["a", "b", "c"]
Array.from('foo');
// ["f", "o", "o"]
Set物件
Set 物件允許你儲存任何型別的 唯一值 ,無論是原始值或者是物件引用。
Set物件是值的集合,你可以按照插入的順序迭代它的元素。
Set中的元素只會出現一次,即 Set 中的元素是唯一的。
語法:
new Set([iterable]);
引數:
iterable,如果傳遞一個可迭代物件(包括 Array,Map,Set,String,TypedArray,arguments 物件等等),它的所有元素將被新增到新的 Set中。如果不指定此引數或其值為null,則新的 Set為空。
下表列出了 Set 物件的方法。
方法 | 描述 |
---|---|
add | 新增某個值,返回Set物件本身。 |
clear | 刪除所有的鍵/值對,沒有返回值。 |
delete | 刪除某個鍵,返回true。如果刪除失敗,返回false。 |
forEach | 對每個元素執行指定操作。 |
has | 返回一個布林值,表示某個鍵是否在當前 Set 物件之中。 |
Set物件和Map物件一樣,都有一個size屬性,他返回Set物件的值的個數。
方法二 分析
function unique(arr) {
//通過Set物件,對陣列去重,結果又返回一個Set物件
//通過from方法,將Set物件轉為陣列
return Array.from(new Set(arr))
}
總結
這次說的兩個方法,真的很簡單,主要就是靠ES6裡的新東西,難度不大,程式碼簡單,主要就是多用用就好了。
經人提醒,再補充一種,[...new Set(arr)]
不懂 ...
的朋友,可以看這裡 js擴充套件運算子