ES6 中的 Map 和 Set 数据结构详解及使用示例-JavaScript中文网-JavaScript教程资源分享门户

在 ES6 中，Map 和 Set 是两个新的数据结构，它们分别用于存储键值对和唯一值。本文将详细介绍 Map 和 Set 的使用方法，以及它们在前端中的应用场景。

Map 数据结构

Map 是一种键值对集合，其中键和值可以是任意类型的数据。与对象不同的是，Map 中的键和值是一一对应的，而且 Map 中的键可以是任意类型的数据，包括基本数据类型和对象。

创建和初始化 Map

我们可以使用 new Map() 来创建一个空的 Map：

const map = new Map();

我们也可以使用数组来初始化一个 Map，数组中的每个元素都是一个键值对数组，第一个元素是键，第二个元素是值：

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

Map 常用方法

Map 中常用的方法有：

set(key, value)：向 Map 中添加一个新的键值对。
get(key)：获取指定键的值，如果键不存在则返回 undefined。
has(key)：判断 Map 中是否存在指定键。
delete(key)：删除指定键的键值对。
clear()：清空 Map 中的所有键值对。
size：获取 Map 中键值对的数量。

下面是一些 Map 的示例代码：

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

console.log(map.get('key1')); // 输出：value1
console.log(map.has('key2')); // 输出：true

map.delete('key3');
console.log(map.size); // 输出：2

map.clear();
console.log(map.size); // 输出：0

Map 应用场景

Map 在前端中的应用场景很多，比如：

存储数据，可以使用对象或数组，也可以使用 Map。
缓存数据，可以使用 localStorage 或 sessionStorage，也可以使用 Map。
事件监听，可以使用 addEventListener，也可以使用 Map。

Set 数据结构

Set 是一种类似数组的数据结构，其中每个元素都是唯一的，即不能重复。Set 中可以存储任意类型的数据，包括基本数据类型和对象。

创建和初始化 Set

我们可以使用 new Set() 来创建一个空的 Set：

const set = new Set();

我们也可以使用数组来初始化一个 Set：

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

Set 常用方法

Set 中常用的方法有：

add(value)：向 Set 中添加一个新的元素。
delete(value)：删除指定元素。
has(value)：判断 Set 中是否存在指定元素。
clear()：清空 Set 中的所有元素。
size：获取 Set 中元素的数量。

下面是一些 Set 的示例代码：

// javascriptcn.com 代码示例
const set = new Set();
set.add(1);
set.add(2);
set.add(3);

console.log(set.has(2)); // 输出：true

set.delete(3);
console.log(set.size); // 输出：2

set.clear();
console.log(set.size); // 输出：0

Set 应用场景

Set 在前端中的应用场景也很多，比如：

去重，可以使用数组的 filter 和 indexOf，也可以使用 Set。
交集、并集和差集操作，可以使用数组的 filter 和 includes，也可以使用 Set。
记录用户行为，可以使用数组，也可以使用 Set。

总结

Map 和 Set 是 ES6 中新增的两种数据结构，它们都有自己的优势和适用场景。在实际开发中，我们可以根据具体需求选择合适的数据结构，以提高代码的性能和可读性。

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