随着 JavaScript 的发展,ES6 推出了许多新语法和数据结构,其中包括了我们今天要讨论的 Map 和 Set。在本篇文章中,我们将详细了解这两个数据结构的用法以及如何在实际开发中使用它们。
Map
Map 是一种键值对的集合,其中每个键和值都可以是任意类型的数据。它是 ES6 中新增的一个数据结构,相较于 JavaScript 中原有的 Object 来说,Map 有以下优点:
- 可以使用任意类型的数据作为键值,包括对象、数组等
- Map 中存储键值对的顺序是有序的,而 Object 中顺序是无序的
- Map 可以方便地获取键值对的数量,而 Object 则需要手动遍历计算
创建 Map
我们可以使用 new Map()
来创建一个空的 Map,也可以传入一个数组作为参数来创建一个包含键值对的 Map。
-- ---- --- ----- ---- - --- ------ -- -------- --- ----- ---- - --- ----- -------- --------- ------- ---- -- ----- --------- -- ------- ---
在创建包含键值对的 Map 时,每个键值对都通过一个数组来表示,该数组中包含两个元素,第一个元素为键,第二个元素为值。
基本操作
Map 支持以下常用操作:
set(key, value)
向 Map 中添加新的键值对,如果该键已存在,则会覆盖原来的值。
----- --- - --- ------ --------------- --------- -------------- ---- --------------- ------- ----------------- -- ------ - ------ -- ------ ----- -- -- -
get(key)
获取指定键对应的值,如果该键不存在,则返回 undefined。
----- --- - --- ------ --------------- --------- ----------------------------- -- ------- ---------------------------- -- ---------
has(key)
判断指定键是否存在于 Map 中,如果存在则返回 true,否则返回 false。
----- --- - --- ------ --------------- --------- ----------------------------- -- ---- ---------------------------- -- -----
delete(key)
从 Map 中删除指定键值对,如果删除成功则返回 true,否则返回 false。
----- --- - --- ------ --------------- --------- -------------------------------- -- ---- ------------------------------- -- -----
clear()
清空 Map 中的所有键值对。
----- --- - --- ------ --------------- --------- -------------- ---- ------------ ---------------------- -- -
size
获取 Map 中键值对的数量。
----- --- - --- ------ --------------- --------- -------------- ---- ---------------------- -- -
迭代器
Map 支持以下迭代器方法:
keys()
返回一个包含 Map 中所有键的迭代器。
----- --- - --- ------ --------------- --------- -------------- ---- --- ------ --- -- ----------- - ----------------- - -- ------ -- -----
values()
返回一个包含 Map 中所有值的迭代器。
----- --- - --- ------ --------------- --------- -------------- ---- --- ------ ----- -- ------------- - ------------------- - -- ------- -- --
entries()
返回一个包含 Map 中所有键值对的迭代器。
----- --- - --- ------ --------------- --------- -------------- ---- --- ------ ----- ------ -- -------------- - ---------------- ------- - -- ------ ------- -- ----- --
forEach(callbackFn[, thisArg])
对 Map 中的每个键值对执行指定的回调函数,可以传入第二个参数指定回调函数中的 this 对象。回调函数中的参数依次为 value、key 和 Map 本身。
----- --- - --- ------ --------------- --------- -------------- ---- --------------------------- ---- ---- - ---------------- ------- --- -- ------ ------- -- ----- --
Set
Set 是一种无序且不重复的集合,其中每个元素都是唯一的。它也是 ES6 中新增的一个数据结构,相较于 JavaScript 中原有的 Array 来说,Set 有以下优点:
- Set 中的元素不允许重复,可以有效地去除数组中的重复元素
- Set 的查找和删除操作比 Array 更高效
创建 Set
我们可以使用 new Set()
来创建一个空的 Set,也可以传入一个数组作为参数来创建一个包含元素的 Set。
-- ---- --- ----- ---- - --- ------ -- ------- --- ----- ---- - --- ------- -- ----
基本操作
Set 支持以下常用操作:
add(value)
向 Set 中添加新的元素,如果该元素已存在,则不会产生影响。
----- --- - --- ------ ----------- ----------- ----------- ----------------- -- ------ - -- - -
has(value)
判断指定元素是否存在于 Set 中,如果存在则返回 true,否则返回 false。
----- --- - --- ------ ----------- ------------------------ -- ---- ------------------------ -- -----
delete(value)
从 Set 中删除指定元素,如果删除成功则返回 true,否则返回 false。
----- --- - --- ------ ----------- --------------------------- -- ---- --------------------------- -- -----
clear()
清空 Set 中的所有元素。
----- --- - --- ------ ----------- ----------- ------------ ---------------------- -- -
size
获取 Set 中元素的数量。
----- --- - --- ------ ----------- ----------- ---------------------- -- -
迭代器
Set 支持以下迭代器方法:
values()
返回一个包含 Set 中所有元素的迭代器。
----- --- - --- ------ ----------- ----------- --- ------ ----- -- ------------- - ------------------- - -- - -- -
keys()
与 values() 方法一样。
entries()
返回一个包含 Set 中所有元素的迭代器,同时对于 Set 中的每个元素,键和值都是该元素本身。
----- --- - --- ------ ----------- ----------- --- ------ ----- ------ -- -------------- - ---------------- ------- - -- - - -- - -
forEach(callbackFn[, thisArg])
对 Set 中的每个元素执行指定的回调函数,可以传入第二个参数指定回调函数中的 this 对象。回调函数中的参数依次为 value、key 和 Set 本身。
----- --- - --- ------ ----------- ----------- --------------------------- ---- ---- - ---------------- ------- --- -- - - -- - -
实际应用
我们可以通过 Map 和 Set 来优化一些常见的问题,例如去除数组中的重复元素、统计字符串中每个字符的出现次数等。
去除数组中的重复元素
使用 Set 可以方便地去除数组中的重复元素。
----- --- - --- -- -- -- -- --- ----- --- - --- --------- ---------------------- -- --- -- -- --
统计字符串中每个字符的出现次数
使用 Map 可以方便地统计字符串中每个字符的出现次数。
----- --- - ------ ------- ----- --- - --- ------ --- ------ ---- -- ---- - ----- ----- - ------------- -- -- ------------- ----- - --- - ----------------- -- ------ - --- -- -- --- -- -- --- -- -- --- -- -- - - -- -- --- -- -- --- -- -- --- -- - -
总结
Map 和 Set 是 ES6 中新增的两个数据结构,它们在实际开发中有着广泛的应用,如去重、键值对管理、数据统计等。在开发过程中,我们可以灵活地使用这两个数据结构来提高代码的可读性和性能。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/658393fbd2f5e1655de713d0