在 ES6 中，JavaScript 引入了两个新的数据结构，Map 和 Set，这两个数据结构在 ES7 中得到了进一步的扩展和优化。本文将详细介绍 Map 和 Set 的使用和特点，并结合示例代码进行深入讲解。
Map 数据结构
Map 是一种键值对集合，其中的值可以是任何 JavaScript 数据类型，包括对象。Map 的键可以是任何数据类型，包括基本数据类型和对象。相比于普通对象，Map 提供了更好的访问和迭代方式。
创建 Map 对象
可以通过新建 Map 构造函数，创建一个空的 Map 对象。也可以在 Map 构造函数中传入一个数组，数组中每个元素都是一个键值对的数组。
// 创建一个空的 Map 对象 const myMap = new Map(); // 创建一个包含键值对的 Map 对象 const myMap = new Map([['key1', 'value1'], ['key2', 'value2']]);
Map 的基本操作
Map 的基本操作包括添加、删除、查询和清空。
添加元素，使用
set(key, value)方法，其中 key 为键，value 为值。myMap.set('key3', 'value3');
删除元素，使用
delete(key)方法，其中 key 为键。myMap.delete('key2');
查询元素，使用
get(key)方法，其中 key 为键。如果键不存在，则返回 undefined。const value1 = myMap.get('key1');
清空集合，使用
clear()方法。myMap.clear();
Map 的遍历方式
Map 提供了多种遍历方式，包括迭代器、forEach 回调函数和 for-of 循环。以下示例代码展示了三种遍历方式的使用。
-- -------------------- ---- ------- -- -- --- -- --- ------ --- -- ------------- - ----------------- - -- -- --- -- --- ------ ----- -- --------------- - ------------------- - -- -- --- ---- --- ------ ----- ------ -- ------ - ---------------- ------- - -- -- ------- ------ --- --------------------- ---- -- - ---------------- ------- --- -- ------- --- ----- -------- - ---------------- --- ------ - ---------------- ----- -------------- - ---------------------------- ----------------- ------ - ---------------- -展开代码
Set 数据结构
Set 是一个没有重复元素的集合，其中的元素可以是任何 JavaScript 数据类型。Set 可以用于快速地判断某个元素是否存在于集合中。
创建 Set 对象
可以通过新建 Set 构造函数，创建一个空的 Set 对象。也可以在 Set 构造函数中传入一个数组，数组中每个元素都会成为 Set 中的一个元素。
// 创建一个空的 Set 对象 const mySet = new Set(); // 创建一个包含元素的 Set 对象 const mySet = new Set([1, 2, 3, 4, 5]);
Set 的基本操作
Set 的基本操作包括添加、删除、查询和清空。
添加元素，使用
add(value)方法，其中 value 为元素的值。mySet.add(6);
删除元素，使用
delete(value)方法，其中 value 为元素的值。mySet.delete(5);
查询元素，使用
has(value)方法，其中 value 为元素的值。如果元素存在于集合中，则返回 true，否则返回 false。const hasOne = mySet.has(1);
清空集合，使用
clear()方法。mySet.clear();
Set 的遍历方式
Set 提供了多种遍历方式，包括迭代器、forEach 回调函数和 for-of 循环。以下示例代码展示了三种遍历方式的使用。
-- -------------------- ---- ------- -- -- --- --- --- ------ ----- -- ------ - ------------------- - -- -- ------- ------ --- --------------------- -- - ------------------- --- -- ------- --- ----- -------- - --------------- --- ------ - ---------------- ----- -------------- - -------------------------- ------ - ---------------- -展开代码
结语
本文详细介绍了 ES7 中 Map 和 Set 数据结构的使用和特点，并提供了示例代码进行深入讲解。Map 和 Set 可以帮助我们更优雅地操作数据，提高代码的可读性和可维护性。希望本文对大家学习和使用 Map 和 Set 有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6786d5544083a4caeefea5da
