ES12（也被称为 ES2021）是 JavaScript 的最新版本，它引入了一些新的特性和改进。其中，Map 和 Set 是两个非常有用的数据结构，它们可以大大提高前端代码的可读性和性能。本文将介绍它们的用法和优点。
Map
Map 是一种键值对的对象集合，其中的键和值可以是任意数据类型。与传统的对象字面量相比，Map 可以避免对象的属性名冲突问题，并可以使用任意类型作为键，例如字符串、数值、布尔值、甚至是对象或函数。
下面是创建 Map 的基本语法：
const myMap = new Map();
可以通过 set 方法向 Map 添加键值对：
myMap.set('key1', 'value1'); myMap.set('key2', 'value2');
可以使用 get 方法获取指定键的值：
const value1 = myMap.get('key1'); // 'value1'
Map 还提供了一些其他有用的方法，例如 has、delete、clear、forEach 等。
使用 Map 的优点
- 易于维护：由于 Map 中的键和值都是显式添加的，因此可以更容易地理解和维护代码。
- 避免冲突：使用字符串键时，对象属性名冲突是常见问题。使用 Map 可以避免这个问题，因为每个键都是单独的，不会与其他键冲突。
- 更快的搜索：由于 Map 使用哈希表实现，因此可以在常数时间内搜索指定键的值。相比之下，传统的对象搜索需要遍历整个对象，时间复杂度为 O(n)。
Set
Set 是一种无序、不重复的集合，其中的元素可以是任意数据类型。与数组相比，Set 可以确保每个元素只出现一次，并可以轻松进行添加、删除和搜索操作。
下面是创建 Set 的基本语法：
const mySet = new Set();
可以通过 add 方法向 Set 添加元素：
mySet.add('value1'); mySet.add('value2');
可以使用 has 方法检查 Set 中是否存在指定元素：
const isValue1Exist = mySet.has('value1'); // true
Set 还提供了一些其他有用的方法，例如 delete、clear、forEach 等。
使用 Set 的优点
- 避免重复：Set 可以确保集合中的每个元素只出现一次，因此可以避免出现重复元素的问题。
- 更快的搜索：由于 Set 使用哈希表实现，因此可以在常数时间内搜索指定元素是否存在。相比之下，数组搜索需要遍历整个数组，时间复杂度为 O(n)。
示例代码
下面是一个基于 Map 和 Set 的示例代码，它使用 Map 存储用户信息，使用 Set 存储用户喜欢的颜色：
-- -------------------- ---- ------- ----- ----- - --- ------ -- ---- ------------------ - ---- --- ----- ---- ----- --- ---------------- - ---- --- ----- -------- --- -- --------- ----- ---------- - --- ------ ---------------------- ----------------------- ------------------ - ---------------------- ------ ---------- --- ----- -------- - --- ------ ---------------------- ---------------- - -------------------- ------ -------- --- -- ------------ -------------------- ----- -- - -------------------- ---- ------------ ----------------- -- ------------ - ------------- ------ -------------------------------- ------ - ---展开代码
输出结果如下：
Alice (age 25, New York): Likes: red, blue Bob (age 30, London): Likes: green
通过使用 Map 和 Set，我们可以更方便地组织和操作数据，并可以避免出现常见的问题，例如属性名冲突和重复元素。在实际开发中，这两个数据结构可以大大提高代码性能和可读性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d64270a941bf7134bf4860
