JavaScript 基础（六）：Map、Set

基础系列文章：

JavaScript 基础（一）：null 和 undefined

JavaScript 基础（二）：String

JavaScript 基础（三）：Number

JavaScript 基础（四）：Array

JavaScript 基础（五）：Object

JavaScript 基础（六）：Map、Set

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 之间可以相互转，这就可以结合做一些操作（上一篇文章，数组合并去重）。