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