<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Map</title> </head> <body> <script> /*Map 結構提供了“值—值”的對應*/ // let m = new Map(); // let obj = {'abc':123}; // m.set(obj,'content');//設置 // console.log(m.get(obj));//content /*Map 也可以接受一個數組作為參數。該數組的成員是一個個表示鍵值對的數組*/ // const map = new Map([ // ['name', '張三'], // ['title', 'Author'] // ]); // console.log(map.size) // 2 // console.log(map.has('name')) // true // console.log(map.get('name')) // "張三" /*任何具有 Iterator 接口、且每個成員都是一個雙元素的數組的數據結構（詳見《Iterator》一章）都可以當作Map構造函數的參數*/ // const s = new Set([ // ['abc',111], // ['cba',222] // ]); // const m1 = new Map(s); // console.log(m1);//Map(2) {"abc" => 111, "cba" => 222} // const arr = [{'name':123},{'age':321}];//必須是雙元素的數組結構，這樣寫會顯示undefined // const m2 = new Map(arr); // console.log(m2);//Map(1) {undefined => undefined} /*只有對同一個對象的引用，Map 結構才將其視為同一個鍵*/ // const map = new Map(); // map.set(['a'], 555); // console.log(map.get(['a'])); // undefined set和get方法，表面是針對同一個鍵，但實際上這是兩個值，內存地址是不一樣的 // let obj = ['abc']; // map.set(obj,111); // console.log(map.get(obj));//111 Map 的鍵實際上是跟內存地址綁定的 /*delete方法刪除某個鍵*/ // const m = new Map(); // m.set(undefined, 'nah'); // m.delete(undefined); /*clear方法清除所有成員*/ // let map = new Map(); // map.set('foo', true); // map.set('bar', false); // map.clear(); /*Map 轉為數組，Map 轉為數組最方便的方法，就是使用擴展運算符（...）*/ // const myMap = new Map() // .set(true, 7) // .set({foo: 3}, ['abc']); // console.log([...myMap])// [ [ true, 7 ], [ { foo: 3 }, [ 'abc' ] ] ] /*數組 轉為 Map*/ // new Map([ // [true, 7], // [{foo: 3}, ['abc']] // ]) /*Map 轉為對象，如果所有 Map 的鍵都是字符串，它可以無損地轉為對象，如果有非字符串的鍵名，那么這個鍵名會被轉成字符串，再作為對象的鍵名*/ // function strMapToObj(strMap) { // let obj = {}; // for (let [k,v] of strMap) { // obj[k] = v; // } // return obj; // } // const myMap = new Map() // .set('yes', true) // .set('no', false); // console.log(strMapToObj(myMap));// { yes: true, no: false } /*對象轉為 Map*/ // function objToStrMap(obj) { // let strMap = new Map(); // for (let k of Object.keys(obj)) { // strMap.set(k, obj[k]); // } // return strMap; // } // console.log(objToStrMap({yes: true, no: false}))// Map {"yes" => true, "no" => false} /*Map 轉為 JSON*/ // function strMapToJson(strMap) {//Map 的鍵名都是字符串，這時可以選擇轉為對象 JSON // return JSON.stringify(strMapToObj(strMap)); // } // function mapToArrayJson(map) {//Map 的鍵名有非字符串，這時可以選擇轉為數組 JSON // return JSON.stringify([...map]); // } // /*JSON 轉為 Map*/ // function jsonToStrMap(jsonStr) {//所有鍵名都是字符串 // return objToStrMap(JSON.parse(jsonStr)); // } // function jsonToMap(jsonStr) {//整個 JSON 就是一個數組，且每個數組成員本身，又是一個有兩個成員的數組。這時，它可以一一對應地轉為 Map // return new Map(JSON.parse(jsonStr)); // } </script> </body> </html>
備注：文中多數內容摘自阮一峰老師文章，僅供自我學習查閱。