ES6-Map和Set

1.Map

• Map 对象保存键值对。任何值(对象或者原始值) 都可以作为一个键或一个值。
• Map和Object的区别：

             （1）一个 Object 的键只能是字符串或者 Symbols，但一个 Map 的键可以是任意值（如：字符串、对象、函数、NaN）。

             （2）Map 中的键值是有序的（FIFO 原则），而添加到对象中的键则不是。

             （3）Map 的键值对个数可以用 size 属性获取，而 Object 的键值对个数只能自己计算。

             （4）Object 都有自己的原型，原型链上的键名有可能和你自己在对象上的设置的键名产生冲突。

• Map的特点：  有序、键值对（键可以是任意类型）、键名不能重复（如果重复，那么后写的将覆盖先写的键名）
•  Map的存取数据、删除数据及清空Map中的内容：

<script>
        var b = ["key"] //数组
        var m1 = new Map([["age", 20], [20, "hi"], [b, 90]])//初始化
        //类似看作：m1 = new Map（{"age":20,"20"："hi","b":90}）  对象跟map是有区别的
        //取数据
        var re1 = m1.get("age")
        var re2 = m1.get(20)
        var re3 = m1.get(["key"]) //在map里面找["key"]  没有
        var re4 = m1.get(b)
        console.log(re1, re2, re3, re4) //20  hi undefined 90
        //存数据
        m1.set("life", 1)//m1里面没有life,所以此处是添加life属性
        m1.set("age", 1)//m1已经有了age,所以此处是修改age为1
        console.log(m1)//{'age' => 1, 20 => 'hello', Array(1) => 90, 'life' => 1}
        console.log(m1.size)  //4
        m1.delete(20)  //删除20这个属性
        var re5 = m1.delete("age")  //删除age属性
        var re6 = m1.delete("age")  //重复删除age属性
        console.log(m1, re5, re6) // {Array(1) => 90, 'life' => 1}  ，true  ,false 
        //不能删除重复的属性和不存在的属性，没有报错，打印的是false
        m1.clear()  //清除map()里面的内容
        console.log(m1)  
</script>

• Map的遍历/迭代：

        （1）for...of...

<script>
		var map1 = new Map([["name", "rose"], ["age", 18]]);
		//取出每个键值对的键key和值value
		for (var [key, value] of map1) {
			console.log(key + " is " + value);
			//name is rose   
			//age is 18
		}

 		//这个 entries 方法返回一个新的 Iterator 对象，
		//它按插入顺序包含了 Map 对象中每个元素的[key, value] 数组。
		for (var [key, value] of map1.entries()) {
			console.log(key + " is " + value);
			//name is rose   
			//age is 18
		}

		//这个 keys 方法返回一个新的 Iterator 对象， 
		//它按插入顺序包含了 Map 对象中每个元素的键。
		for (var [key, value] of map1.keys()) {
			console.log(key + " is " + value);
			//name is rose   
			//age is 18
		}
</script>

        (2)forEach()

<script>
		var map1 = new Map([["name", "rose"], ["age", 18]]);
		map1.forEach(function (value, key) {
			//name is rose
			//age is 18
			console.log(key + " is " + value)
		}, map1)
</script>

•  Map的克隆：

 

<script>
		// Map 对象构造函数生成实例，迭代出新的对象。
		var myMap1 = new Map([["key1", "value1"], ["key2", "value2"]]);
		var myMap2 = new Map(myMap1);
		console.log(myMap1 === myMap2); //false 因为对象的存储地址不同
</script>

•  Map的合并：

<script>
		var first = new Map([[1, 'one'], [2, 'two'], [3, 'three']]);
		var second = new Map([[1, 'uno'], [2, 'dos']]);

		// 合并两个 Map 对象时，
		// 如果有重复的键值，则后面的会覆盖前面的，
		var three = new Map([...first, ...second]);
		console.log(three)//uno，dos， three
</script>

 

2.Set

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

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

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

<script>
		var set1 = new Set();
		set1.add(1) //{1}
		set1.add(1) //{1}   set里的值是唯一的
		set1.add("hi")  //{1，"hi"}
		var o = { a: 1, b: 2 };
		set1.add(o);
		set1.add({a: 1, b: 2});
		//虽然o的值与{a: 1, b: 2}相等，但它们是两个不同的对象
		console.log(set1)//{1，"hi",{a: 1, b: 2},{a: 1, b: 2}}
</script>

• Set对象作用

1.数组去重

<script>
		var mySet = new Set([1, 2, 3, 4, 4]);
		[...mySet];
		console.log(mySet) // [1, 2, 3, 4]
</script>

2.并集

<script>
		var a = new Set([1, 2, 3]);
		var b = new Set([4, 3, 2]);
		var union = new Set([...a, ...b]); // {1, 2, 3, 4}
		console.log(union) // [1, 2, 3, 4]
</script>

3.交集

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

4.差集

<script>
		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) // {1}
</script>