ES6 的 Map 集合的基本用法

370 阅读2分钟

ES6 中的 Map 集合

1.概念

Map 集合是一种存储键值对的有序列表,其中的键名和对应的值支持所有的数据类型。

键名的等价性判断是通过 Object.is() 方法实现的。如数字 5 和字符串 '5',分别作为两个独立的键存储在 Map 集合中。这一点和对象中的不一样,对象的属性名总是被强制转换为字符串类型。存储相同的键,新增的值会覆盖之前保存的值,即 Map 集合中的键是唯一的。

2.Map 集合支持的方法

  1. set(key, value) 方法:用于向集合中添加新元素;
  2. get(key) 方法:查询键为 key 的元素值;
  3. has(key) 方法:检测键为 key 的元素在集合中是否存在;
  4. delete(key) 方法:删除键为 key 的元素;
  5. clear() 方法:移除集合中的所有键值对。
let map = new Map()
map.set(5, 'Sugary')
map.set('5', 'Ping')
map.set('5', 'Hello')
map.set('name', 'Chrestin')

console.log(map.size) // 3 (忽略相同键名的)
console.log(map.get('5')) // Hello

// has()
console.log(map.has('name')) // true
console.log(map.get('name')) // Chrestin

// delete()
map.delete('name')
console.log(map.has('name')) // false
console.log(map.get('name')) // undefined
console.log(map.size) // 2

// clear()
map.clear()
console.log(map.size) // 0

3.Map 集合的初始化

let map = new Map([
  ['name', '奶糖'],
  ['age', 12],
])

console.log(map.size) // 2
console.log(map.get('name')) // 奶糖
console.log(map.get('age')) // 12

为了确保存储在 Map 集合中的键名不会被强制转换为其他类型,因而只能将它们存储在数组中,因为只是唯一一种准确呈现键名类型的方式。

4.Map 集合的 forEach() 方法

比较简单,直接看例子~

let map = new Map([
  ['name', '奶糖'],
  ['age', 12],
])

let map = new Map([
  ['name', '奶糖'],
  ['age', 12],
])

map.forEach((value, key, ownerMap) => {
  console.log('value: ', value)
  console.log('key: ', key)
  console.log(ownerMap === map)
})

// value:  奶糖
// key:  name
// true
// value:  12
// key:  age
// true

ES6 中的 Weak Map 集合

1.概念

Weak Set 是弱引用 Set 集合,同样的,Weak Map 是弱引用 Map 集合,也用于存储对象的弱引用。Weak Map 集合中的键名必须是一个非 null 类型的对象,使用非对象键名会报错。

Weak Map 集合的键名保存的是对象的弱引用,如果在弱引用之外不存在其他的强引用,引擎的垃圾回收机制会自动回收这个对象,同时会移除 Weak Map 集合中的这个键值对。然而,这个规则仅对键名有效。如果键名对应的值是一个对象,则保存的是对象的强引用,不会触发垃圾回收机制。

2.Weak Map 集合仅支持的方法

  1. set() 方法
  2. get() 方法
  3. has() 方法
  4. delete() 方法

Weak Set 集合和 Weak Map 集合都不支持 clear() 方法。因为它们都不支持键名枚举。

3.Weak Map 集合的初始化方法(同 Map 集合)

let key1 = {},
  key2 = {}
let map = new WeakMap([
  [key1, '奶糖'],
  [key2, 12],
])

console.log(map.size) // undefined (不支持该属性)
console.log(map.get(key1)) // 奶糖
console.log(map.get(key2)) // 12