ES6基础知识（Map用法）

<!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>

备注：文中多数内容摘自阮一峰老师文章，仅供自我学习查阅。

https://edu.51cto.com/lecturer/11857712.html 星星课堂web前端系列课程

https://edu.51cto.com/course/25959.html js设计模式课程

https://edu.51cto.com/course/23133.html js进阶与组件化实战课程

https://edu.51cto.com/course/24757.html jquery课程

https://edu.51cto.com/course/22392.html js基础与入门课程

https://edu.51cto.com/course/26063.html vue零基础入门课程

https://edu.51cto.com/course/22393.html xhtml与css基础入门课程