ES6 3000字详解Map与Set用法

Map与Set是存储数据的两种结构。

1、Map结构。

1-1、Map存储方式。

Map采用(key,value)的方式存储数据，Object对象也是（key,value），两者不同的是Object的key只能是字符串或者Symbol对象,而Map更高级一点，它的key可以是任何类型的值。

1-2、创建一个Map对象。

Map的key类型可以是：Number，String，Boolean，Null，Undefined，Symbol,Array，Function，Object。

let map = new Map();
map.set(1, "number");
map.set("1", "string");
map.set(false, "Boolean");
map.set(null, "null");
map.set(undefined, "Undefined");
map.set(Symbol(), "Symbol");
map.set([1], "数组");
map.set(() => {}, "函数");
map.set({ key: "value" }, "对象");

1-3、Map的特点。

① key值唯一。

map.set(1, "number");
map.set(1, "number");
console.log(map);   // Map(1) { 1 => '2' }

② 相同key值会覆盖value。

map.set(1, "1");
map.set(1, "2");
console.log(map);  //  Map(1) { 1 => '2' }

1-4、Map遍历。

① for …of …

let map = new Map([[1, "one"]]);
for (let [key, value] of map) {     // 注意：key,value是使用[]包括，不是（）
  console.log(`key:${key},value:${value}`);   //   key:1,value:one
}

② forEach。

let map = new Map([[1, "one"]]);
map.forEach((value, key) => {  //  注意这里是(value,key)，不是(key,value)
  console.log(`key:${key},value:${value}`);  // key:1,value:one
});

获取key的方法：

for (var key of myMap.keys()) {
  console.log(key);
}

获取value的方法：

for (var value of myMap.values()) {
  console.log(value);
}

获取Map长度的方法：

console.log(map.size);

1-5、Map与数组的互相转换。

//  数组转Map
let map = new Map([[1, "one"]]);  // Map(1) { 1 => 'one' }

//  Map转数组
//  ① 使用Array.from
Array.from(map);   // [ [ 1, 'one' ] ]
//  ② 使用Rest
[...map];   // [ [ 1, 'one' ] ]

2、Set结构。

Set采用数组结构存储数据，可以存储所有类型的值,并且其中值唯一。
Set 对象存储的值总是唯一的，所以需要判断两个值是否存储恒等。
有几个特殊值需要特殊对待：

+0 与 -0 判断存储恒等，所以不重复；
undefined 与 undefined判断存储恒等，所以不重复；
NaN 与 NaN 判断存储恒等，所以不重复。

其中存储恒等有一点还需注意：引用不恒等。

let arr1 = [[1]];
let set = new Set(arr1);
set.add([1]); 
 // Set(2) { [ 1 ], [ 1 ] }
 虽然arr1值与[1]恒等，但是引用不恒等，所以可重复。

1-1、创建一个Set对象。

let set = new Set();
set.add(2);    //  Set(1) { 2 }
set.add(2);   //  Set(1) { 2 }：值唯一
set.size      //  获取Set的长度:1

1-2、Set与数组、String转换。

// Array 转 Set
let arr2 = [[1], ["one"]];
let set = new Set(arr2);  // Set(2) { [ 1 ], [ 'one' ] }

// 用...操作符，将 Set 转 Array
var myArray = [...mySet];

// String 转 Set
let set = new Set("string");  // Set(6) { 's', 't', 'r', 'i', 'n', 'g' }

1-3、Set妙用。

① 数组去重

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

② 并集

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

③ 交集

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}

④ 差集

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}