ES6-Map

<html>

<head>
    <title>ES6 Map</title>
</head>

<body>




    <script>
        /*
         *Map 对象 :Map 对象保存键值对。任何值(对象或者原始值) 都可以作为一个键或一个值。
         *map中的key
         *key是字符串
         */
        {
            var myMap = new Map();
            var key = "这是key";
            myMap.set(key, "这是key得value")
            console.log(myMap.get(key));//输出 这是key得value   把一个已经赋值的变量传过去 所有还是==myMap.get("这是key")
            console.log(myMap.get("这是key"));
        }
        console.log("----------------------map中的key(是对象):分割线-------------------------------");
        //key是对象
        {
            var myMap = new Map();
            var keyObj = {};
            myMap.set(keyObj, "和键keyObj关联的值");
            console.log(myMap.get(keyObj));//输出 这是key得value   把一个已经赋值的变量传过去 所有还是==myMap.get("这是key")
            console.log(myMap.get({}));// undefined, 因为 keyObj !== {}
        }
        console.log("----------------------map中的key(是函数):分割线-------------------------------");
        //key是函数
        {
            var myMap = new Map();
            var keyObj = function () { };
            myMap.set(keyObj, "和键keyObj关联的值");
            console.log(myMap.get(keyObj));//输出 这是key得value   把一个已经赋值的变量传过去 所有还是==myMap.get("这是key")
            console.log(myMap.get(function () { }));// undefined, 因为 keyFunc !== function () {}
        }
        console.log("----------------------map中的key(NaN):分割线-------------------------------");
        //key 是 NaN
        {
            var myMap = new Map();
            myMap.set(NaN, "Not A Number");
            console.log(myMap.get(NaN));//输出Not A Number
            var otherNum = Number("foo");
            console.log(myMap.get(otherNum));
        }
        /*
         *Map迭代
         */
        //Map迭代:对key value 的遍历 for...of方式
        console.log("----------------------Map迭代(for...of方式):分割线-------------------------------");
        {
            var myMap = new Map();
            myMap.set(0, "zero");
            myMap.set(1, "one");
            //遍历key value
            for (var [key, value] of myMap) {
                console.log(key + "=" + value);  //顺序输出key-value
            }
            console.log("----------------------Map迭代(循环输出):分割线-------------------------------");
            //遍历key value
            for (var [key, value] of myMap.entries()) {
                console.log(key + "=" + value);  //顺序输出key-value
            }
            console.log("----------------------Map迭代(循环输出):分割线-------------------------------");
            //遍历key
            for (var key of myMap.keys()) {
                console.log(key);//输出key
            }
            console.log("----------------------Map迭代(循环输出):分割线-------------------------------");
            //遍历value
            for (var value of myMap.values()) {
                console.log(value);//输出value
            }
        }
        //Map迭代:对key value 的遍历 forEach()方式
        console.log("----------------------Map迭代(forEach()方式):分割线-------------------------------");
        {
            var myMap = new Map();
            myMap.set(0, "zero");
            myMap.set(1, "one");

            myMap.forEach(function (value, key) {
                console.log(key + "=" + value);  //顺序输出key-value
            }, myMap)
        }
        /*
         *Map对象的操作
         */
        console.log("----------------------Map对象的操作(Map 与 Array的转换):分割线-------------------------------");
        //Map 与 Array的转换
        {
            var kvArray = [["key1", "value1"], ["key2", "value2"]];
            // Map 构造函数可以将一个 二维 键值对数组转换成一个 Map 对象
            var myMap = new Map(kvArray);
            for (var [key, value] of myMap) {
                console.log("key=" + key + "value=" + value);//遍历后按顺序输出
            }
            // 使用 Array.from 函数可以将一个 Map 对象转换成一个二维键值对数组
            var arr=Array.from(myMap);
            console.log(arr);//输出为一个二维键值对数组
        }
        console.log("----------------------Map对象的操作(Map的克隆):分割线-------------------------------");
        //Map的克隆
        {
            var kvArray = [["key1", "value1"], ["key2", "value2"]];
            // Map 构造函数可以将一个 二维 键值对数组转换成一个 Map 对象
            var myMap = new Map(kvArray);
            var cloneMap=new Map(myMap);
            for (var [key, value] of cloneMap) {
                console.log("key=" + key + "value=" + value);//遍历后按顺序输出
            }
            console.log(myMap==cloneMap);//false Map 对象构造函数生成实例,迭代出新的对象。
        }
        console.log("----------------------Map对象的操作(Map的合并):分割线-------------------------------");
        //Map的合并
        {
            var first = new Map([[1, 'one'], [2, 'two'], [3, 'three'],]);
            var second = new Map([[1, 'uno'], [2, 'dos']]);

            var mergin=new Map([...first,...second]);//有重复的键会被覆盖掉,后面覆盖前面
            for (var [key, value] of mergin) {
                console.log("key=" + key + "value=" + value);//遍历后按顺序输出uno,dos,three 这里one two 就被覆盖掉了
            }
        }

    </script>
</body>

</html>

教程来源于:https://www.runoob.com/w3cnote/es6-tutorial.html

 

posted @ 2020-09-26 13:16  KwFruit  阅读(148)  评论(0编辑  收藏  举报