1.4Map 与 Set

简述：

Map 中存储的就是 key-value 的键值对，Set 中只存储了 Key 

Set 和 Map 主要的应用场景在于 数据重组 和 数据储存

Set 是一种叫做集合的数据结构，Map 是一种叫做字典的数据结构。

集合和字典的区别：

 共同点：集合、字典 可以储存不重复的值

不同点：集合 是以 [value, value]的形式储存元素，字典 是以 [key, value] 的形式储存

1、Maps 和 Objects 的区别

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

（1）Map 中的 key

-key是字符串、对象、函数、NaN

  ( 2 ) Map 的迭代[for ....of      foreach]

for...of

高亮部分为：Map遍历方法

map.entries()返回一个新Iterator对象,它按插入顺序包含Map对象中每个元素的[key, value]数组

map.keys()方法返回一个新的 Iterator 对象， Map 对象中每个元素的键。

map.values()返回一个新的 Iterator 对象，Map 对象中每个元素的值

var myMap = new Map();
myMap.set(0, "zero");
myMap.set(1, "one");
 
// "0 = zero" , "1 = one"
for (var [key, value] of myMap) {
  console.log(key + " = " + value);
}
for (var [key, value] of myMap.entries()) {
  console.log(key + " = " + value);
}
map.entries()返回一个新的Iterator对象，它按插入顺序包含了Map对象中每个元素的[key, value]数组。 
 

// "0" ，"1"
for (var key of myMap.keys()) {
  console.log(key);
}
map.keys()方法返回一个新的 Iterator 对象， Map 对象中每个元素的键。
 
//"zero","one"
for (var value of myMap.values()) {
  console.log(value);
}
map.values()返回一个新的 Iterator 对象，Map 对象中每个元素的值。

forEach() 

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

Map 对象的操作

Map 与 Array的转换

二维数组=》Map  采用new Map()

Map=》二维数组  采用Array.from() 或者[...myMap] // map转数组

var kvArray = [["key1", "value1"], ["key2", "value2"]];
 
// new Map 可以将一个 二维 键值对数组转换成一个 Map 对象
var myMap = new Map(kvArray);
 
// Array.from 函数可以将一个 Map 对象转换成一个二维键值对数组
var outArray = Array.from(myMap);

Map和对象的转换

对象=>Map 采用new Map()

Map=>对象 采用let ..of

const obj = {}
const map = new Map(['a', 111], ['b', 222])

for(let [key,value] of map) {
  obj[key] = value
}
console.log(obj)  //{a:111, b: 222}

JSON字符串要转换成Map可以先利用JSON.parse()转换成数组或者对象，然后再转换即可 

 Map 的克隆

Map 对象构造函数生成实例，迭代出新的对象

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

Map 的合并

 可以看到one，two没有了，被uno,dos所代替，因为出现了重复的键值

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

size：返回Map对象中所包含的键值对个数

高亮部分为Map操作方法：

• set(key, val): 向Map中添加新元素

• get(key): 通过键值查找特定的数值并返回

• has(key): 判断Map对象中是否有Key所对应的值，有返回true,否则返回false

• delete(key): 通过键值从Map中移除对应的数据

• clear(): 将这个Map中的所有元素删除

const m = new Map()
const o = {p: 'haha'}
m.set(o, 'content')

m.get(o)	// content
m.has(o)	// true
m.delete(o)	// true
m.has(o)	// false

---

2、Set对象 

1、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 也能存储

let set = new Set();
 let a = NaN;
 let b = NaN;
 set.add(a);
 set.add(b);
 set // Set {NaN}

 let set1 = new Set()
 set1.add(5)
 set1.add('5')
 console.log([...set1])	// [5, "5"]

2、类型转换

Array=》Set 采用new Set

Set=>Array 采用 【...mySet】

String=>Set 采用 new Set

// Array 转 Set
var mySet = new Set(["value1", "value2", "value3"]);

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


// String 转 Set
var mySet = new Set('hello');  // Set(4) {"h", "e", "l", "o"}
// 注：Set 中 toString 方法是不能将 Set 转换成 String

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}

高亮部分为操作方法：

• add(value)：新增，相当于 array里的push。
• delete(value)：存在即删除集合中value。
• has(value)：判断集合中是否存在 value。
• clear()：清空集合。

   const s = new Set()
   [1, 2, 3, 4, 3, 2, 1].forEach(x => s.add(x))
   for (let i of s) {
       console.log(i)	// 1 2 3 4
   }

   // 去重数组的重复对象
   let arr = [1, 2, 3, 2, 1, 1]
   [... new Set(arr)]	// [1, 2, 3]

3.1.1 ES6 Map 与 Set | 菜鸟教程

js中的set与map_teng28的博客-CSDN博客_js map setjs中的set与map_teng28的博客-CSDN博客_js map set