前言
随着 Web 技术的发展，前端越来越重要，对于一名前端工程师而言，对 JavaScript 的理解和掌握是基础中的基础。而 ECMAScript 2020 版本在 Map 和 Set 对象方面做出了很多的改进和更新，本文将介绍 ECMAScript 2020 中 Map 和 Set 对象的操作技巧。
Map 对象
Map 对象介绍
Map 对象是一组键值对的有序列表，其中每个独立的键值对被称为一个 entry，同时 Map 提供了一些内置的方法以及键值对的迭代器，可以通过调用这些方法来访问和操作键值对。Map 中的键可以是任何对象类型，不仅仅只是字符串类型。
Map 对象的初始化
通过数组初始化 Map 对象
可以通过传入一个数组作为参数，初始化一个 Map 对象。例如：
const map = new Map([ ['key1', 'value1'], ['key2', 'value2'] ]);
通过对象初始化 Map 对象
可以通过传入一个对象作为参数，初始化一个 Map 对象：
const map = new Map({
key1: 'value1',
key2: 'value2'
});Map 对象的操作
设置键值对
可以通过调用 set() 方法，向 Map 中添加一个键值对。例如：
const map = new Map();
map.set('key1', 'value1');
map.set('key2', 'value2');获取键值对
可以通过调用 get() 方法，获取 Map 中指定键所对应的值。例如：
const map = new Map([
['key1', 'value1'],
['key2', 'value2']
]);
console.log(map.get('key1')); // 'value1'检查键是否存在
可以通过调用 has() 方法，检查 Map 中是否已经存在指定的键。例如：
const map = new Map([
['key1', 'value1'],
['key2', 'value2']
]);
console.log(map.has('key1')); // true
console.log(map.has('key3')); // false删除键值对
可以通过调用 delete() 方法，删除 Map 中指定键所对应的键值对。例如：
const map = new Map([
['key1', 'value1'],
['key2', 'value2']
]);
map.delete('key1');
console.log(map.has('key1')); // false获取 Map 中的所有键
可以通过调用 keys() 方法，获取 Map 中所有的键。例如：
const map = new Map([
['key1', 'value1'],
['key2', 'value2']
]);
console.log(map.keys()); // MapIterator { 'key1', 'key2' }获取 Map 中的所有值
可以通过调用 values() 方法，获取 Map 中所有的值。例如：
const map = new Map([
['key1', 'value1'],
['key2', 'value2']
]);
console.log(map.values()); // MapIterator { 'value1', 'value2' }获取 Map 中的所有键值对
可以通过调用 entries() 方法，获取 Map 中所有的键值对。例如：
const map = new Map([
['key1', 'value1'],
['key2', 'value2']
]);
console.log(map.entries());
// MapIterator { [ 'key1', 'value1' ], [ 'key2', 'value2' ] }Set 对象
Set 对象介绍
Set 对象是一组不重复的值的集合，其中每个值只出现一次。Set 提供了一些内置方法以及值的迭代器，可以通过调用这些方法来访问和操作 Set 中的值。
Set 对象的初始化
通过数组初始化 Set 对象
可以通过传入一个数组作为参数，初始化一个 Set 对象。例如：
const set = new Set(['a', 'b', 'c']);
Set 对象的操作
添加单个值
可以通过调用 add() 方法，向 Set 中添加一个值。例如：
const set = new Set();
set.add('a');
set.add('b');
set.add('c');删除指定值
可以通过调用 delete() 方法，删除 Set 中指定的值。例如：
const set = new Set(['a', 'b', 'c']);
set.delete('a');
console.log(set.has('a')); // false检查值是否存在
可以通过调用 has() 方法，检查 Set 中是否已经存在指定的值。例如：
const set = new Set(['a', 'b', 'c']);
console.log(set.has('a')); // true
console.log(set.has('d')); // false获取 Set 中的所有值
可以通过调用 values() 方法，获取 Set 中所有的值。例如：
const set = new Set(['a', 'b', 'c']);
console.log(set.values()); // SetIterator { 'a', 'b', 'c' }总结
本文介绍了 ECMAScript 2020 中 Map 和 Set 对象的操作技巧，这些技巧可以提高前端工程师的开发效率，同时也适用于 ECMAScript 2021 的版本。通过掌握这些技巧，可以更好地运用 Map 和 Set 对象，实现更加高效和简洁的代码编写。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6463034f968c7c53b040b864