如何使用 ECMAScript 2019 的 Map 和 Set 数据结构？-JavaScript中文网-JavaScript教程资源分享门户

在 ECMAScript 2019 中，Map 和 Set 数据结构成为了 JavaScript 内置对象的一部分。它们提供了一种新的数据结构，可以方便地存储和访问一组键值对。本文将介绍 Map 和 Set 数据结构的用法，以及它们在前端开发中的应用。

Map 数据结构

Map 是一种键值对的集合，其中的键和值可以是任何类型的 JavaScript 对象。Map 中的键是唯一的，因此每个键只能与一个值相关联。Map 中的内容可以通过迭代器进行访问，也可以使用类似数组的方法进行操作。

创建 Map 对象

创建 Map 对象的方法很简单，只需要调用内置的 Map() 构造函数即可：

const myMap = new Map();

设置键值对

向 Map 中添加键值对的方法是 set()。这个方法接受两个参数，第一个是键，第二个是值：

myMap.set(key1, value1);
myMap.set(key2, value2);

获取键值对

从 Map 中获取键值对的方法是 get()。这个方法接受一个键作为参数，并返回与该键相关联的值：

myMap.get(key1); // 返回 value1
myMap.get(key2); // 返回 value2

判断键是否存在

判断键是否存在的方法是 has()。这个方法接受一个键作为参数，并返回一个布尔值，表示该键是否存在于 Map 中：

myMap.has(key1); // 返回 true
myMap.has(key3); // 返回 false

删除键值对

从 Map 中删除键值对的方法是 delete()。这个方法接受一个键作为参数，并删除与该键相关联的键值对：

myMap.delete(key1);

遍历 Map

遍历 Map 中的键值对可以使用迭代器。Map 的迭代器有几种不同的类型，分别是 keys、values 和 entries。它们分别返回 Map 中所有的键、值和键值对：

// www.javascriptcn.com code example
for (let key of myMap.keys()) {
  console.log(key);
}

for (let value of myMap.values()) {
  console.log(value);
}

for (let [key, value] of myMap.entries()) {
  console.log(key, value);
}

Set 数据结构

Set 是一种元素的集合，其中的元素可以是任何类型的 JavaScript 对象。Set 中的元素是唯一的，因此每个元素只会出现一次。Set 中的内容可以通过迭代器进行访问，也可以使用类似数组的方法进行操作。

创建 Set 对象

创建 Set 对象的方法与创建 Map 对象一样简单：

const mySet = new Set();

添加元素

向 Set 中添加元素的方法是 add()。这个方法接受一个元素作为参数，并将该元素添加到 Set 中：

mySet.add(element1);
mySet.add(element2);

删除元素

从 Set 中删除元素的方法是 delete()。这个方法接受一个元素作为参数，并删除 Set 中的该元素：

mySet.delete(element1);

判断元素是否存在

判断元素是否存在的方法是 has()。这个方法接受一个元素作为参数，并返回一个布尔值，表示该元素是否存在于 Set 中：

mySet.has(element1); // 返回 true
mySet.has(element3); // 返回 false

遍历 Set

遍历 Set 中的元素可以使用迭代器。Set 的迭代器有两种不同的类型，分别是 values 和 entries。它们分别返回 Set 中所有的元素和元素组成的数组：

for (let value of mySet.values()) {
  console.log(value);
}

for (let [key, value] of mySet.entries()) {
  console.log(key, value);
}

应用示例

Map 和 Set 数据结构可以在前端开发中使用的场景非常多。以下是一些常见的示例：

缓存数据

使用 Map 数据结构可以方便地实现缓存数据的功能。将获取到的数据存储在 Map 中，下次需要时直接从 Map 中获取即可：

// www.javascriptcn.com code example
const cache = new Map();

async function fetchData(url) {
  if (cache.has(url)) {
    return cache.get(url);
  } else {
    const result = await fetch(url);
    cache.set(url, result);
    return result;
  }
}

精简数组

使用 Set 数据结构可以方便地实现数组去重的功能。将重复的元素保存在 Set 中，再将 Set 转换为数组即可：

const arr = [1, 2, 3, 3, 4, 5, 5];
const uniqueArr = [...new Set(arr)];
console.log(uniqueArr); // [1, 2, 3, 4, 5]

存储元素状态

使用 Map 数据结构可以方便地存储元素的状态。将元素的 ID 存储在 Map 中，状态作为值：

const status = new Map();

function updateStatus(element, newStatus) {
  status.set(element.id, newStatus);
}

结语

本文介绍了 JavaScript 中的 Map 和 Set 数据结构的用法，以及它们在前端开发中的应用。这些新的数据结构为 JavaScript 带来了更加丰富和灵活的数据处理能力。希望读者能够学以致用，提高自己的编程水平。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d7e19da941bf7134e192c4

如何使用 ECMAScript 2019 的 Map 和 Set 数据结构？