JavaScript 作为一门面向对象的语言,自然也不缺乏常用的数据结构。其中,Map 和 Set 是在 ES6 中被引入的,代替了 JavaScript 原有的 Object 和 Array 等数据结构,并在 ES12 中得到了进一步的升级和优化。本文将为大家详解 Map 和 Set 数据结构的使用方法、特性和实现原理。
Map 和 Set 数据结构概述
Map 数据结构
Map 是一种键值对的数据结构,它与 Object 不同的是,它的键和值可以是任意数据类型,而 Object 中的键只能是字符串类型。下面是一个简单的 Map 的构造方法:
----- --- - --- ------------- ------ ------- ------ ----------------- -- ------ - ------ -- ----- ----- -- -- -
上面的代码中,我们使用的是一个键值对数组作为 Map 构造方法的参数。注意,这里的 key 和 value 都可以是任意类型,而不只是字符串类型。我们还可以使用 Map 的 set 方法添加键值对,使用 get 方法获取相应键的值,使用 has 方法判断一个键是否存在于 Map 中,使用 delete 方法删除一个键值对,使用 clear 方法清空 Map 中的所有键值对。具体用法见下面的示例代码:
----- --- - --- ------ --------------- ------ -------------- ---- ----------------------------- -- -- ----------------------------- -- ---- ------------------- ----------------------------- -- ----- ------------ ----------------- -- ------ --
Set 数据结构
Set 是一种无重复值的集合数据结构,类似于数组,但其中的值都是唯一的。下面是一个简单的 Set 的构造方法:
----- --- - --- ------- -- ---- ----------------- -- ------ - -- -- - -
我们可以使用 Set 的 add 方法添加一个新值,使用 has 方法判断一个值是否存在于 Set 中,使用 delete 方法删除一个值,使用 clear 方法清空 Set 中的所有值。具体用法见下面的示例代码:
----- --- - --- ------ ----------- ----------- ------------------------ -- ---- -------------- ------------------------ -- ----- ------------ ----------------- -- ------ --
Map 和 Set 数据结构的特性
Map 数据结构的特性
除了可以存储任意类型的键和值之外,Map 还有很多其他的特性:
Map 中的键是唯一的。如果我们试图添加一个键已经存在的值,那么它的值将被覆盖。
Map 中的键是有序的。不同于 Object,Map 中的键是有序排列的,因此可以用 for...of 循环遍历 Map 中的键值对,而无需担心顺序问题。
----- --- - --- ----- -------- ------ ------- ---- ---------- ----- --- --- ------ ----- ------ -- ---- - -------------------- ----------- - -- ----- -- -- ---- -- -- ------- -
- Map 中的键可以是任意数据类型。除了一般的数据类型外,Map 还可以使用 null、undefined 和 NaN 作为键。需要注意的是,由于 NaN 不等于 NaN,因此我们在使用 NaN 作为键时需要格外小心。
----- --- - --- ------ ------------- -------- ------------------ ------------- ------------ ------- ----------------- -- ------ - ---- -- ------- --------- -- ------------ --- -- ----- -
- Map 的 size 属性可以获取其大小。与 Object 和 Array 不同,Map 不支持 length 属性,而是提供了 size 属性来获取其大小。
----- --- - --- ----- -------- ------ ------- ---- --- ---------------------- -- -
Set 数据结构的特性
除了存储唯一值的特性之外,Set 还有其它一些特性:
Set 中的值是唯一的。如果我们试图添加一个已经存在于 Set 中的值,那么添加操作将被忽略。
Set 中的值是无序的。与 Map 不同,Set 中的值是无序排列的,因此不能用 for...in 或者 for...of 获取其值。
----- --- - --- ------- -- ---- ----------------- -- ------ - -- -- - - --- ------ ----- -- ---- - ------------------- - -- - -- - -- -
- Set 的 size 属性可以获取其大小。与 Map 类似,Set 不支持 length 属性,而是提供了 size 属性来获取其大小。
----- --- - --- ------- -- ---- ---------------------- -- -
Map 和 Set 数据结构的优势
相较于 Object 和 Array,Map 和 Set 具有很多优势。这里列举一些主要的优势:
Map 和 Set 能够避免出现键冲突的问题。在 Object 和 Array 中,我们需要通过一些特殊的方法来避免键冲突(比如用特殊字符作为键名),而在 Map 和 Set 中,这个问题得到了很好地解决。
Map 和 Set 可以存储任意类型的值。在 Object 中,键只能是字符串类型,而在 Array 中,键只能是数字类型。而在 Map 和 Set 中,键和值都可以是任意类型的,这为我们存储和处理复杂数据类型提供了更多的可能性。
Map 和 Set 有很好的遍历性能。在 Object 中,我们需要通过 for...in 循环来遍历对象属性,而在 Array 中,我们需要使用 for 循环或者 forEach 方法来遍历数组。这些方法都有一些缺陷,例如无法获取对象中的 symbol 属性、无法从 break 或者 continue 中间跳出循环等。而在 Map 和 Set 中,我们可以使用 for...of 循环来遍历 Map 和 Set,它具有很好的可读性和可维护性。
总结
到这里为止,我们已经详细讲解了 Map 和 Set 数据结构的特性、用法和优势。Map 和 Set 在前端开发中具有广泛的应用场景,例如存储表单数据、存储一些状态等。同时,Map 和 Set 的使用也需要谨慎,比如在选择使用 NaN 作为键时需要注意其特殊性质。虽然 Map 和 Set 中的某些特性仍然需要依赖于 Object 和 Array,但这两个数据结构对于我们理解 JavaScript 数据结构的本质有着重要的作用。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/645b3fc5968c7c53b0d99af2