JavaScript 基础（六）：Map、Set
基础系列文章：
JavaScript 基础（一）：null 和 undefined
Map 和 Set 是 ES6 中新的数据结构。
特别是 Map 在后端语言中比较常见，现在 JS 也引入了。
虽然现在用的不多，但是在面试中经常被问到。对于一些基础的还是要了解。
一、Map
Map 是 ES6 中新增的一种存储数据方式（数据结构），是以键值对的形式存储。
在 ES6 以前，都是用 Object 实现键值对的存储。Map 才是真正的键值对存储。
1、Map 创建
/** * 创建 * 初始化时，可以传一个可迭代对象 * 可迭代对象：要包含的是键值对（key：value）形式 * 如数组、自定义迭代器等 */ const map1 = new Map() console.log(map1) const map2 = new Map([[1,'one'],[2,'two'],[3,'three']]) console.log(map2) const map3 = new Map({ [Symbol.iterator]:function*(){ yield ['me','zht']; yield ['age',20]; yield ['job','IT'] } }) console.log(map3) // 也可以是 undefined const map4 = new Map([[]]) console.log(map4) console.log(map4.has(undefined)) // true
2、一些基本操作
/** * 一些基本操作 */ const map5 = new Map() console.log('map5 的键值对个数：',map5.size) // 新增映射 map5.set('bar','foo') // set 返回的是这个实例，可以链式操作 map5.set('ss',123).set('aa',456) console.log(map5,'个数：',map5.size) // 查看 key 对应的值 map5.get('ss') // 123 // 查看是否存在某个键 map5.has('bar') // true map5.has(34) // false // 删除某个键，存在这个键，删除 返回 true，否则返回 false // map5.delete('bar') // true map5.delete(45) // false // 清空 Map 对象 map5.clear()
3、顺序和迭代
/** * 顺序迭代 * Map 会维护键值对插入的顺序，可以根据插入顺序迭代 */ const map6 = new Map([ [1,'111'], [2,'222'], [3,'333'] ]) // 可以遍历的有：entries、keys、values（返回的迭代器），映射还可以 forEach for (const item of map6) { console.log(item) } for (const item of map6.entries()) { console.log(item) } for (const key of map6.keys()){ console.log(key) } for(const value of map6.values()){ console.log(value) } // 和 Array 的 forEach 相似 map6.forEach((value,key)=>{ console.log(key,value) }) // 因为是可迭代的，可以直接使用扩展操作转换为数组 console.log(...map6) console.log([...map6])
4、Map 和 Array
从上面可以看出，Map 和 Array 是可以互转的。这里转换的数组格式有一定限制：二维，键值对数组。
/** * Map 和 Array */ let array1 = [[1,'one'],[2,'two'],[3,'three']] // Array 转 Map const map7 = new Map(array1) map7.set(4,'4444') // Map 转回 Array array1 = [...map7] // [ [ 1, 'one' ], [ 2, 'two' ], [ 3, 'three' ], [ 4, '4444' ] ] const array2 = [[5,'5555'],[6,'666']] // 合并 Map 和 Array 为 Array // [[ 1, 'one' ],[ 2, 'two' ],[ 3, 'three' ],[ 4, '4444' ],[ 5, '5555' ],[ 6, '666' ]] array1 = [...map7,...array2] // 合并 Map 和 Array 为 Map（本质还是 Array 转 Map） // Map {1 => 'one',2 => 'two',3 => 'three',4 => '4444',5 => '5555',6 => '666'} const map8 = new Map([...map7,...array2])
5、Map 和 Object
Map 和 Object 存储方式很像，所以就有了怎么选择的问题。
两者的差异：
a、Map 的键值类型可以是任意值，更灵活
b、Map 的key是有顺序的，根据插入顺序返回
c、Map 有 size，Object 需要手动计算
d、Map 可迭代的方式更多
e、大量的频繁删除，Map 性能更好
二、Set
Set 和 Map 很像。所有的 API 大部分都是一样的。
如 size、has、delete 和迭代（这些都是一样）。
区别：Set 只有 value，没有 key。所以就是添加上有区别。
而且 keys、values 都是有的，可以调用迭代（不过结果一样）。
Set 和 Array 之间可以相互转，这就可以结合做一些操作（上一篇文章，数组合并去重）。
