ES6 | Map与Set

目录

一、Map

1.概念

2. Map与Object的区别

(1).当Map中的key是字符串时 

(2).当Map中的key值是对象时

(3).当Map中的key值是函数时 

 2.Map的迭代

(1) for...of

 (2) forEach 

3.Map对象的操作 

 二、Set

1. 概念

2. Set中的特殊值

 3. 类型转换

 4. Set对象的操作

---

一、Map

1.概念

Map 对象保存键值对。任何值(对象或者原始值) 都可以作为一个键或一个值。

2. Map与Object的区别

• 一个 Object 的键只能是字符串或者 Symbols，但一个 Map 的键可以是任意值。
• Map 中的键值是有序的（FIFO 原则），而添加到对象中的键则不是。
• Map 的键值对个数可以从 size 属性获取，而 Object 的键值对个数只能手动计算。
• Object 都有自己的原型，原型链上的键名有可能和你自己在对象上的设置的键名产生冲突。

(1).当Map中的key是字符串时 

    <script>
        var myMap = new Map();
        var keyString = "a string";
        myMap.set(keyString, "和键'a string'关联的值");
        
        console.log(myMap)
        console.log(myMap.get(keyString))
        console.log(myMap.get('a string'))
    </script>

 

 我们可以看到Map中是一个键值对：【'a string' => "和键'a string'关联的值"】。但是我们 console.log(myMap.get(keyString))和 console.log(myMap.get('a string'))得到的值是相同的，这是为什么呢？我来自问自答一下，因为 keyString === 'a string'。

(2).当Map中的key值是对象时

        var myMap = new Map();
        var keyObj = {};
        myMap.set(keyObj, "和键 keyObj 关联的值");
        console.log(myMap.get(keyObj))
        console.log(myMap.get({}))

 

为什么 console.log(myMap.get({}))为undefined呢？因为 keyObj !== {}。

(3).当Map中的key值是函数时 

        var myMap = new Map();
        var keyFunc = function () { }; // 函数
        myMap.set(keyFunc, "和键 keyFunc 关联的值");

        console.log(myMap.get(keyFunc)); 
        console.log(myMap.get(function () { }))

 

 为什么console.log(myMap.get(function () { }))是undefined呢？因为 keyFunc !== function () {}。

 2.Map的迭代

(1) for...of

        var myMap = new Map();
        myMap.set(0, "zero");
        myMap.set(1, "one");
        console.log(myMap)
        for (var [key, value] of myMap) {
            console.log(key + " = " + value);
        }

 (2) forEach 

        var myMap = new Map();
        myMap.set(0, "zero");
        myMap.set(1, "one");
        console.log(myMap)
        myMap.forEach(function(value, key) {
            console.log(key + " = " + value);
        }, myMap)

3.Map对象的操作 

        // Map与array之间的转换
        var kvArray = [["key1", "value1"], ["key2", "value2"]];
        var newMap = new Map(kvArray)
        console.log(newMap)
        var outArray = Array.from(newMap);
        console.log(outArray)

        // 克隆
        var myMap1 = new Map([["key1", "value1"], ["key2", "value2"]]);
        var myMap2 = new Map(myMap1)
        console.log(myMap2)

        // Map的合并
        var first = new Map([[1, 'one'], [2, 'two'], [3, 'three'],]);
        var second = new Map([[1, 'uno'], [2, 'dos']]);
        var hebin = new Map([...first, ...second])
        console.log(hebin)

 二、Set

1. 概念

Set 对象允许你存储任何类型的唯一值，无论是原始值或者是对象引用。

2. Set中的特殊值

Set 对象存储的值总是唯一的，所以需要判断两个值是否恒等。有几个特殊值需要特殊对待：

• +0 与 -0 在存储判断唯一性的时候是恒等的，所以不重复；
• undefined 与 undefined 是恒等的，所以不重复；
• NaN 与 NaN 是不恒等的，但是在 Set 中只能存一个，不重复。

let mySet = new Set();
 
mySet.add(1); // Set(1) {1}
mySet.add(5); // Set(2) {1, 5}
mySet.add(5); // Set(2) {1, 5} 这里体现了值的唯一性
mySet.add("some text"); 
// Set(3) {1, 5, "some text"} 这里体现了类型的多样性
var o = {a: 1, b: 2}; 
mySet.add(o);
mySet.add({a: 1, b: 2}); 
// Set(5) {1, 5, "some text", {…}, {…}} 
// 这里体现了对象之间引用不同不恒等，即使值相同，Set 也能存储

 3. 类型转换

    <script>
        //数组转Set
        var mySet = new Set(["value1", "value2", "value3"]);
        console.log(mySet)
        //Set转数组
        var newArray = [...mySet]
        console.log(newArray)
    </script>

 4. Set对象的操作

        // 数组去重
        var mySet = new Set([1, 2, 3, 4, 4]);
        var newArr = [...mySet];
        console.log(newArr)

        // 并集
        var a = new Set([1, 2, 3]);
        var b = new Set([4, 3, 2]);
        var union = new Set([...a, ...b]);
        console.log(union)

        // 交集
        var a = new Set([1, 2, 3]);
        var b = new Set([4, 3, 2]);
        var intersect = new Set([...a].filter(x => b.has(x)));
        console.log(intersect)

        // 差集
        var a = new Set([1, 2, 3]);
        var b = new Set([4, 3, 2]);
        var difference = new Set([...a].filter(x => !b.has(x)));
        console.log(difference)

 本文章参考菜鸟教程！！！