在 JavaScript 中使用数据结构可以使代码更加简洁、可读性更高,ES6 中引入了一些新的数据结构,包括 set 和 map。它们可以替代数组和对象来存储和操作数据,并提供了更强大的功能。
Set
Set 是一种类似数组的数据结构,不过它成员的值都是唯一的,没有重复的值。
创建 Set
我们可以使用 Set 构造器来创建一个空的 Set:
----- ----- - --- ------
也可以在创建时传入一个数组或类数组对象(如 NodeList)来初始化 Set:
----- ------------- - --- ------- -- -- ----------
这里我们创建了一个包含四个元素的 Set。
向 Set 添加元素
使用 Set.prototype.add() 方法向 Set 中添加单个元素:
------------- ------------------- ----------- ---- ------- ---
从 Set 中删除元素
使用 Set.prototype.delete() 方法可以从 Set 中删除单个元素:
----------------------
判断 Set 中是否存在某个元素
可以使用 Set.prototype.has() 方法判断 Set 中是否存在指定元素:
------------- -- ---- ------------------- -- -----
Set 的遍历
我们可以使用 Set.prototype.forEach() 方法遍历 Set,并对每个元素执行一些操作:
--------------------- -- - ------------------- ---
Set.prototype.entries() 方法返回 Set 中每个元素的键/值对,以数组形式:
--- ------ ----- ------ -- ---------------- - ---------------- ------- -
Set 的应用
Set 最常见的应用场景就是去重,例如:
----- --- - --- -- -- -- -- --- ----- --------- - -------------- ---------- ----------------------- -- --- -- -- --
Map
Map 是一种存储键值对的数据结构,键和值可以是任何 JavaScript 数据类型。
创建 Map
我们可以使用 Map 构造器来创建一个空的 Map:
----- ----- - --- ------
把一个数组传入构造函数,该数组的成员是一个个表示键值对的数组:
----- ------------- - --- ----- -------- ------ ------- ---- ---------- ----- ---
这里我们创建了一个包含三个键值对的 Map。
向 Map 中添加元素
使用 Map.prototype.set() 方法向 Map 中添加键值对:
----------------- ------ ---------------- ---- ------------------- -----
从 Map 中删除元素
使用 Map.prototype.delete() 方法可以从 Map 中删除指定键值对:
---------------------
获取 Map 中的值
使用 Map.prototype.get() 方法获取指定键的值:
----- --- - ----------------- ----------------- -- --
判断 Map 中是否存在某个键
使用 Map.prototype.has() 方法判断 Map 中是否存在指定键:
------------------ -- ----- ----------------- -- ----
Map 的遍历
Map 可以使用 for...of、forEach、Map.prototype.keys()、Map.prototype.values() 等方法遍历。
遍历 Map 的键值对,可以使用 Map.prototype.entries() 方法,返回 Map 中每个键值对的数组:
--- ------ ----- ------ -- ---------------- - ---------------- ------- -
Map 的应用
Map 常见的应用场景有:缓存、JSON 序列化等。
例如,在前端开发中,缓存页面数据是很常见的操作。我们可以使用 Map 来缓存页面中某个元素的位置信息:
----- ------------ - --- ------ -- ------ ------------------------------------------------------- - -- --- -- --- -- -- --- -- ------ ----- -------- - -------------------------------------------------------- ----------------------
总结
本文介绍了 ES6 中的 Set 和 Map,包括它们的创建、添加/删除元素、遍历和常见应用场景。使用 Set 和 Map 可以使代码更简洁易读并提供强大的功能。建议在实际开发中多加使用,熟练掌握它们的使用方法。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/653b122b7d4982a6eb561eb4