介绍
ES6引入了新的数据结构Map，用于存储一组键值对。与对象不同，Map允许键的任何类型（包括对象、NaN等），并且不会自动将键转为字符串。同时Map还有更多的API，比如size属性、clear()方法等。ES8更是 added新的API，如：forEach、reduce等。
在前端开发中，Map对象可以应用于多个场景，比如存储数据、缓存数据、实现单向映射或者双向映射等等。接下来我们就来深入探讨一下Map对象的详细使用。
创建Map对象
- 使用构造函数创建
Map对象可以通过构造函数创建，构造函数可以有一个可迭代的entries参数，它可以是能够返回key-value对的任何对象。
const map = new Map([ ['key1', 'value1'], ['key2', 'value2'] ]);
- 使用set()方法向Map对象添加键值对
const map = new Map();
map.set('key1', 'value1');
map.set('key2', 'value2');Map对象的常用API
- Map.prototype.size
size属性返回Map对象元素个数。
const map = new Map([ ['key1', 'value1'], ['key2', 'value2'] ]); console.log(map.size); // 2
- Map.prototype.set()
set()方法用于向Map对象添加键值对，如果该键已经存在，则它的值将被更新为新的值。
const map = new Map();
map.set('key1', 'value1');
map.set('key2', 'value2');- Map.prototype.get()
get()方法用于获取Map对象的某个键值对的值，如果该键不存在，则返回undefined。
const map = new Map([
['key1', 'value1'],
['key2', 'value2']
]);
console.log(map.get('key1')); // value1
console.log(map.get('key3')); // undefined- Map.prototype.delete()
delete()方法用于删除Map对象中的某个键值对，操作成功返回true，否则返回false。
const map = new Map([
['key1', 'value1'],
['key2', 'value2']
]);
console.log(map.delete('key1')); // true
console.log(map.size); // 1- Map.prototype.clear()
clear()方法用于清除Map对象中所有的键值对。
const map = new Map([ ['key1', 'value1'], ['key2', 'value2'] ]); map.clear(); console.log(map.size); // 0
- Map.prototype.has()
has()方法用于检测某个键是否存在于Map对象中，存在则返回true，否则返回false。
const map = new Map([
['key1', 'value1'],
['key2', 'value2']
]);
console.log(map.has('key1')); // true
console.log(map.has('key3')); // false示例代码
实现单向映射
const map = new Map();
map.set('red', '#f00');
map.set('green', '#0f0');
map.set('blue', '#00f');
console.log(map.get('red')); // #f00实现双向映射
-- -------------------- ---- ------- ----- ---- - --- ----- ------- -------- --------- -------- -------- ------- --- ----- ---- - --- ------ --- ---- --- -- -- --------------- - ----------- --- - ------------------------------ -- ---
结论
Map对象是JavaScript中一个非常实用的数据类型，可以进行单向映射、双向映射等操作，同时它也具有一系列的API，方便使用。在开发中，我们可以根据具体的需求来选择使用Map对象。同时，ES8还增加了很多新的API，可以扩展Map对象的功能，提供更好的使用体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/670b3571d91dce0dc888666a