{"id":2713,"date":"2022-08-25T22:56:27","date_gmt":"2022-08-25T14:56:27","guid":{"rendered":"https:\/\/jimmyswebnote.com\/?p=2713"},"modified":"2022-11-01T18:08:43","modified_gmt":"2022-11-01T10:08:43","slug":"%e3%80%90-javascript-%e3%80%91map-%e7%ad%86%e8%a8%98","status":"publish","type":"post","link":"https:\/\/jimmyswebnote.com\/%e3%80%90-javascript-%e3%80%91map-%e7%ad%86%e8%a8%98\/","title":{"rendered":"\u3010 JavaScript \u3011Map \u7b46\u8a18"},"content":{"rendered":"\n<p>JavaScript Map \u548c JavaScript Set \u76f8\u8f03 Array \u548c Object \u7b97\u662f\u6bd4\u8f03\u6c92\u90a3\u9ebc\u5e38\u7528\u7684\u8cc7\u6599\u7d50\u69cb\uff0c\u5c0e\u81f4\u6bcf\u6b21\u8981\u7528\u7684\u6642\u5019\u90fd\u8981\u53bb\u67e5 MDN\uff0c\u6240\u4ee5\u6c7a\u5b9a\u4f86\u7b46\u8a18\u4e00\u4e0b\uff0c\u9019\u7bc7\u5c31\u5148\u4f86\u7b46\u8a18 Map \u5427\uff01<\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_65 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<p class=\"ez-toc-title\">Table of Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-663351eaebbf6\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-663351eaebbf6\"  aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/jimmyswebnote.com\/%e3%80%90-javascript-%e3%80%91map-%e7%ad%86%e8%a8%98\/#JavaScript_Map\" title=\"JavaScript Map\">JavaScript Map<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/jimmyswebnote.com\/%e3%80%90-javascript-%e3%80%91map-%e7%ad%86%e8%a8%98\/#1_%E7%89%B9%E6%80%A7\" title=\"1. \u7279\u6027\">1. \u7279\u6027<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/jimmyswebnote.com\/%e3%80%90-javascript-%e3%80%91map-%e7%ad%86%e8%a8%98\/#2_%E5%AE%A3%E5%91%8A_Map\" title=\"2. \u5ba3\u544a Map\">2. \u5ba3\u544a Map<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/jimmyswebnote.com\/%e3%80%90-javascript-%e3%80%91map-%e7%ad%86%e8%a8%98\/#3_%E6%93%8D%E4%BD%9C_Map\" title=\"3. \u64cd\u4f5c Map\">3. \u64cd\u4f5c Map<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/jimmyswebnote.com\/%e3%80%90-javascript-%e3%80%91map-%e7%ad%86%e8%a8%98\/#4_%E8%BF%AD%E4%BB%A3_Map\" title=\"4. \u8fed\u4ee3 Map\">4. \u8fed\u4ee3 Map<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/jimmyswebnote.com\/%e3%80%90-javascript-%e3%80%91map-%e7%ad%86%e8%a8%98\/#5_clone_%E5%92%8C_merge_Map\" title=\"5. clone \u548c merge Map\">5. clone \u548c merge Map<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/jimmyswebnote.com\/%e3%80%90-javascript-%e3%80%91map-%e7%ad%86%e8%a8%98\/#6_%E8%BD%89%E6%8F%9B%E6%88%90_Array\" title=\"6. \u8f49\u63db\u6210 Array\">6. \u8f49\u63db\u6210 Array<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/jimmyswebnote.com\/%e3%80%90-javascript-%e3%80%91map-%e7%ad%86%e8%a8%98\/#%E5%8F%83%E8%80%83%E8%B3%87%E6%96%99\" title=\"\u53c3\u8003\u8cc7\u6599\">\u53c3\u8003\u8cc7\u6599<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"JavaScript_Map\"><\/span>JavaScript Map<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3><span class=\"ez-toc-section\" id=\"1_%E7%89%B9%E6%80%A7\"><\/span>1. \u7279\u6027<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<ul><li>Map \u7531\u591a\u7b46\u7684 key-value pairs \u7d44\u6210\uff0c\u985e\u4f3c\u8cc7\u6599\u7d50\u69cb\u4e2d\u7684 hash<\/li><li>key \u53ef\u4ee5\u662f\u4efb\u610f\u7684\u8cc7\u6599\u578b\u614b\uff0cex: function, object, number, string&#8230;<\/li><li>\u5728\u983b\u7e41\u7684 create, delete key-value pairs \u7684\u60c5\u6cc1\u4e0b\uff0cMap \u7684\u6548\u80fd\u53ef\u80fd\u6bd4 object \u4f86\u5f97\u597d<\/li><\/ul>\n\n\n\n<h3><span class=\"ez-toc-section\" id=\"2_%E5%AE%A3%E5%91%8A_Map\"><\/span>2. \u5ba3\u544a Map<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>\u53ef\u4ee5\u76f4\u63a5 new Map, \u4e5f\u53ef\u4ee5\u7528 Array \u7d66\u5b9a\u521d\u59cb\u7684 key-value pairs\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript line-numbers\">\/\/ \u65b9\u6cd5\u4e00\nconst map = new Map();\nconsole.log(map)\n\/\/ Map(0) {}\n\n\/\/ \u65b9\u6cd5\u4e8c\nconst data = [\n  [1, { name: 'Jimmy', email: 'jimmy@test.com' }],\n  [2, { name: 'Jed', email: 'jed@test.com' }],\n  [3, { name: 'Frank', email: 'frank@test.com' }]\n]\nconst map2 = new Map(data)\nconsole.log(map2)\n\/* Map(3) {\n  1 =&gt; { name: 'Jimmy', email: 'jimmy@test.com' },\n  2 =&gt; { name: 'Jed', email: 'jed@test.com' },\n  3 =&gt; { name: 'Frank', email: 'frank@test.com' }\n}*\/<\/code><\/pre>\n\n\n\n<h3><span class=\"ez-toc-section\" id=\"3_%E6%93%8D%E4%BD%9C_Map\"><\/span>3. \u64cd\u4f5c Map<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript line-numbers\">const data = [\n  [1, { name: 'Jimmy', email: 'jimmy@test.com' }],\n  [2, { name: 'Jed', email: 'jed@test.com' }],\n  [3, { name: 'Frank', email: 'frank@test.com' }]\n]\nconst map = new Map(data)\n\n\/\/ \u53d6\u5f97 key-value pairs \u7684\u500b\u6578\nconsole.log(map.size)\n\/\/ 3\n\n\/\/ \u67d0\u500b key-value pair \u662f\u5426\u5b58\u5728\nconst isFirstUserExist = map.has(1)\nconst isForthUserExist = map.has(4)\nconsole.log(isFirstUserExist)\n\/\/ true\nconsole.log(isForthUserExist)\n\/\/ false\n\n\/\/ \u7528 key \u53d6\u5f97 value\nconst firstUser = map.get(1)\nconsole.log(firstUser)\n\/\/ { name: 'Jimmy', email: 'jimmy@test.com' }\n\n\/\/ \u65b0\u589e\u3001\u66f4\u65b0 key-value pairs\nmap.set(4, { name: 'John', email: 'james@test.com' })\nconsole.log(map.get(4))\n\/\/ { name: 'John', email: 'john@test.com' }\n\n\/\/ \u522a\u9664 key-value pairs\nmap.delete(4)\nconsole.log(map)\n\/* Map(3) {\n  1 =&gt; { name: 'Jimmy', email: 'jimmy@test.com' },\n  2 =&gt; { name: 'Jed', email: 'jed@test.com' },\n  3 =&gt; { name: 'Frank', email: 'frank@test.com' }\n} *\/\n\n\/\/ \u6e05\u7a7a Map\nmap.clear()\nconsole.log(map)\n\/\/ Map(0) {}<\/code><\/pre>\n\n\n\n<h3><span class=\"ez-toc-section\" id=\"4_%E8%BF%AD%E4%BB%A3_Map\"><\/span>4. \u8fed\u4ee3 Map<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript line-numbers\">const data = [\n  [1, { name: 'Jimmy', email: 'jimmy@test.com' }],\n  [2, { name: 'Jed', email: 'jed@test.com' }],\n  [3, { name: 'Frank', email: 'frank@test.com' }]\n]\nconst map = new Map(data)\n\n\/\/ \u65b9\u6cd5\u4e00\uff1afor...of\nfor (const [key, value] of map) {\n  console.log(`${key} = ${JSON.stringify(value)}`);\n}\n\n\/\/ \u65b9\u6cd5\u4e8c\uff1aforEach (\u6ce8\u610f key, value \u7684 argument \u9806\u5e8f)\nmap.forEach((value, key) =&gt; {\n  console.log(`${key} = ${JSON.stringify(value)}`);\n});\n\n\/\/ \u65b9\u6cd5\u4e09\uff1afor..of \u642d\u914d entries\nfor (const [key, value] of map.entries()) {\n  console.log(`${key} = ${value}`);\n}\n\n\/* \u4ee5\u4e0a\u7d50\u679c\u90fd\u662f\uff1a\n1 = {\"name\":\"Jimmy\",\"email\":\"jimmy@test.com\"}\n2 = {\"name\":\"Jed\",\"email\":\"jed@test.com\"}\n3 = {\"name\":\"Frank\",\"email\":\"frank@test.com\"} *\/\n\n\/\/ \u8fed\u4ee3 keys\nfor (const key of map.keys()) {\n  console.log(key);\n}\n\/\/ 1\n\/\/ 2\n\/\/ 3\n\n\/\/ \u8fed\u4ee3 values\nfor (const value of map.values()) {\n  console.log(JSON.stringify(value));\n}\n\/\/ {\"name\":\"Jimmy\",\"email\":\"jimmy@test.com\"}\n\/\/ {\"name\":\"Jed\",\"email\":\"jed@test.com\"}\n\/\/ {\"name\":\"Frank\",\"email\":\"frank@test.com\"}<\/code><\/pre>\n\n\n\n<h3><span class=\"ez-toc-section\" id=\"5_clone_%E5%92%8C_merge_Map\"><\/span>5. clone \u548c merge Map<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript line-numbers\">const data = [\n  [1, 'Jimmy'],\n  [2, 'Jed'],\n  [3, 'Frank']\n]\nconst map = new Map(data)\n\n\/\/ clone Map\nconst duplicateMap = new Map(map)\nconsole.log(duplicateMap.get(1))\n\/\/ Jimmy\nconsole.log(map === duplicateMap)\n\/\/ false\n\n\/\/ merge Map\nconst map1 = new Map([\n  [1, 'Jimmy'],\n  [2, 'Jed'],\n  [3, 'Frank']\n])\nconst map2 = new Map([\n  [4, 'John'],\n  [5, 'Josh']\n])\nconst mergedMap = new Map([...map1, ...map2])\nconsole.log(mergedMap)\n\/* Map(5) {\n  1 =&gt; 'Jimmy',\n  2 =&gt; 'Jed',\n  3 =&gt; 'Frank',\n  4 =&gt; 'John',\n  5 =&gt; 'Josh'\n} *\/<\/code><\/pre>\n\n\n\n<h3><span class=\"ez-toc-section\" id=\"6_%E8%BD%89%E6%8F%9B%E6%88%90_Array\"><\/span>6. \u8f49\u63db\u6210 Array<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript line-numbers\">const arr = [\n  [1, 'Jimmy'],\n  [2, 'Jed'],\n  [3, 'Frank']\n]\nconst map = new Map(arr)\n\n\/\/ \u5c07 key-value pairs \u8f49\u63db\u6210\u4e8c\u7dad\u9663\u5217\nconsole.log(Array.from(map))\n\/\/ [ [ 1, 'Jimmy' ], [ 2, 'Jed' ], [ 3, 'Frank' ] ]\nconsole.log([...map])\n\/\/ [ [ 1, 'Jimmy' ], [ 2, 'Jed' ], [ 3, 'Frank' ] ]\n\n\/\/ \u5c07 keys \u8f49\u63db\u6210\u9663\u5217\nconsole.log([...map.keys()])\n[ 1, 2, 3 ]\n\n\/\/ \u5c07 values \u8f49\u63db\u6210\u9663\u5217\nconsole.log([...map.values()])\n[ 'Jimmy', 'Jed', 'Frank' ]<\/code><\/pre>\n\n\n\n<h2><span class=\"ez-toc-section\" id=\"%E5%8F%83%E8%80%83%E8%B3%87%E6%96%99\"><\/span>\u53c3\u8003\u8cc7\u6599<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Map\" target=\"_blank\" data-type=\"URL\" data-id=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Map\" rel=\"noreferrer noopener\">Map &#8211; JavaScript &#8211; MDN Web Docs &#8211; Mozilla<\/a><\/p>\n\n\n\n\n\n<p>\u5982\u679c\u89ba\u5f97\u6211\u7684\u6587\u7ae0\u6709\u5e6b\u52a9\u7684\u8a71\uff0c\u6b61\u8fce\u5e6b\u6211\u7684\u7c89\u5c08\u6309\u8b9a\u54e6~\u8b1d\u8b1d\u4f60\uff01<br><\/p>\n\n<iframe loading=\"lazy\" src=\"https:\/\/www.facebook.com\/plugins\/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fjimmyswebnote&amp;tabs=timeline&amp;width=340&amp;height=500&amp;small_header=false&amp;adapt_container_width=true&amp;hide_cover=false&amp;show_facepile=true&amp;appId\" width=\"340\" height=\"500\" style=\"border:none;overflow:hidden\" scrolling=\"no\" frameborder=\"0\" allowfullscreen=\"true\" allow=\"autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share\"><\/iframe>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>JavaScript Map \u548c JavaScript Set \u76f8\u8f03 Array \u548c Object \u7b97\u662f\u6bd4\u8f03\u6c92\u90a3\u9ebc\u5e38\u7528\u7684\u8cc7\u6599\u7d50\u69cb\uff0c\u5c0e\u81f4\u6bcf\u6b21\u8981\u7528\u7684\u6642\u5019\u90fd\u8981\u53bb\u67e5 &hellip;<\/p>\n<p class=\"read-more\"> <a class=\"\" href=\"https:\/\/jimmyswebnote.com\/%e3%80%90-javascript-%e3%80%91map-%e7%ad%86%e8%a8%98\/\"> <span class=\"screen-reader-text\">\u3010 JavaScript \u3011Map \u7b46\u8a18<\/span> Read More \u00bb<\/a><\/p>\n","protected":false},"author":1,"featured_media":2722,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[66,19],"tags":[199,200],"_links":{"self":[{"href":"https:\/\/jimmyswebnote.com\/wp-json\/wp\/v2\/posts\/2713"}],"collection":[{"href":"https:\/\/jimmyswebnote.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jimmyswebnote.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jimmyswebnote.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jimmyswebnote.com\/wp-json\/wp\/v2\/comments?post=2713"}],"version-history":[{"count":9,"href":"https:\/\/jimmyswebnote.com\/wp-json\/wp\/v2\/posts\/2713\/revisions"}],"predecessor-version":[{"id":2765,"href":"https:\/\/jimmyswebnote.com\/wp-json\/wp\/v2\/posts\/2713\/revisions\/2765"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/jimmyswebnote.com\/wp-json\/wp\/v2\/media\/2722"}],"wp:attachment":[{"href":"https:\/\/jimmyswebnote.com\/wp-json\/wp\/v2\/media?parent=2713"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jimmyswebnote.com\/wp-json\/wp\/v2\/categories?post=2713"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jimmyswebnote.com\/wp-json\/wp\/v2\/tags?post=2713"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}