ES6 中的 Map 数据结构使用技巧

Map 是 ES6 中新增的一种数据结构，它类似于对象，也是一种键值对的集合，但与对象不同的是，Map 中键可以是任何类型，而不仅仅是字符串或 Symbol，同时它提供了更多方便易用的方法。在前端开发中，Map 可以被广泛应用于数据处理、缓存管理、状态管理等场景。本文将介绍 ES6 中的 Map 数据结构的使用技巧。

创建 Map

创建 Map 可以通过 new Map() 进行实例化，也可以直接传入一个数组作为参数，数组中每个元素为一个键值对数组，如下：

let m1 = new Map();
let m2 = new Map([ [1, 'one'], [2, 'two'], [3, 'three'] ]);

基本操作

与对象类似，Map 也有增删改查的操作。

添加和修改

Map 的 set() 方法用于添加或修改键值对，它的返回值是 Map 本身，因此可以链式调用多次，如下：

let map = new Map();
map.set('name', '张三').set('age', 20);

查询

Map 的 get() 方法用于根据键名获取对应的值，如果键名不存在则返回 undefined，如下：

let map = new Map([ ['name', '张三'], ['age', 20] ]);
console.log(map.get('name')); // 输出 '张三'
console.log(map.get('gender')); // 输出 undefined

删除

Map 的 delete() 方法用于删除键值对，删除成功返回 true，失败返回 false，如下：

let map = new Map([ ['name', '张三'], ['age', 20] ]);
console.log(map.delete('name')); // 输出 true
console.log(map.delete('gender')); // 输出 false

清空

Map 的 clear() 方法用于清空所有键值对，如下：

let map = new Map([ ['name', '张三'], ['age', 20] ]);
map.clear();
console.log(map.size); // 输出 0

遍历 Map

Map 提供了四种遍历方法，分别为 keys()、values()、entries() 和 forEach()，它们返回的都是遍历器对象，可以使用 for...of 进行遍历。

遍历键名

let map = new Map([ ['name', '张三'], ['age', 20] ]);
for(const key of map.keys()){
    console.log(key);
}
// 输出：
// 'name'
// 'age'

遍历键值

let map = new Map([ ['name', '张三'], ['age', 20] ]);
for(const value of map.values()){
    console.log(value);
}
// 输出：
// '张三'
// 20

遍历键值对

let map = new Map([ ['name', '张三'], ['age', 20] ]);
for(const pair of map.entries()){
    console.log(pair);
}
// 输出：
// [ 'name', '张三' ]
// [ 'age', 20 ]

遍历键值对（简写）

let map = new Map([ ['name', '张三'], ['age', 20] ]);
for(const [key, value] of map){
    console.log(key, value);
}
// 输出：
// 'name' '张三'
// 'age' 20

forEach 方法遍历

let map = new Map([ ['name', '张三'], ['age', 20] ]);
map.forEach(function(value, key, map) {
    console.log(key, value);
});
// 输出：
// 'name' '张三'
// 'age' 20

Map 的其他方法

Map 还提供了一些方便的方法，如下：

has 方法，判断键是否存在

Map 的 has() 方法用于判断是否存在指定键，如下：

let map = new Map([ ['name', '张三'], ['age', 20] ]);
console.log(map.has('name')); // 输出 true
console.log(map.has('gender')); // 输出 false

size 属性，获取键值对数量

Map 的 size 属性用于获取键值对数量，如下：

let map = new Map([ ['name', '张三'], ['age', 20] ]);
console.log(map.size); // 输出 2

数组转 Map

可以使用 Array.from() 方法将数组转换为 Map，如下：

let arr = [ [1, 'one'], [2, 'two'], [3, 'three'] ];
let map = new Map(Array.from(arr));

示例

下面是一个使用 Map 实现缓存管理的示例代码：

-- -------------------- ---- -------
--- -------- - --- ------
-------- -------------
    ----------------------
        ------------------------ -------------------
    - ---- -
        ------------------------ -----
        --- ----- - -----------
        ----------------- -------
    -
-
-------------------- -- -- ---------- ---------
-------------------- -- -- ---------- ---------

总结

本文介绍了 ES6 中的 Map 数据结构的创建、基本操作、遍历和其他方法，并提供了实际使用场景的示例。Map 与对象相比，灵活性更高，功能也更加完善，是前端开发中不可或缺的一部分。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/650079a995b1f8cacde9a044