ECMAScript 2021 (ES12) 中新增的 Map and Set 轻松入门

ECMAScript 2021，也就是 ES12，是 JavaScript 语言的最新版本。与以前的版本相比，ES12 增加了许多新功能和改进，其中一个是新增了 Map 和 Set 数据结构，本文将对此进行详细解析。

Map

Map 是一种键值对的集合，其中每个键和每个值可以是任意类型。Map 提供了一些很有用的方法，例如 set，get，has 和 delete。这些方法使得操作 Map 很方便，同时还可以使用 for...of 循环来迭代 Map。

创建 Map

可以通过构造函数或字面量语法创建 Map。

// 使用构造函数创建 Map
const map1 = new Map();

// 使用字面量语法创建 Map
const map2 = new Map([
  ['key1', 'value1'],
  ['key2', 'value2']
]);

增加、获取、删除 Map 元素

Map 提供了 set、get、delete 方法来操作元素：

// javascriptcn.com 代码示例
const map = new Map([
  ['key1', 'value1'],
  ['key2', 'value2']
]);

map.set('key3', 'value3'); // 增加元素

console.log(map.get('key1')); // 获取元素

map.delete('key2'); // 删除元素

迭代 Map

可以使用 for...of 循环迭代 Map。它默认迭代键值对数组，其中第一个元素是键，第二个元素是值。

const map = new Map([
  ['key1', 'value1'],
  ['key2', 'value2']
]);

for (const [key, value] of map) {
  console.log(key, value);
}

Set

Set 是一种无重复值的集合，其中每个值可以是任意类型。Set 提供了一些很有用的方法，例如 add，has 和 delete。这些方法使得操作 Set 很方便，同时还可以使用 for...of 循环来迭代 Set。

创建 Set

可以通过构造函数或字面量语法创建 Set。

// 使用构造函数创建 Set
const set1 = new Set();

// 使用字面量语法创建 Set
const set2 = new Set([1, 2, 3, 4, 5]);

增加、获取、删除 Set 元素

Set 提供了 add、has、delete 方法来操作元素。

const set = new Set([1, 2, 3, 4, 5]);

set.add(6); // 增加元素

console.log(set.has(1)); // 获取元素

set.delete(2); // 删除元素

迭代 Set

可以使用 for...of 循环迭代 Set。

const set = new Set([1, 2, 3, 4, 5]);

for (const value of set) {
  console.log(value);
}

总结

ES2021 新增的 Map 和 Set 数据结构，给开发者提供了更多的选择和便利。除了本文介绍的方法和语法，它们还有很多更高级的特性。深入学习 Map 和 Set 有助于您的开发工作，提升代码的可读性和可维护性。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6528d9b17d4982a6ebb66cd2