ES6 JavaScript中的哈希Map

ES6数据结构Map

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

回到顶部 目录

属性和方法

属性/方法	用途
size属性	返回map结构的成员个数 map.size
Map.prototype.set(key, value)	添加map值，整个Map结构（适合链式）如果已有key就覆盖，没有就新建
Map.prototype.get(key)	获取value值，没有就undefined
Map.prototype.has(key)	判断是否存在Map对象之中，返回一个布尔值
Map.prototype.delete(key)	删除某个键，返回一个布尔值
Map.prototype.clear()	清除所有成员，没有返回值
Map.prototype.keys()	返回遍历的键名
Map.prototype.values()	返回遍历的键值
Map.prototype.entries()	返回遍历的所有成员
Map.prototype.forEach()	遍历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转为对象
  1. 如果所有的key全是字符串，就可以无损转换
  2. 如果key有其他类型key值就会被转换为字符串
  3. 利用循环重新赋值
• 对象转为map
  1. Object.entries()
  2. 利用循环往里加
• map转为JSON：（JSON.stringify）
  1. 如果key值全是字符串，就和对象转换为json一样
  2. 如果key值有其他类型，就可以转换为数组类型的json
• JSON转为map
  1. 正常情况下，所有键名都是字符串（JSON.parse）
  2. 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) // "我是弱引用"

回到顶部 目录

方法

属性/方法	用途
WeakMap.prototype.set(key, value)	添加成员
WeakMap.prototype.get(key)	查询value
WeakMap.prototype.delete(key)	删除成员
WeakMap.prototype.has(key)	判断是否存在，返回一个布尔值

WeakMap应用

部署私有属性

const _counter = new WeakMap();
const _action = new WeakMap();

class Countdown {
    constructor(counter, action) {
        _counter.set(this, counter);
        _action.set(this, action);
    }
}

回到顶部 目录