在前端开发中，我们经常需要处理一些集合和映射的数据结构，例如去重、查找等操作。在 ECMAScript 2020 中，Set 和 Map 是两个非常有用的数据结构，它们可以帮助我们更方便地处理集合和映射数据。本文将介绍 Set 和 Map 的用法和区别，并提供示例代码供读者参考。
Set 数据结构
Set 是一种无序的、不重复的数据集合，它的成员只能是唯一的值。Set 中可以存储任何类型的值，例如数字、字符串、对象等。Set 的主要作用是去重，可以用来快速去除数组中的重复元素。
创建 Set
可以使用 Set 构造函数来创建一个空的 Set：
const set1 = new Set();
也可以在创建 Set 时传入一个数组，用于初始化 Set：
const set2 = new Set([1, 2, 3, 3, 4, 5]);
console.log(set2); // Set { 1, 2, 3, 4, 5 }Set 的方法
Set 提供了一些常用的方法，例如：
add(value)：向 Set 中添加一个值；delete(value)：从 Set 中删除一个值；has(value)：判断 Set 中是否存在某个值；clear()：清空 Set 中的所有值；size：获取 Set 中的元素个数。
-- -------------------- ---- ------- ----- ---- - --- ------ ------------ ------------ ------------ ------------------------- -- ---- --------------- ------------------ -- --- - -- - - ----------------------- -- - ------------- ------------------ -- --- --
Set 的遍历
Set 提供了四种遍历方法：
keys()：返回一个包含 Set 中所有键的迭代器；values()：返回一个包含 Set 中所有值的迭代器；entries()：返回一个包含 Set 中所有键值对的迭代器；forEach()：按照插入顺序依次调用每个值。
-- -------------------- ---- ------- ----- ---- - --- --------- ---- ------ --- ------ --- -- ------------ - ----------------- -- - - - - --- ------ ----- -- -------------- - ------------------- -- - - - - --- ------ ----- ------ -- --------------- - ---------------- ------- -- - - - - - - - -------------------- -- - ------------------- -- - - - ---
Map 数据结构
Map 是一种键值对的集合，它的键可以是任何类型的值，例如数字、字符串、对象等。Map 中的键是唯一的，但值可以重复。Map 的主要作用是存储和查找键值对数据。
创建 Map
可以使用 Map 构造函数来创建一个空的 Map：
const map1 = new Map();
也可以在创建 Map 时传入一个二维数组，用于初始化 Map：
const map2 = new Map([
['name', '张三'],
['age', 18],
[{}, 'object'],
]);
console.log(map2); // Map { 'name' => '张三', 'age' => 18, {} => 'object' }Map 的方法
Map 提供了一些常用的方法，例如：
set(key, value)：向 Map 中添加一个键值对；get(key)：获取 Map 中指定键的值；delete(key)：从 Map 中删除指定键的值；has(key)：判断 Map 中是否存在指定键；clear()：清空 Map 中的所有键值对；size：获取 Map 中的键值对个数。
-- -------------------- ---- ------- ----- ---- - --- ------ ---------------- ------ --------------- ---- ------------------------------ -- -- ------------------- ------------------ -- --- - ------ -- ---- - ----------------------------- -- ----- ----------------------- -- - ------------- ------------------ -- --- --
Map 的遍历
Map 提供了四种遍历方法：
keys()：返回一个包含 Map 中所有键的迭代器；values()：返回一个包含 Map 中所有值的迭代器；entries()：返回一个包含 Map 中所有键值对的迭代器；forEach()：按照插入顺序依次调用每个键值对。
-- -------------------- ---- ------- ----- ---- - --- ----- -------- ------ ------- ---- ---- ---------- --- --- ------ --- -- ------------ - ----------------- -- ---- --- -- - --- ------ ----- -- -------------- - ------------------- -- -- -- ------ - --- ------ ----- ------ -- --------------- - ---------------- ------- -- ---- -- --- -- -- ------ - -------------------- ---- -- - ---------------- ------- -- ---- -- --- -- -- ------ ---
Set 和 Map 的区别
Set 和 Map 都是用于存储数据的集合，它们的区别在于：
- Set 中存储的是单个元素，而 Map 中存储的是键值对；
- Set 中的元素是唯一的，而 Map 中的键是唯一的，值可以重复。
因此，在使用时需要根据具体的需求选择使用 Set 还是 Map。
总结
Set 和 Map 是 ECMAScript 2020 中非常有用的数据结构，它们可以帮助我们更方便地处理集合和映射数据。本文介绍了 Set 和 Map 的用法和区别，并提供了示例代码供读者参考。希望本文能对前端小白们学习 ECMAScript 2020 有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65799c4bd2f5e1655d3ace0c