在 ECMAScript 2015 (ES6) 中，新增了两种数据类型：Map 和 Set。这两种数据类型的出现，极大地简化了前端开发中的数据处理。本文将详细介绍 Map 和 Set 数据类型的用法，并提供示例代码，帮助读者更好地理解和应用这两种数据类型。
Map 数据类型
Map 数据类型是一种新的键值对集合，可以使用任何类型作为键和值，且不会发生类型转换。Map 的键是唯一的，如果重复添加相同的键，则后面的值会覆盖前面的值。Map 的大小可以用 size 属性获取。
创建 Map
可以使用 new Map() 创建一个新的 Map 对象，也可以在创建时传入一个数组，数组中的每个元素都是一个键值对数组。
-- ---- --- -- ----- ----- - --- ------ -- -------- --- -- ----- ----- - --- ----- -------- ---------- -------- --------- ---
Map 基本操作
Map 的基本操作包括添加、获取、删除和清空。
-- ----- ----------------- ---------- -- --- ----- ------ - ------------------ -- ----- --------------------- -- -- --- --------------
Map 遍历
Map 可以使用 for...of 循环遍历，也可以使用 forEach() 方法遍历。
-- -------- ---- --- ------ ----- ------ -- ------ - ------------------- - ----------- - -- --------- ---- --------------------- ---- -- - ------------------- - ----------- ---
Map 示例代码
下面是一个使用 Map 实现计数器的示例代码：
----- ------- - --- ------ ----- ----- - --------- --------- -------- --------- --------- --------- ------------------ -- - ----- ----- - ----------------- -- -- ----------------- ----- - --- --- --------------------- -- --------- - ------- -- -- -------- -- -- -------- -- - -
Set 数据类型
Set 数据类型是一种新的集合类型，用于存储无重复值的数据。Set 中的值可以是任何类型，且不会发生类型转换。Set 的大小可以用 size 属性获取。
创建 Set
可以使用 new Set() 创建一个新的 Set 对象，也可以在创建时传入一个数组，数组中的每个元素都会被添加到 Set 中。
-- ---- --- -- ----- ----- - --- ------ -- -------- --- -- ----- ----- - --- -------------- -----------
Set 基本操作
Set 的基本操作包括添加、获取、删除和清空。
-- --- -------------------- -- --------- ----- --------- - -------------------- -- --- ----------------------- -- -- --- --------------
Set 遍历
Set 可以使用 for...of 循环遍历，也可以使用 forEach() 方法遍历。
-- -------- ---- --- ------ ----- -- ------ - ------------------- - -- --------- ---- ------------------- -- - ------------------- ---
Set 示例代码
下面是一个使用 Set 去重的示例代码：
----- --- - --- -- -- -- -- -- -- --- ----- --------- - ------- ---------- ----------------------- -- ------ -- -- -- --
总结
Map 和 Set 是 ECMAScript 2015 (ES6) 中新增的两种数据类型，它们可以极大地简化前端开发中的数据处理。本文介绍了 Map 和 Set 的创建、基本操作和遍历，同时提供了示例代码，帮助读者更好地理解和应用这两种数据类型。希望本文能对读者在前端开发中的工作有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/650d554c95b1f8cacd70bf64