在前端开发中，常常需要使用一些数据结构来存储和操作数据。以往我们可能会使用数组或对象等基本数据类型来实现，但是这些数据结构有时并不能很好地满足我们的需求。
在 ECMAScript 2021 中，新增了 Map 和 Set 对象，它们更加灵活和高效，能够帮助我们更好地处理数据。
Map 对象
Map 对象是一种由键值对组成的有序列表，其中键和值可以是任意类型的数据。在以往，我们通常使用对象来实现类似的功能，但是 Map 对象的出现为我们提供了一种更加高效和灵活的方式。
创建 Map 对象
在创建 Map 对象时，我们可以直接使用 new 操作符来创建一个空的 Map 对象。
const emptyMap = new Map();
如果需要将一些键值对添加到 Map 对象中，可以通过 set 方法进行添加。
const myMap = new Map(); myMap.set(1, 'apple'); myMap.set(2, 'banana'); myMap.set(3, 'orange');
除此之外，我们还可以在创建 Map 对象时直接指定初始值。
const myMap = new Map([ [1, 'apple'], [2, 'banana'], [3, 'orange'] ]);
访问 Map 对象
在访问 Map 对象时，我们可以通过 get 方法获取对应键的值。
const myMap = new Map([ [1, 'apple'], [2, 'banana'], [3, 'orange'] ]); console.log(myMap.get(1)); // apple
如果需要判断一个键是否存在于 Map 对象中，可以使用 has 方法。
console.log(myMap.has(1)); // true console.log(myMap.has(4)); // false
删除 Map 对象
在删除 Map 对象中的某个键值对时，可以通过 delete 方法实现。
-- -------------------- ---- ------- ----- ----- - --- ----- --- --------- --- ---------- --- --------- --- ---------------- -------------------------- -- ---------
除此之外，我们还可以使用 clear 方法来清空整个 Map 对象。
myMap.clear(); console.log(myMap.size); // 0
Map 对象的迭代
Map 对象中的元素是有序的，因此我们可以通过 for...of 循环遍历元素。
-- -------------------- ---- ------- ----- ----- - --- ----- --- --------- --- ---------- --- --------- --- --- ------ ----- ------ -- ------ - ---------------- ------- - -- - ----- -- - ------ -- - ------
除了常规的 for...of 循环之外，还可以使用 forEach 方法遍历元素。
myMap.forEach((value, key) => {
console.log(key, value);
});
// 1 apple
// 2 banana
// 3 orangeSet 对象
Set 对象是一种由唯一值组成的无序列表。它类似于数组，但是不允许重复的值。
创建 Set 对象
在创建 Set 对象时，我们可以直接使用 new 操作符来创建一个空的 Set 对象。
const emptySet = new Set();
如果需要将一些值添加到 Set 对象中，可以通过 add 方法进行添加。
const mySet = new Set();
mySet.add('apple');
mySet.add('banana');
mySet.add('orange');除此之外，我们还可以在创建 Set 对象时直接指定初始值。
const mySet = new Set(['apple', 'banana', 'orange']);
访问 Set 对象
在访问 Set 对象时，我们可以通过 has 方法判断一个值是否存在于 Set 对象中。
console.log(mySet.has('orange')); // true
console.log(mySet.has('grape')); // false删除 Set 对象
在删除 Set 对象中的某个值时，可以通过 delete 方法实现。
mySet.delete('apple');
console.log(mySet.has('apple')); // false除此之外，我们还可以使用 clear 方法来清空整个 Set 对象。
mySet.clear(); console.log(mySet.size); // 0
Set 对象的迭代
Set 对象中的元素是无序的，因此我们可以通过 for...of 循环遍历元素。
const mySet = new Set(['apple', 'banana', 'orange']);
for (const value of mySet) {
console.log(value);
}
// apple
// banana
// orange除了常规的 for...of 循环之外，还可以使用 forEach 方法遍历元素。
mySet.forEach((value) => {
console.log(value);
});
// apple
// banana
// orangeMap 和 Set 的应用场景
使用 Map 和 Set 对象可以在前端开发中提供更加高效和灵活的数据结构。它们可以应用于很多场景，例如：
- 管理全局状态
- 保存数据的独一无二的引用
- 存储和操作 DOM 元素
以管理全局状态为例，我们可以利用 Map 对象来实现一个全局状态的存储器。
-- -------------------- ---- ------- ----- ----- - --- ------ -------- ------------- ------ - -------------- ------- - -------- ------------- - ------ --------------- -
以上代码定义了两个函数，分别用于设置和获取全局状态。我们可以在任意位置调用 setState 函数来设置全局状态，然后在任意位置调用 getState 函数来获取全局状态。
总结
本文介绍了 ECMAScript 2021 中新增的数据结构 Map 和 Set 的基本使用方法，以及它们的应用场景。相比于以往常用的数组或对象等基本数据类型，使用 Map 和 Set 对象可以提供更加高效和灵活的数据操作方式。
如果您还没有尝试过使用 Map 和 Set 对象来简化前端开发，不妨尝试一下吧。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64d4d17fb5eee0b525ca529b