在 ECMAScript 2021 中，新增了 Map 和 Set 对象。这两个对象类型是 JavaScript 中非常实用的数据结构，可以帮助我们更好地组织和处理数据。接下来，我们将详细说明这两个对象的用法、区别以及如何使用它们来提高我们的前端开发技能。
Map 对象
Map 对象可以关联键和值，其中键可以是任何类型，包括基本数据类型、对象和函数等。下面是一个使用 Map 对象的简单示例：
const myMap = new Map();
const key1 = 'foo';
const key2 = { name: 'John' };
const key3 = function() {};
myMap.set(key1, 'some value for foo');
myMap.set(key2, 'some value for key2');
myMap.set(key3, 'some value for key3');
console.log(myMap.get(key1)); // 'some value for foo'在上面的示例代码中，我们创建了一个新的 Map 对象，并使用 set() 方法将不同类型的键映射到相应的值。我们还使用 get() 方法检索与给定键关联的值。
Map 对象有几个与其相关的有用方法，包括 has()、delete() 和 clear() 等。我们还可以使用 entries()、keys() 和 values() 方法来遍历 Map 对象的键、值或键值对。
-- -------------------- ---- ------- ------------------------ -- - ----------------------------- -- ---- ------------------- ------------------------ -- - -------------- ------------------------ -- - ----- ---------- - --- ----- -------- ---------- -------- --------- --- ------------------------------------ -- -------- -------
在上面的代码示例中，我们使用 Map 对象的 size 属性获取项目数量，并使用 has() 和 delete() 方法验证和删除特定项目。我们还使用 clear() 方法来清除整个 Map 对象。最后，我们使用 entries() 方法来遍历键值对。
Set 对象
Set 对象类似于数组，但是它只能包含唯一的值，并且这些值可以是任何类型。下面是一个使用 Set 对象的简单示例：
const mySet = new Set();
mySet.add('foo');
mySet.add('bar');
mySet.add('foo');
console.log(mySet.size); // 2
console.log(mySet.has('foo')); // true
mySet.delete('bar');
console.log(mySet.size); // 1在上述示例代码中，我们首先创建了一个新的 Set 对象，并向其添加几个值。由于 Set 对象只能包含唯一值，因此尝试添加相同值时，第二次添加将被忽略。我们还使用 has()、delete() 方法验证和删除特定值。
Set 对象还有其他很多实用的方法，包括 clear()、values() 和 entries() 等。我们可以使用 forEach() 方法迭代 Set 对象中的每个项目。
const anotherSet = new Set(['foo', 'bar']); console.log([...anotherSet]); // ['foo', 'bar'] anotherSet.forEach(value => console.log(value)); // 'foo' // 'bar'
在上面的代码示例中，我们使用 new Set() 创建了一个新的 Set 对象，并使用一个数组来初始化其值。我们还使用了 values() 方法和 forEach() 方法来遍历 Set 对象中的值。
Map 和 Set 的区别
Map 和 Set 对象具有相似的功能，但是它们之间也存在一些区别。
Map 对象是键值对的集合，可以根据键快速检索值。Set 对象是唯一值的集合，可以快速检查是否存在特定值。
Map 对象可以包含任何数据类型的键，包括基本类型、对象和函数等。Set 对象只存储唯一值，任何值都只能出现一次。
Map 对象具有与其相关联的键、值顺序。Set 对象中的值随意排序。
Map 对象具有
size属性，表示其中项目的数量。Set 对象也有size属性，表示其中值的数量。
如何选择 Map 或 Set
在使用 Map 或 Set 时，我们需要考虑到要存储的内容类型和操作类型来决定使用哪一个。
如果我们需要存储键值对，并且需要以键作为快速检索值的方式，则应使用 Map 对象。Map 对象还提供了适合遍历键、值或键值对的方法。
如果我们只需要存储唯一值，并且需要快速检查特定值是否存在，则应使用 Set 对象。Set 对象还提供了适合遍历值的方法。
结论
Map 和 Set 对象是 ECMAScript 2021 中的两个重要添加，它们提供了一种更高效地组织和处理数据的方式。我们应该选择最适合我们应用程序需求的对象，在需要存储键值对时使用 Map 对象，在需要存储唯一值时使用 Set 对象。
我们可以使用 Map 和 Set 中的方法来操作和检索它们，可以使用 JavaScript 中其他的方法来迭代所需值和键值对。 Map 和 Set 对象的使用可以提高我们的开发效率，有助于编写更好、更高效和更可靠的 JavaScript 代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674d9ee9947dc5bcb3ff6220