ECMAScript 2017 中的 Map 和 Set：何时使用它们？
在现代的前端开发中，存储数据是一个非常重要的问题。在 JavaScript 中，我们提供了多种数据结构来存储数据，如数组、对象等。然而，随着开发需求的增加，我们需要一些更强大的数据结构来解决一些常见的问题。在 ECMAScript 2017 中，Map 和 Set 就成为了我们解决这些问题的工具之一。
Map 和 Set 的简介
Map 和 Set 都是 ES2015 引入的新数据结构。两者的特点和用法类似，但是在实现和目的上有很大的不同。下面我们来一一介绍。
Map
Map 是一种类似于对象的键值对数据结构，但是键值对不仅限于字符串，可以是任何类型的值，包括对象、函数等。调用 Map 构造函数可以创建一个 Map 对象，如下所示：
const myMap = new Map();
Map 的常见用法包括：
- 存储数据
使用 set() 方法向 Map 中添加键值对，语法如下：
myMap.set(key, value);
其中 key 为任意类型的键，value 为对应的值，可以是任意类型的数据。如果 key 已经存在，就会用新值覆盖旧值，如下所示：
myMap.set('name', 'Tom');
myMap.set('age', 18);
myMap.set('name', 'Jerry');
console.log(myMap); // Map { 'name' => 'Jerry', 'age' => 18 }- 获取数据
使用 get() 方法从 Map 中获取对应的值，语法如下：
myMap.get(key);
如果 key 不存在，则返回 undefined。如下所示：
console.log(myMap.get('name')); // 'Jerry'
console.log(myMap.get('gender')); // undefined- 判断键是否存在
使用 has() 方法判断 Map 中是否存在某个键，语法如下：
myMap.has(key);
如果存在，返回 true，否则返回 false。如下所示：
console.log(myMap.has('name')); // true
console.log(myMap.has('gender')); // false- 删除键值对
使用 delete() 方法删除 Map 中对应的键值对，语法如下：
myMap.delete(key);
如果键值对成功删除，返回 true，否则返回 false。如下所示：
myMap.delete('age');
console.log(myMap); // Map { 'name' => 'Jerry' }- 清空 Map
使用 clear() 方法清空 Map 中所有的键值对，语法如下：
myMap.clear();
下面是完整的 Map 示例代码：
-- -------------------- ---- ------- ----- ----- - --- ------ ----------------- ------- ---------------- ---- ------------------------------- -- ----- --------------------------------- -- ----- -------------------- ------------------- -- --- - ------ -- ----- - -------------- ------------------- -- --- --
Set
Set 是一种类似于数组的数据结构，但是其中每个元素的值都是唯一的。调用 Set 构造函数可以创建一个 Set 对象，如下所示：
const mySet = new Set();
Set 的常见用法包括：
- 存储数据
使用 add() 方法向 Set 中添加元素，语法如下：
mySet.add(value);
其中 value 为任意类型的值，如果值已经存在，就不会重复添加。如下所示：
mySet.add('a');
mySet.add('b');
mySet.add('a');
console.log(mySet); // Set { 'a', 'b' }- 获取数据
Set 没有像数组那样的索引，所以没有直接获取某个元素的方法。要获取 Set 中的所有元素，可以使用 for...of 循环，或者将 Set 转换为数组，如下所示：
const mySet = new Set(['a', 'b']);
for (const item of mySet) {
console.log(item);
}
console.log(Array.from(mySet)); // [ 'a', 'b' ]- 判断元素是否存在
使用 has() 方法判断 Set 中是否存在某个元素，语法如下：
mySet.has(value);
如果存在，返回 true，否则返回 false。如下所示：
console.log(mySet.has('a')); // true
console.log(mySet.has('c')); // false- 删除元素
使用 delete() 方法删除 Set 中对应的元素，语法如下：
mySet.delete(value);
如果元素成功删除，返回 true，否则返回 false。如下所示：
mySet.delete('b');
console.log(mySet); // Set { 'a' }- 清空 Set
使用 clear() 方法清空 Set 中所有的元素，语法如下：
mySet.clear();
下面是完整的 Set 示例代码：
-- -------------------- ---- ------- ----- ----- - --- --------- ------ ---------------------------- -- ---- ---------------------------- -- ----- --------------- ------------------- -- --- - ---- ---- --- - ------------------ ------------------- -- --- - ---- --- - -------------- ------------------- -- --- --
何时使用 Map 和 Set？
Map 和 Set 是相似的数据结构，都可以存储一组键值对。但是它们的作用和目的有很大的区别。通常来说，在以下情况下建议使用 Map：
- 需要存储非字符串类型的键和值。
- 需要频繁添加和删除键值对。
- 需要快速查找键值对。
而在以下情况下，建议使用 Set：
- 需要存储不重复的元素。
- 需要快速查找元素。
总结
Map 和 Set 是在 ES2015 中引入的新数据结构。Map 是一种键值对数据结构，用于存储非字符串类型的键和值，而 Set 是一种类似于数组的数据结构，用于存储不重复的元素。在前端开发中，我们可以根据具体情况来选择使用 Map、Set 或其他数据结构来解决常见的问题。
示例代码：
const myMap = new Map();
myMap.set('age', 18);
myMap.set({ name: 'Tom' }, 'student');
const mySet = new Set(['a', 'b', 'c', 'c']);
mySet.add('d');
console.log(mySet.has('a')); // true
console.log(mySet.has('e')); // false来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f336fff6b2d6eab3caef70