ES6数据结构Map
目录
- ES6数据结构Map
- map
- 基本用法
- 属性和方法
- map各种转换应用
- WeakMap
- WeakMap与Map的区别
- 语法
- 弱引用
- 方法
- WeakMap应用
map
基本用法
为什么要map数据结构:
JavaScript的对象本质上就是一个键值对的集合(hash结构),但是传统上只能用字符串当key值,这样就有很多局限性
Map数据结构:(对象的升级版)
- 类似于对象,还是采用键值对的方式
- 对象的key值只能保存字符串,但是map的各种类型的值(包括对象)都可以
- 可以接受一个数组为参数
- Map的键实际上是跟内存地址绑定的,只要内存地址不一样,就视为两个键,如果就是简单类型的值,就视为一个键
const m = new Map();
const ma = new Map([
['name', 'zhangsan'],
['age', 10]
]);
ma.size // 2
ma.has('name') // true
ma.get('name') // "张三"
let map = new Map();
map.set(-0, 123);
map.get(+0) // 123
map.set(true, 1);
map.set('true', 2);
map.get(true) // 1
map.set(undefined, 3);
map.set(null, 4);
map.get(undefined) // 3
map.set(NaN, 123);
map.get(NaN) // 123
回到顶部 目录
属性和方法
属性/方法 | 用途 |
| 返回map结构的成员个数 |
| 添加map值,整个Map结构(适合链式)如果已有key就覆盖,没有就新建 |
| 获取value值,没有就undefined |
| 判断是否存在Map对象之中,返回一个布尔值 |
| 删除某个键,返回一个布尔值 |
| 清除所有成员,没有返回值 |
| 返回遍历的键名 |
| 返回遍历的键值 |
| 返回遍历的所有成员 |
| 遍历Map的所有成员 |
const map = new Map([
['F', 'no'],
['T', 'yes'],
]);
for (let key of map.keys()) {
console.log(key);
}
- Map 的遍历顺序就是插入顺序
map各种转换应用
- map转为数组
使用扩展运算符(...)
- 数组转为map
将数组传入 Map 构造函数,就可以转为 Map
- map转为对象
- 如果所有的key全是字符串,就可以无损转换
- 如果key有其他类型key值就会被转换为字符串
- 利用循环重新赋值
- 对象转为map
- Object.entries()
- 利用循环往里加
- map转为JSON:(JSON.stringify)
- 如果key值全是字符串,就和对象转换为json一样
- 如果key值有其他类型,就可以转换为数组类型的json
- JSON转为map
- 正常情况下,所有键名都是字符串(JSON.parse)
- Map 转为数组 JSON 的逆操作
回到顶部 目录
WeakMap
WeakMap与Map的区别
相同点:结构类似,都是键值对的集合
不同点:
- WeakMap只接受对象作为键名(null除外)
- WeakMap的键名所指向的对象,不计入垃圾回收机制(key值弱引用)
语法
// 无参
const ws = new WeakMap();
const key = {foo: 1};
wm1.set(key, 2);
wm1.get(key) // 2
// WeakMap 也可以接受一个数组,
// 作为构造函数的参数
const k1 = [1, 2, 3];
const k2 = [4, 5, 6];
const wm2 = new WeakMap([[k1, 'foo'], [k2, 'bar']]);
wm2.get(k2) // "bar"
弱引用
正常情况下的:
const obj1 = document.getElementById('foo');
const obj2 = document.getElementById('bar');
const arr = [
[obj1, 'foo 元素'],
[obj2, 'bar 元素'],
];
如果我们不需要obj1和obj2的时候,只能手动删除,如果不删除就有可能照成内存泄露
解决方法:
const wm = new WeakMap();
const obj = document.getElementById('foo');
wm.set(obj, '我是弱引用');
wm.get(element) // "我是弱引用"
回到顶部 目录
方法
属性/方法 | 用途 |
| 添加成员 |
| 查询value |
| 删除成员 |
| 判断是否存在,返回一个布尔值 |
WeakMap应用
部署私有属性
const _counter = new WeakMap();
const _action = new WeakMap();
class Countdown {
constructor(counter, action) {
_counter.set(this, counter);
_action.set(this, action);
}
}
回到顶部 目录