ECMAScript 2017 中的 Map 和 WeakMap 数据结构详解
ECMAScript 2017 引入了两个新的数据结构：Map 和 WeakMap，它们都有着独特的特性和适用场景。在本文中，我们将深入了解这两个数据结构，并且探讨它们在前端应用中的应用。
Map
Map 是一种键值对集合，其中的键可以是任意类型，而值也可以是任意类型。它类似于普通的对象（Object），但是拥有更加丰富的功能。Map 中的键和值是一一对应的，即每个键都对应一个值。
创建 Map
创建 Map 的方式很简单，直接使用 new Map() 即可：
----- --- - --- ------
此时，我们创建了一个空的 Map 对象 map。
我们还可以在创建 Map 的时候，通过传入一个二维数组或者一个可迭代对象来进行初始化：
----- --- - --- ----- -------- ------ ------- --- --- ----------------- -- --- - ------ -- ----- ----- -- -- -
由此可见，我们通过传入一个二维数组，即可创建一个具有多个键值对的 Map。
Map 的基本操作
对于一个 Map 对象，我们可以使用以下方法进行基本操作：
set(key, value)：设置 Map 中指定键的值get(key)：获取 Map 中指定键对应的值has(key)：判断 Map 中是否包含指定键delete(key)：删除 Map 中指定的键值对clear()：清空 Map 中的所有键值对size：获取 Map 中键值对的数量
----- --- - --- ----- -------- ------ ------- --- --- -------------- ----- -- ------ ----------------------------- -- -- ---- ---------------------------- -- -- ---- ------------------ -- ------ ---------------------- -- -- - ------------ -- ------ ----------------- -- -- --- --
Map 的遍历
Map 做为一个可迭代对象，可以使用以下方式进行遍历：
keys()：返回一个包含 Map 中所有键的迭代器values()：返回一个包含 Map 中所有值的迭代器entries()：返回一个包含 Map 中所有键值对的迭代器forEach()：对 Map 中的每个元素执行指定操作
----- --- - --- ----- -------- ------ ------- --- --- --- ------ --- -- ----------- - ----------------- -- --- ------ - ----- - --- ------ ----- -- ------------- - ------------------- -- --- ---- - -- - --- ------ ----- ------ -- -------------- - -------------------- ----------- -- -- ------ --- - ----- --- - ------------------- ---- -- - -------------------- ----------- -- -- ------ --- - ----- --- --
WeakMap
WeakMap 也是一种键值对集合，其中的键只能是对象，而值可以是任意类型。WeakMap 中的键值对的强引用只有在键对象 exist 的前提下才能被保留，当键对象被垃圾回收后，对应的键值对也会被自动删除，因此它可以避免内存泄漏的问题。
创建 WeakMap
创建 WeakMap 的方式和创建 Map 类似，直接使用 new WeakMap() 即可：
----- ------- - --- ----------
此时，我们创建了一个空的 WeakMap 对象 weakMap。
同样地，在创建 WeakMap 的时候，也可以通过传入一个键值对的数组来进行初始化，但是这里的键只能是对象：
----- ---- - ------ ------ ----- ---- - ------ ------ ----- ------- - --- --------- ------ ------ ------ ----- --- ------------------------------- -- -- ----
WeakMap 的基本操作
对于一个 WeakMap 对象，我们可以使用以下方法进行基本操作：
set(key, value)：设置 WeakMap 中指定键的值get(key)：获取 WeakMap 中指定键对应的值has(key)：判断 WeakMap 中是否包含指定键delete(key)：删除 WeakMap 中指定的键值对
----- ---- - ------ ------ ----- ---- - ------ ------ ----- ------- - --- ---------- ----------------- ------ -- ------ ------------------------------- -- -- ---- ------------------------------- -- -- ----- --------------------- -- ------
WeakMap 的应用场景
WeakMap 具有内存优化的特性，因此在某些场景下可以提高程序的性能和稳定性。以下是几个不同的应用场景：
1. 对象属性的存储
使用 WeakMap 可以将对象的属性存储在 WeakMap 中，从而可以让这个对象具有更好的内存管理能力，减少内存泄漏的风险：
----- --- - --- -- -
----- ----------- - --- ----------
----- ------ -
----------------- ---- -
--------------------- - ----- --- ---
-
--------- -
------ ---------------------------
-
-------- -
------ --------------------------
-
-
------ -------
-----
----- ------ - --- --------- ----
------------------------------ -- -- ----
----------------------------- -- -- --在上述示例中，我们使用 WeakMap 存储了 Person 对象的私有属性。这样可以保证属性只能被对象本身读取，从而增强了对象的安全性。
2. DOM 节点的存储
在前端开发中，经常需要引用 DOM 节点对象。由于 DOM 节点对象的特殊性，可能会导致内存泄漏的问题。而使用 WeakMap 可以将 DOM 节点对象存储在 WeakMap 中，当节点被销毁时，对应的键值对也会被自动删除，从而避免了内存泄漏的问题。
----- ------- - --- ----------
-------- ------------------ -
-- ----------------- -
------ ----------------
-
----- ------- - ----------------------------
--------------- ---------
------ --------
-在上述示例中，我们使用 WeakMap 存储了 DOM 节点对象。每当需要获取节点对象的时候，我们先通过 has() 方法判断是否已经存在，如果存在则直接返回，否则通过 set() 方法存储新的节点对象。这样可以避免重复创建 DOM 节点对象，从而减少内存的消耗。
总结
在本文中，我们学习了 ECMAScript 2017 中新增的 Map 和 WeakMap 数据结构，并探讨了它们在前端应用中的应用场景。通过本文的学习，我们可以更好地理解 Map 和 WeakMap 的特性，以及它们在实际开发中的应用。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/65193ba595b1f8cacd16e9bd