了解ES6中數組去重的兩種方式

這篇文章跟大家介紹一下ES6中陣列去重的兩種方式。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有幫助。

相關推薦：《javascript影片教學》

ES6中陣列去重的兩種方式

方法一：

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扩展运算符

更多编程相关知识，请访问：编程学习！！

以上是了解ES6中數組去重的兩種方式的詳細內容。更多資訊請關注PHP中文網其他相關文章！