ES6中的Map與Set集合

mynull發表於2019-03-21

集合的概念以及和陣列的區別

其實陣列也是集合, 只不過陣列的索引是數值型別.當想用非數值型別作為索引時, 陣列就無法滿足需要了.

而 Map 集合可以儲存多個鍵-值對(key-value), Set 集合可以儲存多個元素.

對Map 和 Set 一般不會逐一遍歷其中的元素. Map 一般用來儲存需要頻繁取用的資料, Set 一般用來判斷某個值是否存在其中.

ES 5 中對 Map 和 Set 的模擬方法

在ES 5 中,沒有 Set和Map集合, 一般使用物件來模擬這兩種集合, 物件的屬性作為鍵(key), 以屬性值作為值(value), 即以 property: property-value 來模擬 key-value 的形式. 具體實現如下:

模擬 Map 的鍵值對集合:

// 建立一個 Map 物件
var map = Object.create(null);

// 新增屬性和屬性值, 即 新增 key 和 value
map.key1 = 'value 1';
map.key2 = {};

// 取得 key 對應的 value 
console.log(map.key1);  // "value 1"
console.log(map.key2);  // "Object {}"
複製程式碼

模擬 Set :

// 建立一個 Set 物件
var set = Object.create(null);

// 新增屬性和屬性值, 即 新增 key 並令其值為 true,  即表示這個key存在於集合中
set.key = true;

// 判斷 key 是否存在,  然後進行下一步的操作
if(set.key) { ... }
複製程式碼

用物件模擬這兩種集合的缺陷

  1. 由於物件中的屬性名必須是字串, 如果傳入的不是字串則會強制轉換成對應的字串型別（強制轉換方面的知識可以看這篇文章點選）
  2. 一般使用 if 語句來判斷一個 key 是否存在於集合中, 當這個 key 對應的 value 為 false 或者可以被強制轉換為 false 時, 則 if 語句認為這個key不存在.但是其實是存在的, 只不過 value = false 而已.

ES6 中的 Map 和 Set 集合

下面正式來討論這兩種集合的特點

Map

Map 中儲存的是 key-value 形式的鍵值對, 其中的 key 和 value 可以是任何型別的, 即物件也可以作為 key . 這比用物件來模擬的方式就靈活了很多

Map 的建立和初始化

  1. 可以用new Map()建構函式來建立一個空的 Map
// 建立一個空的 Map 
let map  = new Map();
複製程式碼
  1. 也可以在 Map() 建構函式中傳入一個陣列來建立並初始化一個 Map. 傳入的陣列是二維陣列, 其中的每一個子陣列都有兩個元素, 前面的元素作為 key, 後面的元素作為 value, 這樣就形成了一個 key-value 鍵值對. 例如:
// 用陣列來建立一個 非空的 Map 

let array = [ // 定義一個二維陣列,  陣列中的每子陣列都有兩個元素
    ['key1' ,  'value 1'],   // key 是 字串 "key1", value 是字串 "value 1"
    [{} ,  10086] ,          // key 是個物件, value 是數值 10086
    [ 5,  {} ]              // key 是個數值型別, value 是物件
];

let map = new Map(array);  // 將陣列傳入 Map 建構函式中
複製程式碼

Map 可用的 方法

  1. set(key, value): 向其中加入一個鍵值對
  2. get(key): 若不存在 key 則返回 undefined
  3. has(key):返回布林值
  4. delete(key): 刪除成功則返回 true, 若key不存在或者刪除失敗會返回 false
  5. clear(): 將全部元素清除

size 屬性, 屬性值為 map 中鍵值對的個數

遍歷方法 forEach()

和陣列的 forEach 方法類似, 回撥函式中都包含3個引數 值, 鍵, 和 呼叫這個方法的 Map 集合本身

map.forEach(function(value,  key,  ownerMap){
    console.log(key,  value); // 每對鍵和值
    console.log(ownerMap === map);  // true
});
複製程式碼

Set 集合

Set 和 Map 最大的區別是隻有鍵 key 而沒有 value, 所以一般用來判斷某個元素(key)是否存在於其中.

建立和初始化方法, 和 Map 大同小異

