在前端开发中，我们经常需要处理一些集合和映射的数据结构，例如去重、查找等操作。在 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 中的元素个数。
// javascriptcn.com 代码示例
const set3 = new Set();
set3.add(1);
set3.add(2);
set3.add(3);
console.log(set3.has(2)); // true
set3.delete(2);
console.log(set3); // Set { 1, 3 }
console.log(set3.size); // 2
set3.clear();
console.log(set3); // Set {}Set 的遍历
Set 提供了四种遍历方法：
keys()：返回一个包含 Set 中所有键的迭代器；values()：返回一个包含 Set 中所有值的迭代器；entries()：返回一个包含 Set 中所有键值对的迭代器；forEach()：按照插入顺序依次调用每个值。
// javascriptcn.com 代码示例
const set4 = new Set(['a', 'b', 'c']);
for (const key of set4.keys()) {
console.log(key); // a b c
}
for (const value of set4.values()) {
console.log(value); // a b c
}
for (const [key, value] of set4.entries()) {
console.log(key, value); // a a b b c c
}
set4.forEach((value) => {
console.log(value); // a b c
});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 中的键值对个数。
// javascriptcn.com 代码示例
const map3 = new Map();
map3.set('name', '张三');
map3.set('age', 18);
console.log(map3.get('name')); // 张三
map3.delete('age');
console.log(map3); // Map { 'name' => '张三' }
console.log(map3.has('age')); // false
console.log(map3.size); // 1
map3.clear();
console.log(map3); // Map {}Map 的遍历
Map 提供了四种遍历方法：
keys()：返回一个包含 Map 中所有键的迭代器；values()：返回一个包含 Map 中所有值的迭代器；entries()：返回一个包含 Map 中所有键值对的迭代器；forEach()：按照插入顺序依次调用每个键值对。
// javascriptcn.com 代码示例
const map4 = new Map([
['name', '张三'],
['age', 18],
[{}, 'object'],
]);
for (const key of map4.keys()) {
console.log(key); // name age {}
}
for (const value of map4.values()) {
console.log(value); // 张三 18 object
}
for (const [key, value] of map4.entries()) {
console.log(key, value); // name 张三 age 18 {} object
}
map4.forEach((value, key) => {
console.log(key, value); // name 张三 age 18 {} object
});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