悟透前端 | ECMAScript 6的Map映射

{"type":"doc","content":[{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"映射（Map）是 ECMAScript 6 規範中引入的一種數據結構。這是一種存儲鍵值對列表很方便的方法，類似於其他編程語言中的詞典或者哈希表。","attrs":{}}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"什麼是映射","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"javascript 的對象（Object），本質上是鍵值對的集合（Hash結構），但是傳統上只能用字符串當作鍵，這給使用帶來了很大的限制。爲了解決這個問題，ECMAScript 6 引入了 Map 數據結構。它類似於對象，也是鍵值對的集合，但是\"鍵\"的範圍不僅僅侷限於字符串，而是各種類型的值（包括對象）都可以當作鍵。也就是說，Object 結構（對象結構）提供了\"字符串—值\"的對應，而 Map 結構提供了\"值—值\"的對應，是一種更完善的 Hash 結構的實現。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"下面來看一個簡單的示例，瞭解Map的基本用法：","attrs":{}},{"type":"codeinline","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"//聲明map實例\nconst page_info = new Map()\n// 向 map 中添加元素\npage_info.set(\"seo\", {\n \"keywords\": \"infoq、Map\",\n \"description\":\"Map對象是一種簡單的鍵/值映射，其中的鍵和值可以是任意值（原始值或對象的值）\"\n})\npage_info.set(\"title\", \"javascript es6的map映射\")\nconsole.log(page_info) \nconsole.log(typeof page_info) // object","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"輸出結果爲：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"Map {\n 'seo' => {\n keywords: 'infoq、Map',\n description: 'Map對象是一種簡單的鍵/值映射，其中的鍵和值可以是任意值（原始值或對象的值）'\n },\n 'title' => 'javascript es6的map映射'\n}\nobject","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"從輸出結果看，本質上Map（映射）就是一個","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"object","attrs":{}}],"attrs":{}},{"type":"text","text":"對象。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"codeinline","content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"Object","attrs":{}}],"attrs":{}},{"type":"text","text":"與","attrs":{}},{"type":"codeinline","content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"Map","attrs":{}}],"attrs":{}},{"type":"text","text":"區別","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"Object","attrs":{}}],"attrs":{}},{"type":"text","text":"和","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"Map","attrs":{}}],"attrs":{}},{"type":"text","text":"的相似之處在於，都是按鍵存取一個值，而且鍵都是可以刪除的。可以看出，二者之間是非常相似的，它的不同這之處在於：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" MapObject意外的鍵","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"Map","attrs":{}}],"attrs":{}},{"type":"text","text":" 默認情況不包含任何鍵。只包含顯式插入的鍵。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"一個 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"Object","attrs":{}}],"attrs":{}},{"type":"text","text":" 有一個原型, 原型鏈上的鍵名有可能和你自己在對象上的設置的鍵名產生衝突。","attrs":{}}]},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"注意:","attrs":{}},{"type":"text","text":" 雖然 ES5 開始可以用 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"Object.create(null)","attrs":{}}],"attrs":{}},{"type":"text","text":" 來創建一個沒有原型的對象，但是這種用法不太常見。","attrs":{}}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"鍵的類型一個 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"Map","attrs":{}}],"attrs":{}},{"type":"text","text":"的鍵可以是","attrs":{}},{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"任意值","attrs":{}},{"type":"text","text":"，包括函數、對象或任意基本類型。一個","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"Object","attrs":{}}],"attrs":{}},{"type":"text","text":" 的鍵必須是一個 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"String","attrs":{}}],"attrs":{}},{"type":"text","text":" 或是","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"Symbol","attrs":{}}],"attrs":{}},{"type":"text","text":"。鍵的順序","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"Map","attrs":{}}],"attrs":{}},{"type":"text","text":" 中的 key 是有序的。因此，當迭代的時候，一個 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"Map","attrs":{}}],"attrs":{}},{"type":"text","text":" 對象以插入的順序返回鍵值。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"一個 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"Object","attrs":{}}],"attrs":{}},{"type":"text","text":" 的鍵是無序的","attrs":{}}]},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"注意：自ECMAScript 2015規範以來，對象","attrs":{}},{"type":"text","marks":[{"type":"italic","attrs":{}}],"text":"確實","attrs":{}},{"type":"text","text":"保留了字符串和","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"Symbol","attrs":{}}],"attrs":{}},{"type":"text","text":"鍵的創建順序； 因此，在只有字符串鍵的對象上進行迭代將按插入順序產生鍵。","attrs":{}}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"size ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"Map","attrs":{}}],"attrs":{}},{"type":"text","text":" 的鍵值對個數可以輕易地通過","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"size","attrs":{}}],"attrs":{}},{"type":"text","text":" 屬性獲取","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"Object","attrs":{}}],"attrs":{}},{"type":"text","text":" 的鍵值對個數只能手動計算迭代","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"Map","attrs":{}}],"attrs":{}},{"type":"text","text":" 是 iterable 的，所以可以直接被迭代。迭代一個","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"Object","attrs":{}}],"attrs":{}},{"type":"text","text":"需要以某種方式獲取它的鍵然後才能迭代。性能在頻繁增刪鍵值對的場景下表現更好。在頻繁添加和刪除鍵值對的場景下未作出優化。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"Map映射常用方法","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"常用的 Map 方法有：賦值","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"set(key, value)","attrs":{}}],"attrs":{}},{"type":"text","text":" 、獲取","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"get(key)","attrs":{}}],"attrs":{}},{"type":"text","text":" 、移除指定鍵名及其對應的值delete(key) 、判斷是否存在","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"has(key)","attrs":{}}],"attrs":{}},{"type":"text","text":" 、 獲取所有值","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"values()","attrs":{}}],"attrs":{}},{"type":"text","text":" 、","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"key/value","attrs":{}}],"attrs":{}},{"type":"text","text":"迭代器","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"entries()","attrs":{}}],"attrs":{}},{"type":"text","text":"、遍歷","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"forEach()","attrs":{}}],"attrs":{}},{"type":"text","text":"和 清空所有鍵/值對","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"clear() ","attrs":{}}],"attrs":{}},{"type":"text","text":" 等。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"聲明並初始化","attrs":{}}]},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"const new_map = new Map();\nconsole.log(new_map); //輸出：Map {}","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"賦值","attrs":{}},{"type":"codeinline","content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"set","attrs":{}}],"attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"賦值使用","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"map.set(key,value)","attrs":{}}],"attrs":{}},{"type":"text","text":"，可以用於增加新的","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"鍵/值","attrs":{}}],"attrs":{}},{"type":"text","text":"對或者修改","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"鍵/值","attrs":{}}],"attrs":{}},{"type":"text","text":"對，返回整個Map對象。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"const page_info = new Map()\n// 設置值\npage_info.set(\"seo\", {\n \"keywords\": \"infoq、Map\",\n \"description\":\"Map對象是一種簡單的鍵/值映射，其中的鍵和值可以是任意值（原始值或對象的值）\"\n});\nconsole.log(page_info);\npage_info.set(\"seo\", \"seo信息\");\nconsole.log(page_info);","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"上面的示例增加值，並修改值。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"Map {\n 'seo' => {\n keywords: 'infoq、Map',\n description: 'Map對象是一種簡單的鍵/值映射，其中的鍵和值可以是任意值（原始值或對象的值）'\n }\n}\nMap { 'seo' => 'seo信息' }","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"獲取鍵值","attrs":{}},{"type":"codeinline","content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"get","attrs":{}}],"attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"使用 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"get(key)","attrs":{}}],"attrs":{}},{"type":"text","text":" 獲取鍵值，如果獲取的 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"key->value","attrs":{}}],"attrs":{}},{"type":"text","text":" 不存則返回 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"undefined","attrs":{}}],"attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"const page_info = new Map();\npage_info.set(\"title\", \"javascript es6的map映射\");\nconst title = page_info.get(\"title\");\nconst seo_info = page_info.get(\"seo\");\nconsole.log(title); //javascript es6的map映射\nconsole.log(seo_info); //undefined","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"刪除鍵值","attrs":{}},{"type":"codeinline","content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"delete","attrs":{}}],"attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"map.delete(key)","attrs":{}}],"attrs":{}},{"type":"text","text":" 刪除指定 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"key","attrs":{}}],"attrs":{}},{"type":"text","text":" 的鍵值對，返回成功或失敗結果，刪除成功返回","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"true","attrs":{}}],"attrs":{}},{"type":"text","text":"，刪除失敗返回","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"false","attrs":{}}],"attrs":{}},{"type":"text","text":"。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"const page_info = new Map();\npage_info.set(\"title\", \"javascript es6的map映射\");\npage_info.set(\"author\", \"infoq\");\nconsole.log(page_info); // Map { 'title' => 'javascript es6的map映射', 'author' => 'infoq' }\n\nconst deleted_author = page_info.delete(\"author\");\nconst deleted_seo = page_info.delete(\"seo\");\nconsole.log(deleted_author); // true\nconsole.log(deleted_seo); // false\nconsole.log(page_info); // Map { 'title' => 'javascript es6的map映射' }","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"判斷鍵值是否存在","attrs":{}},{"type":"codeinline","content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"has","attrs":{}}],"attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"使用","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"map.has(key)","attrs":{}}],"attrs":{}},{"type":"text","text":"判斷指定","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"key","attrs":{}}],"attrs":{}},{"type":"text","text":"是否存在。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"const page_info = new Map();\npage_info.set(\"title\", \"javascript es6的map映射\");\nconsole.log(page_info); // Map { 'title' => 'javascript es6的map映射' }\n\nconsole.log(page_info.has(\"title\")); // true\nconsole.log(page_info.has(\"seo\")); // false","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"獲取所有鍵值","attrs":{}},{"type":"codeinline","content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"values()","attrs":{}}],"attrs":{}}]},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"const page_info = new Map();\npage_info.set(\"title\", \"javascript es6的map映射\");\npage_info.set(\"author\", \"infoq\");\nconsole.log(page_info.values()); // [Map Iterator] { 'javascript es6的map映射', 'infoq' }","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"codeinline","content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"key/value","attrs":{}}],"attrs":{}},{"type":"text","text":"迭代器","attrs":{}},{"type":"codeinline","content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"entries()","attrs":{}}],"attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"使用","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"map.entries()","attrs":{}}],"attrs":{}},{"type":"text","text":"返回一個包含Map對象中每一個","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"[key, value]","attrs":{}}],"attrs":{}},{"type":"text","text":"數組的Iterator迭代器。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"const page_info = new Map();\npage_info.set(\"title\", \"javascript es6的map映射\");\npage_info.set(\"author\", \"infoq\");\nconsole.log(page_info.entries());","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"輸出的結果爲：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"[Map Entries] {\n [ 'title', 'javascript es6的map映射' ],\n [ 'author', 'infoq' ]\n}","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"遍歷所有鍵值","attrs":{}},{"type":"codeinline","content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"forEach(callback)","attrs":{}}],"attrs":{}}]},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"const page_info = new Map();\npage_info.set(\"title\", \"javascript es6的map映射\");\npage_info.set(\"author\", \"infoq\");\npage_info.forEach((value,key)=>{\n console.log(key,value);\n});","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"輸出的結果爲：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"title javascript es6的map映射\nauthor infoq","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"清空Map映射所有鍵值","attrs":{}},{"type":"codeinline","content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"clear()","attrs":{}}],"attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"使用","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"map.clear()","attrs":{}}],"attrs":{}},{"type":"text","text":"清空Map所有的鍵值對。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"const page_info = new Map();\npage_info.set(\"title\", \"javascript es6的map映射\");\npage_info.set(\"author\", \"infoq\");\npage_info.clear();\nconsole.log(page_info); // Map {}","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"與其它數據結構的轉換","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"Map映射轉爲數組","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Map轉爲數組最方便方法是使用擴展運算符","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"...","attrs":{}}],"attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"const page_info = new Map();\npage_info.set(\"title\", \"javascript es6的map映射\");\npage_info.set(\"author\", \"infoq\");\nconsole.log([...page_info]); // [ [ 'title', 'javascript es6的map映射' ], [ 'author', 'infoq' ] ]","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"Map映射轉爲對象","attrs":{}}]},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"function mapToObj(map) {\n const obj = Object.create(null);\n map.forEach((v,k)=>{\n obj[k] = v;\n });\n return obj;\n}\nconst page_info = new Map();\npage_info.set(\"title\", \"javascript es6的map映射\");\npage_info.set(\"author\", \"infoq\");\n\nconsole.log( mapToObj(page_info)); ","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"輸出結果爲：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"[Object: null prototype] {\n title: 'javascript es6的map映射',\n author: 'infoq'\n}","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"數組轉爲Map映射","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"將數組傳入Map構造函數即可，即","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"new Map(array)","attrs":{}}],"attrs":{}},{"type":"text","text":"。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"const page_info = [\n [\"title\",\"javascript es6的map映射\"],\n [\"author\",\"infoq\"]\n];\nconsole.log(new Map(page_info)); // Map { 'title' => 'javascript es6的map映射', 'author' => 'infoq' }","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"對象轉爲Map","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"對象轉爲Map映射通過","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"Object.entries()","attrs":{}}],"attrs":{}},{"type":"text","text":"。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"const page_info = {\n title:\"javascript es6的map映射\",\n author:\"infoq\"\n};\nconsole.log(new Map(Object.entries(page_info))); // Map { 'title' => 'javascript es6的map映射', 'author' => 'infoq' }","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"映射Map轉爲JSON","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Map 轉爲 JSON ，步驟是先把Map轉爲對象，即前面的","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"mapToObj","attrs":{}}],"attrs":{}},{"type":"text","text":"，然後使用","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"JSON.stringify","attrs":{}}],"attrs":{}},{"type":"text","text":"方法","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"function mapToObj(map) {\n const obj = Object.create(null);\n map.forEach((v,k)=>{\n obj[k] = v;\n });\n return obj;\n}\nfunction mapToJson(map){\n return JSON.stringify(mapToObj(map));\n}\nconst page_info = new Map();\npage_info.set(\"title\", \"javascript es6的map映射\");\npage_info.set(\"author\", \"infoq\");\nconsole.log( mapToJson(page_info)); // {\"title\":\"javascript es6的map映射\",\"author\":\"infoq\"}","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":1}}]}