## 一、Map &emsp;&emsp;Map類似于Object（對象），可用來存儲鍵值對，但需要通過SameValueZero算法保持鍵的唯一性。與Set一樣，在使用之前也得要實例化，如下代碼所示，構造函數Map()中的參數也是一個可選的可迭代對象，但此對象得是鍵值對的集合或兩列的二維數組。 ~~~ new Map(); 　　　　　　 //Map(0) {} new Map([["name", "strick"], ["age", 28]]); //Map(2) {"name" => "strick", "age" => 28} ~~~ **1）屬性和方法** &emsp;&emsp;Map比Set多一個讀取方法：get()，并且寫入方法改成了set()，其它的屬性和方法在功能上基本都一致，只是有些參數在含義上略有不同，例如delete()的參數表示鍵而不是值。方法的具體使用，可參加下面的代碼。 ~~~ var people = new Map(); //寫入和讀取 people.set("name", "strick").set("age", 28);　　//Map(2) {"name" => "strick", "age" => 28} people.get("name");　　　　　　　　　　　　　　 //"strick" people.size;　　　　　　　　　　　　　　　　　　 //2 //遍歷 [...people.keys()]; //["name", "age"] [...people.values()]; //["strick", 28] [...people.entries()]; //[["name", "strick"], ["age", 28]] /* "strick" "name" Map(2) {"name" => "strick", "age" => 28} 28 "age" Map(2) {"name" => "strick", "age" => 28} */ people.forEach(function(value, index, map) { console.log(value, index, map); }); //移除 people.delete("name") people.has("name"); //false people.clear(); people.has("age"); //false ~~~ **2）比較對象** &emsp;&emsp;本節開篇就提到Map和Object很類似，但其實兩者之間還是有一些很重要的區別，具體如表10所列。 :-:  :-: 表10 Map和Object的對比 ## 二、WeakMap &emsp;&emsp;WeakMap是Map的變體，也是鍵值對的集合，但它的鍵必須是弱引用的對象，并且不可枚舉，而值沒有限制，還是保持任意類型。當WeakMap的鍵所指的對象不再被引用時，其鍵和值將被GC自動回收。 **1）創建和方法** &emsp;&emsp;WeakSet也需要像Map那樣實例化（如下代碼所示），但沒有Map的size屬性，并且只包含Map中的四個方法：set()、get()、has()和delete()，諸如清空和遍歷相關的方法都是不存在的。 ~~~ var weak = new WeakMap(), arr = [1]; weak.set(arr, 10); //WeakMap {Array(1) => 10} weak.get(arr); //10 weak.has(arr); //true weak.delete(arr); weak.has(arr); //false ~~~ **2）用途** &emsp;&emsp;WeakMap的主要優勢在于不干擾垃圾收集，從而能夠有效的防止內存泄漏。它適用于隱藏信息、存儲DOM節點等場景。下面是一個隱藏信息的示例，privates變量是一個WeakMap，它的鍵是當前實例化的People對象，存儲的私有數據是一個對象，兩個原型方法分別用于寫入和讀取name屬性。 ~~~ var people = (function() { var privates = new WeakMap(); function People() { privates.set(this, {}); //初始化私有數據 } People.prototype.setName = function(name) { privates.get(this).name = name; //寫入 }; People.prototype.getName = function() { return privates.get(this).name; //讀取 }; return new People(); })(); people.setName("strick"); people.getName(); 　　//"strick" ~~~ &emsp;&emsp;這種存儲方式不僅能讓數據保持私有狀態，并且當與之關聯的對象實例被銷毀后，這些私有數據將被GC一并刪除，從而釋放內存。 &emsp;&emsp;下面是另一個存儲DOM節點的示例，node變量是一個WeakMap，它的鍵是文檔中的元素（即DOM的一個節點），在該元素的事件處理程序中可更新digit屬性。當從文檔中移除該元素時，與之關聯的數據也會隨之被刪除。 ~~~ <div id="container"></div> <script> var container = document.getElementById("container"); var node = new WeakMap(); node.set(container, { digit: 0 }); container.addEventListener("click", function() { var current = node.get(this); current.digit++; node.set(this, current); }, false ); </script> ~~~ ***** > 原文出處： [博客園-ES6躬行記](https://www.cnblogs.com/strick/category/1372951.html) [知乎專欄-ES6躬行記](https://zhuanlan.zhihu.com/pwes6) 已建立一個微信前端交流群，如要進群，請先加微信號freedom20180706或掃描下面的二維碼，請求中需注明“看云加群”，在通過請求后就會把你拉進來。還搜集整理了一套[面試資料](https://github.com/pwstrick/daily)，歡迎瀏覽。  推薦一款前端監控腳本：[shin-monitor](https://github.com/pwstrick/shin-monitor)，不僅能監控前端的錯誤、通信、打印等行為，還能計算各類性能參數，包括 FMP、LCP、FP 等。