随着 JavaScript 逐渐成为一门全栈式语言，其在前端开发领域的应用不断扩展，JavaScript 也在不断进行技术更新。ECMAScript 2019 (简称 ES2019) 中引入了一些常用数据结构，如 Map 和 Set。在本文中，我们将对这些新数据结构进行详细解析，并提供相关代码示例。
Map
Map 是一种以键值对为基础、可迭代的数据结构。它可以使用任意数据类型作为键和值。Map 和普通对象 (Object) 的一个主要区别在于 Map 是一个有序集合，而 Object 不是。此外，Map 还包含了许多有用的实用方法，比如 size() 方法，用于返回 Map 中键值对的数量。
语法
可以使用以下语法创建一个 Map 对象：
let map = new Map();
也可以在创建数组的同时为 Map 添加初始键值对：
let map = new Map([ ['key1', 'value1'], ['key2', 'value2'], ['key3', 'value3'] ]);
常用方法
set() 方法
使用 set() 方法可以向 Map 中添加新的键值对：
map.set('key4', 'value4');get() 方法
使用 get() 方法可以获取 Map 中指定键名的值：
map.get('key1'); // 'value1'has() 方法
使用 has() 方法可以判断 Map 中是否存在指定键名：
map.has('key3'); // truedelete() 方法
使用 delete() 方法可以删除 Map 中指定键名的键值对：
map.delete('key2');clear() 方法
使用 clear() 方法可以清空 Map 中所有的键值对：
map.clear();
forEach() 方法
使用 forEach() 方法可以迭代 Map 中的所有键值对：
map.forEach(function(value, key) {
console.log(`${key}: ${value}`);
});示例代码
-- -------------------- ---- ------- --- --- - --- ----- -------- -------- ------- ---- -------- ----------- --- ---------------------- -- - ------------------ -------- ----------------------------- -- -------- ----------------------------- -- ----- ------------------ ---------------------- -- - ------------ ---------------------- -- - --------------- -------- -------------- ---- --------------- ----------- --------------------------- ---- - -------------------- ----------- ---
Set
Set 是一种类似数组的数据结构，它的每个成员都是唯一的，没有重复的值。Set 可以使用任意数据类型作为元素。Set 与数组有许多相似之处，但它又在一些特性上与数组不同，比如 Set 中的成员是无序的，这意味着访问 Set 中的元素时不能使用下标。Set 中也有一些有用的实用方法，比如 size() 方法，用于返回 Set 中唯一元素数量。
语法
可以使用以下语法创建一个 Set 对象：
let set = new Set();
也可以在创建数组的同时为 Set 添加初始元素：
let set = new Set(['foo', 'bar', 'baz']);
常用方法
add() 方法
使用 add() 方法可以向 Set 中添加新的元素：
set.add('qux');delete() 方法
使用 delete() 方法可以删除 Set 中指定的元素：
set.delete('bar');has() 方法
使用 has() 方法可以判断 Set 中是否存在指定的元素：
set.has('foo'); // trueclear() 方法
使用 clear() 方法可以清空 Set 中所有的元素：
set.clear();
forEach() 方法
使用 forEach() 方法可以迭代 Set 中的所有元素：
set.forEach(function(item) {
console.log(item);
});示例代码
-- -------------------- ---- ------- --- --- - --- ------------- --------- ---------- ---------------------- -- - ------------------ ------------------------------- -- ---- -------------------- ---------------------- -- - ------------ ---------------------- -- - ----------------- ---------------- ------------------ -------------------------- - ------------------ ---
总结
在本文中，我们详细解析了 ES2019 中引入的 Map 和 Set 数据结构，并提供了相关的示例代码。Map 和 Set 这些数据结构为 JavaScript 开发者提供了更加高效和灵活的开发方式。同时，掌握这些数据结构也是 JavaScript 开发的基础之一。我们鼓励读者在实际项目中多加使用，通过练习来熟练掌握它们的使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/651f533c95b1f8cacd6e7c06