ES6新增数据类型Set、Map

ES6新增数据类型Set、Map

Map对象是用来保存键值对的，它和object非常的相似，那么他们之间存在着什么样的差异呢

Map与object的区别

1. object的键只能是字符串或者symbols，但是Map的键可以是任意值
2. Map中的键值是有序的（FIFO原则），而对象中的键不是
3. Map的键值对个数可以通过size属性来获取，而对象则需要通过手动计算
4. 对象有自己的原型链，原型链上的键名可能和自己对象想的键名产生冲突

Map中的键key

var myMap = new Map()
//键
var keyString = 'a string'  
var keyObj = {}
var keyFunc = function () {}
//键值
myMap.set(keyString, "和键'a string'相关的键值")  
myMap.set(keyObj, {
    a: '111',
    b: '222'
})  
myMap.set(keyFunc, ()=>{
    console.log(111);
})
console.log(myMap.get(keyString));//index.html:93 和键'a string'相关的键值
console.log(myMap.get(keyObj));//{a:"111",b:"222"}
console.log(myMap.get(keyFunc));//()=>{console.log(111);}
console.log(myMap);
//Map(3) {"a string" => "和键'a string'相关的键值", {…} => {…}, ƒ => ƒ}
//[[Entries]]
//0: {"a string" => "和键'a string'相关的键值"}
//1: {Object => Object}
//2: {function () {} => ()=>{ console.log(111); }}
//size: (...)
//__proto__: Map

在Map对象的_proto_上含有的属性

1. clear: ƒ clear()

2. constructor: ƒ Map()

3. delete: ƒ delete()

4. entries: ƒ entries()

5. forEach: ƒ forEach()

6. get: ƒ ()

7. has: ƒ has()

8. keys: ƒ keys()

9. set: ƒ ()

10. size: (…)

11. values: *ƒ values()

    Map除了可以用foreach遍历还可以通过for…of遍历

Map对象操作

1.Map与Array的转换

 var array = [['key1',"value1"],['key2','value2']]
 // 数组转化成Map对象
 var myMap = new Map(array)
 console.log(myMap);
 // Map对象转换成数组
 var toArray = Array.from(myMap)
 console.log(toArray);

2.Map的克隆

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

3.Map的合并

var first = new Map([[1, 'one'], [2, 'two'], [3, 'three'],]);
var second = new Map([[1, 'uno'], [2, 'dos']]);
// 合并两个 Map 对象时，如果有重复的键值，则后面的会覆盖前面的，对应值即 uno，dos， three
var merged = new Map([...first, ...second]);

Set与数组非常相似，但是他的成员的值都是唯一的，没有重复的值，所以可以用来去重，求交集，求并集

1.数据添加

var setItems = new Set([1,1,2,3])
console.log(setItems); //index.html:112 Set(3) {1, 2, 3} 不重复
setItems.add([1,2,3])
setItems.add([1,2,3])
console.log(setItems); //index.html:115 Set(5) {1, 2, 3, Array(3), Array(3)} 添加数组时，因为引用不相同，所以可以添加

在原型上的属性

1. add: ƒ add()
2. clear: ƒ clear()
3. constructor: ƒ Set()
4. delete: ƒ delete()
5. entries: ƒ entries()
6. forEach: ƒ forEach()
7. has: ƒ has()
8. keys: ƒ values()
9. size: (…)
10. values: ƒ values()
11. Symbol(Symbol.iterator): ƒ values()
12. Symbol(Symbol.toStringTag): “Set”
13. get size: ƒ size()

2.数据转换

// Array 转 Set
var mySet = new Set(["value1", "value2", "value3"]);
// 用...操作符，将 Set 转 Array
var myArray = [...mySet];
String
// String 转 Set
var mySet = new Set('hello');  // Set(4) {"h", "e", "l", "o"}
// 注：Set 中 toString 方法是不能将 Set 转换成 String

Set对象作用

1.数组去重

var mySet = new Set([1, 2, 3, 4, 4]);
[...mySet]; // [1, 2, 3, 4]

2.求并集

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

3.求交集

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}

4.求差集

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