浅谈JS的映射和集合
本文最后更新于：9 个月前
目录
引言
Map（映射）和Set（集合）是ES6引入的数据结构，它们提供了更灵活、高效的方式来存储和访问数据。本文将介绍一下这两种数据结构以及WeakMap（弱映射）和WeakSet（弱集合）这两种新的数据结构的概念及使用。
Map
Map是一种以键值对的形式存储数据的集合。它的结构类似于对象，它也是键值对的集合，但是Map的键可以是任何类型的值，包括对象、函数和原始类型等。可以说Map就是对象的一种扩展。
特点
- 键是唯一的，后添加的键值对会替换前面的
- 键值是有序的，使用Map对象将按照插入顺序得到每一个键值对
- 各种类型的值都可以当作键
属性及方法
创建
我们可以通过下面的代码创建一个空的Map
const map = new Map()
console.log(map); // Map(0) {}赋予初始值：map使用 [ ] 表示层级结构，第一维度是映射的个数，第二维度是具体的值，结构是 [key, value]
const map = new Map<string, string | number>([['name', '阿黄'], ['age', 20]])
console.log(map); // Map(2) { 'name' => '阿黄', 'age' => 20 }新增
通过set(key, value)来增加一个键值对，如果键已存在，则会更新对应的值
const map = new Map()
map.set('name', '阿黄')
console.log(map);// Map(1) { 'name' => '阿黄' }
map.set('name', '小黑')
console.log(map);// Map(1) { 'name' => '小黑' }获取
使用get(key)返回key对应的值，如果值不存在则返回undefined
const map = new Map()
console.log(map.get('name')); // undefined
map.set('name', '阿黄')
console.log(map.get('name')); // 阿黄是否存在值
使用map.has(key)可以判断是否存在键对应值
const map = new Map()
console.log(map.has('name')); // false
map.set('name', '阿黄')
console.log(map.has('name')); // true删除
通过delete(key)来删除map的值
const map = new Map()
map.set('name', '阿黄')
console.log(map); // Map(1) { 'name' => '阿黄' }
map.delete('name')
console.log(map); // Map(0) {}清空
使用map.clear()函数清空map
const map = new Map()
map.set('name', '阿黄')
map.set('age', 12)
console.log(map); // Map(2) { 'name' => '阿黄', 'age' => 12 }
map.clear()
console.log(map); // Map(0) {}获取长度
map可以通过size获取子集个数
const map = new Map()
map.set('name', '阿黄')
map.set('age', 12)
console.log(map.size); // 2键的迭代器
使用keys函数可以返回Map中所有的键的迭代器
const map = new Map()
map.set('name', '阿黄')
map.set('age', 12)
console.log(map.keys()); // { 'name', 'age' }值的迭代器
和keys类似，values函数可以返回Map中所有的值的迭代器
const map = new Map()
map.set('name', '阿黄')
map.set('age', 12)
console.log(map.values()); // { '阿黄', 12 }键值对的迭代器
使用entries或者是Symbol.iterator函数可以返回Map的键值对
const map = new Map()
map.set('name', '阿黄')
map.set('age', 12)
console.log(map.entries()); // { [ 'name', '阿黄' ], [ 'age', 12 ] }
console.log(map[Symbol.iterator]()); // { [ 'name', '阿黄' ], [ 'age', 12 ] }遍历
使用forEach函数进行遍历，和数组的forEach类似（数组第二项是索引），callback函数返回三个值，分别是value，key，map
const map = new Map()
map.set('name', '阿黄')
map.set('age', 12)
map.forEach((val, key, map) => {
console.log(val, key, map);
})
// 阿黄 name Map(2) { 'name' => '阿黄', 'age' => 12 }
// 12 age Map(2) { 'name' => '阿黄', 'age' => 12 }使用场景
描述映射关系
在对象中我们只能使用string或symbol来描述键的值，而Map可以很好的描述关系映射
const map = new Map()
map.set(['meat', 'fish'], '都是阿黄爱吃的')
console.log(map); // Map(1) { [ 'meat', 'fish' ] => '都是阿黄爱吃的' }缓存
我们使用Map的索引唯一性特点将其运用于缓存操作，下面的代码中我们使用一个函数作为map的键，第一次调用函数会触发set操作，后续操作会直接使用get获取对应值
const cache = new Map();
const temp = (key: any) => cache.get(key) ?? (cache.set(key, getNum(1, 2)), cache.get(key))// 缓存操作，首次访问会执行set操作
const getNum = (a: number, b: number) => a + b
console.log(temp(getNum))
console.log(temp(getNum))Set
Set是一种无序且唯一的集合（可以当成一个数学集合），它可以存储任何类型的值，包括对象、函数和原始类型等。它的结构类似数组，但是其中的值不允许重复，这点与Map的键值类似。
特点
- 成员的值都是唯一的
- 值的无序性（数据存储不依赖索引，而是哈希表）
属性及方法
创建及初始化
const set = new Set<string>()
console.log(set);// Set(0) {}初始化可以使用[ value ]或任意数组进行赋值
const set = new Set<string>(['阿黄'])
console.log(set);// Set(1) { '阿黄' }新增
Set的新增子项与Map不太一样，可以使用add函数进行操作
const set = new Set(['阿黄'])
set.add('小黑')
console.log(set);// Set(2) { '阿黄', '小黑' }删除
set使用delete对集合的单项进行删除
const set = new Set<string>(['阿黄'])
set.delete('阿黄')
console.log(set);// Set(0) {}其他属性
剩下的属性与Map几乎相同，用法上就不做赘述。此外，Set的迭代器方法比较特殊，使用set.values()和set.keys()的结果相同，因为Set的key和value都是value值
const set = new Set<string>(['阿黄'])
console.log(set.values()); // [Set Iterator] { '阿黄' }
console.log(set.keys()); // [Set Iterator] { '阿黄' }
console.log(set.entries()); // [Set Entries] { ['阿黄', '阿黄'] }使用场景
数组去重
const set = new Set([6, 6, 4, 2, 3, 4, 3, 3, 1, 5, 5, 2]);
console.log(set);// Set(6) { 6, 4, 2, 3, 1, 5 }集合操作
交集，并集，差集
const set = new Set([1, 2, 3, 4, 5]);
const set2 = new Set([1, 3, 5, 7, 9]);
// 交集
console.log([...set].filter(it => set2.has(it)));
// 并集
console.log(new Set([...set, ...set2]));
// 差集
console.log([...set].filter(it => !set2.has(it)));WeakMap
在了解WeakMap之前，先看段代码
let obj: any = {
name: "阿黄"
}
const map = new Map([[obj, "阿黄"]]);
obj = null
console.log(map);// Map(1) { { name: '阿黄' } => '阿黄' }上面的代码中我们新建了一个object类型的变量，使其作为键赋值到Map中，当我们把obj删除时，Map中的键值没有发生变化，说明其二者是深复制关系，此时的obj存在与Map中不会被垃圾回收机制处理。此时如果我们想清除这个obj在Map中的引用对象，就可以使用WeakMap。
回到正题，WeakMap是一种弱引用的哈希表对象，就像上面的例子，如果键对象不再被引用，它将被垃圾回收并从WeakMap中自动删除，从而避免了内存泄漏的问题
特点
- 键名只能是对象
- 键名使用弱引用
属性及方法
创建及初始化
这与Map相似，只不过键名只能传对象类型的
let obj: any = {
name: "阿黄"
}
const weakMap = new WeakMap([[obj, "阿黄"]]);其他属性
WeakMap只拥有Map的get、set、has、delete这几个方法，不包含iterator迭代属性，也就是说clear需要手动一个一个删除
const obj = {
name: "阿黄"
}
const obj2 = {
name: "小黑"
}
const weakMap = new WeakMap([[obj, "阿黄"]]);
weakMap.set(obj2, "小黑")
weakMap.delete(obj)
console.log(weakMap.has(obj)); // false
console.log(weakMap.get(obj2)); // 小黑使用场景
属性私有化
使用WeakMap可以对类的属性进行封装
const animalPrivate = new WeakMap()
class Animal {
constructor() {
animalPrivate.set(this, {
name: "阿黄"
})
}
getName() {
return animalPrivate.get(this).name
}
}
console.log(new Animal().getName());避免内存泄漏
与Map效果不同，关联的object删除后weakMap键名也会删除
let obj: any = {
name: "阿黄"
}
const weakMap = new WeakMap([[obj, "阿黄"]]);
console.log(weakMap.get(obj)); // 阿黄
obj = null
console.log(weakMap.get(obj)); // undefinedWeakSet
WeakSet和WeakMap一样，也可以避免内存泄漏，它的每一项只能传对象类型
特点
- 值只能是对象
- 值使用弱引用
属性及方法
创建及初始化
const obj = {
name: "阿黄"
}
const weakSet = new WeakSet([obj]);其他属性
WeakSet也是Set的简化版，只有add，delete，has三个属性，和WeakMap一样不支持iterator属性，无法迭代
const obj = {
name: "阿黄"
}
const obj2 = {
name: "小黑"
}
const weakSet = new WeakSet([obj]);
weakSet.add(obj2)
weakSet.delete(obj)
console.log(weakSet.has(obj));// false使用场景
避免内存泄漏
这点和WeakMap一样
let obj: any = {
name: "阿黄"
}
const weakSet = new WeakSet([obj]);
obj = null
console.log(weakSet.has(obj));// false总结
本文主要介绍了ES6引入的四种新的数据结构，分别是Map（映射）、Set（集合）、WeakMap（弱映射）和WeakSet（弱集合）。Map键可以是任意类型，唯一且有序；Set键值合一并可以是任意值，唯一且无序；WeakMap是键限制为对象的青春版Map；WeakSet是值为对象的迷你版Set，Weak的二者的键被垃圾回收后即刻消失。
以上就是文章全部内容，如果文章有帮到你或觉得文章不错的，还请支持一下作者，谢谢！
本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议 ，转载请注明出处！