9. 新增Map

2/19/2022 ES6

# 1. Map

Map是 ES6 新增的引用数据类型,结构为键值对的集合,但是键不光可以是 String 型,还可以是其他类型

对于 Object 结构来说是"属性-值",对于 Map 结构来说是"键-值"

Set之于Array,Map之于Object:Set 能保证 Array 的value唯一,Map 能保证 Object 的key唯一

const m = new Map()
const person = { name: 'jack' }

m.set(person, 'student') // person作为m里的一个键,值对应为'student'
m.get(person) // 'student'
m.size // 1
m.has(person) // true
m.delete(person) // 你猜~

new 的同时,添加键值对,传入双数组

const map = new Map([
  ['name','jack'],
  ['id',107]
])
// 结构如下
Map(2){
  [[Entries]]:[
    {key:'name',value:'jack'},
    {key:'id',value:107},
  ],
  size:2
}

// 实际执行算法:
const map = new Map()
[['name','jack'], ['id',107]].forEach(([key, value]) => map.set(key, value))
// 我又帮你复习了一次函数传参解构

当键是 object 类型时,保存的是指针,这是一个坑

const { log } = console // 还记得对象解构吗?

const obj1 = {
	id: 107,
}
const arr1 = [1, 2, 3]
const arr2 = [1, 2, 3]

const map = new Map([
	[obj1, 'person1'],
	[arr1, 'array1'],
	[arr2, 'array2'],
])
// 引用类型作为键值时,保存的实际是指针
log(map.get({ id: 107 })) // undefined
log(map.get([1, 2, 3])) // undefined

log(map.get(obj1)) // person1
log(map.get(arr1)) // array1
log(map.get(arr2)) // array2

遍历操作

for (let key of map.keys()) {
	log(key) // {id:107}、[1,2,3]、[1,2,3]
}
for (let value of map.values()) {
	log(value) // person1、array1、array2
}
for (let entry of map.entries()) {
	log(entry) // [{id:107}, 'person1']、[[1,2,3], 'array1']、[[1,2,3], 'array2']
}

// 嘿嘿~ 还记得数组解构吗?
for (let [key, value] of map.entries()) {
	log(key, value)
}
for (let [key, value] of map) {
	log(key, value)
}

# 2. Map 与 Object 的转换

function objectFromMap(map) {
	let obj = Object.create(null)
	for (let [key, value] of map) obj[key] = value

	return obj // 又帮你回忆工厂模式了
}

function mapFromObject(obj) {
	let map = new Map()
	for (let key in obj) map.set(key, obj[key])

	return map // 又又帮你回忆工厂模式了
}

# 3. Map 与 JSON 的转换

// 情况1:当Map键值都是字符串时,可以直接转JSON对象
function jsonFromStrMap(strMap) {
	return JSON.stringify(objectFromMap(strMap))
}
// 情况2:当Map键值含其他数据类型时,可以转为JSON数组
function arrJsonFromMap(map) {
	return JSON.stringify([...map]) // 二维数组
}
    人生如梦,
    我投入了的却是真情,
    世界先爱了我,
    我不能不爱它。
    红莲华
    x
    loading...