ES6的Set和Map數據結構，由你製造

點擊"萬和IT教育"關注我們

你造嗎

每當去學習ES6的時候，我都會不由自主的打開阮一峰老師的《ES6入門》去學習和查找用法，相信大多數同學也都和我一樣看過阮老師寫的文章。

當然大家也都知道ES6里常用的API就那麼些，不多不少，用在項目中也是剛剛好。

不過在每次讀到Set和Map數據結構那一章的時候，總是有點不知所措，因為我不明白實現這樣的數據結構，目的是什麼，意義又是什麼呢

Set和Map主要的應用場景在於數組去重和數據存儲，幸運的是在讀了關於數據結構和演算法之類的書籍後，恍然大悟的發現

原來Set是一種叫做集合的數據結構，Map是一種叫做字典的數據結構

那麼下面就跟隨我一起去了解下這兩種數據結構，最後來親手實現的一個ES6中的Set和Map吧

集合

集合是由一組無序且唯一(即不能重複)的項組成的，可以想像成集合是一個既沒有重複元素，也沒有順序概念的數組

ES6提供了新的數據結構Set。它類似於數組，但是成員的值都是唯一的，沒有重複的值

Set 本身是一個構造函數，用來生成 Set 數據結構

這裡說的Set其實就是我們所要講到的集合，先來看下基礎用法

具體用法如果還有不清楚的，這裡我會在後面一一細說。現在還是來看一下以ES6中Set類(數據結構)為基礎實現的集合吧

Set實例的屬性和方法

Set的屬性：

size：返回集合所包含元素的數量

Set的方法：

操作方法

add(value)：向集合添加一個新的項

delete(value)：從集合中移除一個值

has(value)：如果值在集合中存在，返回true,否則false

clear(): 移除集合里所有的項

遍歷方法

keys()：返回一個包含集合中所有鍵的數組

values()：返回一個包含集合中所有值的數組

entries：返回一個包含集合中所有鍵值對的數組(感覺沒什麼用就不實現了)

forEach()：用於對集合成員執行某種操作，沒有返回值

創建一個集合

這裡用{}對象來表示集合，也是因為對象不允許一個鍵指向兩個不同的屬性，保證了集合里的元素都是唯一的

接下來，就需要按照ES6中Set類的實現，添加一些集合的操作方法了

has方法

首先要實現的是has方法，因為在add和delete等其他方法中都會被調用，下面來看一下它的實現

add方法

接下來要實現add方法

對於給定的val，可以檢測是否存在於集合中

如果不存在，就添加到集合中，返回true

如果存在，就直接返回false，不做任何操作

delete和clear方法

繼續寫著，這回把兩個都寫上

在delete方法中，判斷val是否存在於集合中，如果存在就直接從集合中刪掉，返回true

以上完成的都是操作方法，下面我們再來實現一下遍歷方法

keys、values方法

這兩個方法我們可以放在一起來實現，因為通過ES6對Object的擴展可以輕鬆實現對應的方法，下面看一下具體實現，上代碼：

使用一下看看

這裡我們看到和ES6中的Set有點區別，因為Object的這幾個方法都是按照數值大小，從小到大遍歷的數組，所以大家知道這一點比較好，具體實現還是有些不同的，哈哈

forEach方法

ES6中Set結構的實例上帶的forEach方法，其實和數組的forEach方法很相似，只不過Set結構的鍵名就是鍵值，所以第一個參數與第二個參數的值永遠都是一樣的

下面就按照實現數組的forEach方法，我們來完成Set的forEach方法

使用forEach方法

基本上實現了Set結構的方法，不過，發現一個問題，那就是每次添加一個元素都要add這樣寫起來確實好麻煩，Set是可以接收一個數組作為參數的，那麼我們把這個也實現一下

再來看看現在能不能支持傳入的數組了

現在我們有了一個和ES6中非常類似的Set類實現。如前所述，也可以用數組替代對象，存儲元素。喜歡動手的同學們，之後也可以去嘗試一下

除此之外，Set還可以實現並集(union),交集(intersect),差集(difference)

做事還是要做全套的，我們也一一來實現一下吧

union並集和intersect交集

並集的數學概念，集合A和集合B的並集，表示為A∪B

交集的數學概念，集合A和集合B的交集，表示為A∩B

如圖所示：

現在先來實現union方法

再來看下difference差集的實現，之後一起再測試一番

difference差集

差集的數學概念，集合A和集合B的差集，表示為A-B

Set完整實現

在此，先給大家貼一下完整的實現代碼

（點擊拉開大圖查看）

寫了辣么多一起來測試一下吧

目前為止我們用集合這種數據結構就實現了類似ES6中Set類，上面的使用方法也基本一樣，大家可以之後有時間的話動手去敲一敲看一看，走過路過不能錯過

既然我們已經完成了Set的實現，那麼好事要成雙，一鼓作氣再把Map也一起寫出來，天了擼的，開始

字典

在數據結構還有一種結構叫做字典，它就是實現基於ES6中的Map類的結構

那麼集合又和字典有什麼區別呢：

共同點：集合、字典可以存儲不重複的值

不同點：集合是以[值，值]的形式存儲元素，字典是以[鍵，值]的形式存儲

所以這一下讓我們明白了，Map其實的主要用途也是用於存儲數據的，相比於Object只提供「字元串—值」的對應，Map提供了「值—值」的對應。也就是說如果你需要「鍵值對」的數據結構，Map比Object更合適

下面來看一下基本使用：

以上是Map的基本使用，還有更多有用的方法稍後會隨著實現的深入分別展示

Map的屬性和方法

屬性：

size：返回字典所包含的元素個數

操作方法：

set(key, val): 向字典中添加新元素

get(key):通過鍵值查找特定的數值並返回

has(key):如果鍵存在字典中返回true,否則false

delete(key): 通過鍵值從字典中移除對應的數據

clear():將這個字典中的所有元素刪除

遍歷方法：

keys():將字典中包含的所有鍵名以數組形式返回

values():將字典中包含的所有數值以數組形式返回

forEach()：遍歷字典的所有成員

知道了都有哪些屬性和方法，那就閑言少敘，開始創建一個字典吧

創建一個字典

創建好了字典這個骨架，那就開始添加一些方法了

has方法

首當其衝的當然是has了，因為在set和get里都會用到，實現思路和之前寫的集合也很類似

實現了has方法後，我們可以來判斷字典中是否包含該屬性了，繼續來實現其他方法

set和get方法

set和get方法寫好了，再接著搞delete和clear方法，不廢話，看

delete和clear方法

上面把屬性和操作方法都分別完成了，還剩下最後的遍歷方法了，繼續寫下去，堅持到底就是勝利，各位看官也不容易了，加油加油！！！

遍歷方法(keys,values,forEach)

Now終於完成了Map類的實現，我給大家貼一下完整代碼和測試用例，供大家空閑時間來研究分析分析

Map完整實現

再來看看下面的測試栗子

這不是總結

最後的戰役，做個非正式的總結吧

根據集合和字典這兩種數據結構實現了類似ES6的Set和Map數據結構。

但其實完成的還不完善，還有一些方法需要大家一起再去思考一下

這裡我只是用集合和字典來給大家牽個頭，也希望大家看完後可以集思廣益的去實現一下

作者：chenhongdong

鏈接：https://juejin.im/post/5acc57eff265da237f1e9f7c

來源：掘金

進入IT高薪圈，選萬和！

不用擔心自己零基礎

不用擔心自己不適合

不用擔心如何選課程

掃一掃申請免費課程

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！