ES6 中的 Set 和 Map 数据结构简介

在 ES6 中,Set 和 Map 是两个新的数据结构,它们提供了更加灵活的数据操作方式。本文将详细介绍 Set 和 Map 数据结构的特点和使用方法,并提供示例代码。

Set 数据结构

Set 是一种无序且不允许重复值的数据结构,类似于数组但是元素唯一。Set 中的元素可以是任何类型的值,当使用相等比较运算符 (==) 比较两个元素时,它们被视为相等的。

Set 的基本操作

  1. 创建 Set 对象

    使用 new Set() 方法可以创建一个空的 Set 对象,也可以使用数组或类数组对象作为参数来创建一个包含初始值的 Set 对象。例如:

    ----- ---- - --- ------ -- - --- --
    ----- ---- - --- ------- -- ---- -- ------- --- --
  2. 添加元素

    使用 add() 方法可以向 Set 中添加元素,如果添加的元素存在于 Set 中,则不会重复添加。例如:

    ----- --- - --- ------
    -----------
    -----------
    ----------- -- ------
  3. 删除元素

    使用 delete() 方法可以从 Set 中删除指定的元素,如果该元素不存在于 Set 中,则不进行任何操作。例如:

    ----- --- - --- ------- -- ----
    --------------
  4. 清空元素

    使用 clear() 方法可以清空 Set 中所有元素。例如:

    ----- --- - --- ------- -- ----
    ------------
  5. 判断元素是否存在

    使用 has() 方法可以判断 Set 中是否存在指定的元素。例如:

    ----- --- - --- ------- -- ----
    ----------- -- ----
    ----------- -- -----
  6. 获取元素个数

    使用 size 属性可以获取 Set 中元素的个数。例如:

    ----- --- - --- ------- -- ----
    ----- ---- - --------- -- -

Set 的迭代操作

Set 数据结构提供了多种迭代操作方式,可以方便地对元素进行遍历和操作。

  1. for...of 循环

    使用 for...of 循环可以遍历 Set 中的所有元素。例如:

    ----- --- - --- ------- -- ----
    --- ------ ---- -- ---- -
      ------------------
    -
  2. 迭代器

    使用 values() 方法可以获取一个迭代器对象,可以使用 for...of 循环或者 next() 方法逐个访问 Set 中的元素。例如:

    ----- --- - --- ------- -- ----
    ----- -------- - -------------
    --- ------ - ----------------
    ----- -------------- -
      --------------------------
      ------ - ----------------
    -

Map 数据结构

Map 是一种键值对的数据结构,与普通对象类似,但是键的类型可以是任何类型的值。Map 中每个键只能对应一个值,但是不同的键可以对应相同的值。Map 中使用严格的相等运算符(===)对键进行比较。

Map 的基本操作

  1. 创建 Map 对象

    使用 new Map() 方法可以创建一个空的 Map 对象,也可以使用数组或类数组对象作为参数来创建一个包含初始键值对的 Map 对象。例如:

    ----- ---- - --- ------ -- - --- --
    ----- ---- - --- ---------- --- ----- ----- -- -------- --- --
  2. 设置键值对

    使用 set() 方法可以向 Map 中设置键值对,如果键已经存在,则更新该键的值。例如:

    ----- --- - --- ------
    ------------ ---
    ------------ ---
    ------------ --- -- ----------
  3. 获取值

    使用 get() 方法可以从 Map 中获取指定键的值,如果键不存在,则返回 undefined。例如:

    ----- --- - --- ---------- --- ----- -----
    ----- ------ - ------------- -- -
    ----- ------ - ------------- -- ---------
  4. 删除键

    使用 delete() 方法可以从 Map 中删除指定的键及其对应的值,如果该键不存在于 Map 中,则不进行任何操作。例如:

    ----- --- - --- ---------- --- ----- -----
    ----------------
  5. 清空键值对

    使用 clear() 方法可以清空 Map 中所有键值对。例如:

    ----- --- - --- ---------- --- ----- -----
    ------------
  6. 判断键是否存在

    使用 has() 方法可以判断 Map 中是否存在指定的键。例如:

    ----- --- - --- ---------- --- ----- -----
    ------------- -- ----
    ------------- -- -----
  7. 获取键值对的个数

    使用 size 属性可以获取 Map 中键值对的个数。例如:

    ----- --- - --- ---------- --- ----- -----
    ----- ---- - --------- -- -

Map 的迭代操作

Map 数据结构提供了多种迭代操作方式,可以方便地对键值对进行遍历和操作。

  1. for...of 循环

    使用 for...of 循环可以遍历 Map 中的所有键值对。例如:

    ----- --- - --- ---------- --- ----- -----
    --- ------ ----- ------ -- ---- -
      ---------------- -------
    -
  2. 迭代器

    使用 entries() 方法可以获取一个迭代器对象,可以使用 for...of 循环或者 next() 方法逐个访问 Map 中的键值对。例如:

    ----- --- - --- ---------- --- ----- -----
    ----- -------- - --------------
    --- ------ - ----------------
    ----- -------------- -
      ---------------------------- -----------------
      ------ - ----------------
    -

结论

Set 和 Map 是 ES6 中新增的两种数据结构,提供了更加灵活的数据操作方式。在实际开发中,我们可以使用 Set 和 Map 来处理一些有特殊需求的数据结构,例如去重、排序、映射等。我们可以根据业务需求选择合适的数据结构来提高代码的可读性和性能。

示例代码:

-- --- --
----- ---- - --- ------- -- -- ----
------------------ -- ------ --- -- --

------------
------------------ -- ------ --- -- -- --

---------------
------------------ -- ------ --- -- --

------------------------- -- ----
------------------------- -- -----

----------------------- -- -

-- --- --
----- ---- - --- ---------- --- ----- -----
------------------ -- ------ - --- -- -- --- -- - -

------------- ---
------------------ -- ------ - --- -- -- --- -- - -

-----------------
------------------ -- ------ - --- -- - -

--------------------------- -- ----
--------------------------- -- -----

----------------------- -- -

来源:JavaScript中文网 ,转载请注明来源 本文地址:https://www.javascriptcn.com/post/6718a422ad1e889fe22d00db