既可以建立一個空 set 也可以用陣列來初始化一個非空的set. 和 Map 不同的是, 陣列是一維陣列, 每個元素都會成為 set 的鍵.例如:

// 建立一個陣列
let array = [1, 'str'];      // 一維陣列

// 用陣列來初始化 set
let set  = new Set(array);

複製程式碼

set 的方法

  1. add(key): 往set新增一個元素, 如果傳入多個引數, 則只會把第一個加入進去
let set = new Set();
set.add(1, 2, 3);
console.log(set.has(1),  set.has(2),  set.has(3));  // true false false 可以看到只有第一個引數被加入進了 set
複製程式碼
  1. has(key)
  2. delete(key)
  3. clear()

遍歷方法 forEach

和 Map 的 forEach 方法相似, 回撥函式的引數也是3個 (value, key, ownerSet). 按道理來說因為 set 中只有 key 沒有 value, 那麼回撥函式中不應該存在 value 這個引數呀, 那為什麼還會有 value 這個引數呢？可能是因為 另外兩種集合 ( 陣列和 Map ) 的 forEach 方法的回撥函式的引數都是這三個, 如果對於 Set 不是這樣, 那麼這三種集合的 forEach 函式就會丟失了一致性. 這個理由......

那麼既然沒有 value , 那麼這個value的值是什麼呢？答案是: value的值 === key的值 ,也就是說 在這裡 value 就是 key, 只不過在字面上寫成了 value 而已. 為了保持一致性嘛

下面這段程式碼可以驗證這個說法.

set.forEach(function(value,  key,  ownerSet){
    console.log(value === key,  set === ownerSet);   // true true
});
複製程式碼

WeakSet 和 WeakMap

這兩個集合比之前的兩個集合在名字之前都加上了 Weak, 這個 Weak 可以直譯成弱, 這個弱指的是弱引用, 那麼前面不帶Weak的 Set 和 Map 就是不弱, 也就是強了. 這個強指的是強引用, 再具體一點就是對於 key 位置的物件的強引用. 下面會詳細討論.

與 Set 和 Map 的區別

  • 先說表面的區別：
  1. 弱版本集合的 key 只能是物件, 對於 value 的型別沒有限制.
  2. 弱版本集合沒有 forEach 方法, 也沒有 for in 方法, 也不能用陣列來初始化（會報錯）.
  3. 弱版本可用的方法較少. WeakSet 只有 add, has, delete 方法可用; WeakMap 只有 set, has, get, delete 方法可用.
  • 根本區別 弱版本的集合和它們對應的強版本根本的區別在對於物件的引用的強弱上, 而物件指的是 key 位置的物件, 即以物件為key的情況.

強弱版本對於 key 是物件時的引用機制如下：

將物件設定為 key 時, 就在集合中儲存了這個物件的引用. 當這個物件沒有其他引用了的時候, ( 即只有集合還引用著這個物件的時候 ), 弱型別的集合會放棄對這個物件的引用, 把這個物件從集合裡移除, 不讓它繼續存在於集合中了, 這樣一來, 這個物件就會被垃圾回收了, 頗有些“趕盡殺絕”的意思; 但是強型別的集合還會一直儲存著對這個物件的引用, 就把它一直放在集合裡.這就是 [WeakSet 和 WeakMap] 與 [Set 和 Map] 的根本區別.

要注意的是這個機制只作用於 key , 而 value 位置繫結的物件無論是否還存在別的引用, WeakMap 都不會放棄這個物件. 只有這個位置的 key 繫結的物件沒有其他引用時, 才會把 key 和 value 都放棄. 是否放棄的決定權在於 key 位置.

弱版本集合的主要用處

若版本集合可以用在需要生命週期管理的地方，例如儲存對一個 DOM 物件的引用， 如果一個 DOM 物件使用完畢， 沒有其他的引用了， 那麼它應該被 垃圾回收，以免產生記憶體洩漏，那麼弱版本的集合就最適合用來儲存這樣的物件了。

注意：四種集合都是有序的, 即元素被新增進去的順序就是在內部儲存的順序. 對於用陣列來初始化的集合也一樣, 按照在陣列中的位置依次新增進集合中.

相關文章