JavaScript 作为一门面向对象的语言，自然也不缺乏常用的数据结构。其中，Map 和 Set 是在 ES6 中被引入的，代替了 JavaScript 原有的 Object 和 Array 等数据结构，并在 ES12 中得到了进一步的升级和优化。本文将为大家详解 Map 和 Set 数据结构的使用方法、特性和实现原理。
Map 和 Set 数据结构概述
Map 数据结构
Map 是一种键值对的数据结构，它与 Object 不同的是，它的键和值可以是任意数据类型，而 Object 中的键只能是字符串类型。下面是一个简单的 Map 的构造方法：
const map = new Map([['name', '张三'], ['age', 18]]);
console.log(map); // Map(2) { 'name' => '张三', 'age' => 18 }上面的代码中，我们使用的是一个键值对数组作为 Map 构造方法的参数。注意，这里的 key 和 value 都可以是任意类型，而不只是字符串类型。我们还可以使用 Map 的 set 方法添加键值对，使用 get 方法获取相应键的值，使用 has 方法判断一个键是否存在于 Map 中，使用 delete 方法删除一个键值对，使用 clear 方法清空 Map 中的所有键值对。具体用法见下面的示例代码：
-- -------------------- ---- ------- ----- --- - --- ------ --------------- ------ -------------- ---- ----------------------------- -- -- ----------------------------- -- ---- ------------------- ----------------------------- -- ----- ------------ ----------------- -- ------ --
Set 数据结构
Set 是一种无重复值的集合数据结构，类似于数组，但其中的值都是唯一的。下面是一个简单的 Set 的构造方法：
const set = new Set([1, 2, 3]);
console.log(set); // Set(3) { 1, 2, 3 }我们可以使用 Set 的 add 方法添加一个新值，使用 has 方法判断一个值是否存在于 Set 中，使用 delete 方法删除一个值，使用 clear 方法清空 Set 中的所有值。具体用法见下面的示例代码：
const set = new Set();
set.add(1);
set.add(2);
console.log(set.has(1)); // true
set.delete(1);
console.log(set.has(1)); // false
set.clear();
console.log(set); // Set(0) {}Map 和 Set 数据结构的特性
Map 数据结构的特性
除了可以存储任意类型的键和值之外，Map 还有很多其他的特性：
Map 中的键是唯一的。如果我们试图添加一个键已经存在的值，那么它的值将被覆盖。
Map 中的键是有序的。不同于 Object，Map 中的键是有序排列的，因此可以用 for...of 循环遍历 Map 中的键值对，而无需担心顺序问题。
-- -------------------- ---- ------- ----- --- - --- ----- -------- ------ ------- ---- ---------- ----- --- --- ------ ----- ------ -- ---- - -------------------- ----------- - -- ----- -- -- ---- -- -- ------- -
- Map 中的键可以是任意数据类型。除了一般的数据类型外，Map 还可以使用 null、undefined 和 NaN 作为键。需要注意的是，由于 NaN 不等于 NaN，因此我们在使用 NaN 作为键时需要格外小心。
const map = new Map();
map.set(null, 'null');
map.set(undefined, 'undefined');
map.set(NaN, 'NaN');
console.log(map); // Map(3) { null => 'null', undefined => 'undefined', NaN => 'NaN' }- Map 的 size 属性可以获取其大小。与 Object 和 Array 不同，Map 不支持 length 属性，而是提供了 size 属性来获取其大小。
const map = new Map([ ['name', '张三'], ['age', 18], ]); console.log(map.size); // 2
Set 数据结构的特性
除了存储唯一值的特性之外，Set 还有其它一些特性：
Set 中的值是唯一的。如果我们试图添加一个已经存在于 Set 中的值，那么添加操作将被忽略。
Set 中的值是无序的。与 Map 不同，Set 中的值是无序排列的，因此不能用 for...in 或者 for...of 获取其值。
const set = new Set([1, 2, 3]);
console.log(set); // Set(3) { 1, 2, 3 }
for (const value of set) {
console.log(value);
}
// 1
// 2
// 3- Set 的 size 属性可以获取其大小。与 Map 类似，Set 不支持 length 属性，而是提供了 size 属性来获取其大小。
const set = new Set([1, 2, 3]); console.log(set.size); // 3
Map 和 Set 数据结构的优势
相较于 Object 和 Array，Map 和 Set 具有很多优势。这里列举一些主要的优势：
Map 和 Set 能够避免出现键冲突的问题。在 Object 和 Array 中，我们需要通过一些特殊的方法来避免键冲突（比如用特殊字符作为键名），而在 Map 和 Set 中，这个问题得到了很好地解决。
Map 和 Set 可以存储任意类型的值。在 Object 中，键只能是字符串类型，而在 Array 中，键只能是数字类型。而在 Map 和 Set 中，键和值都可以是任意类型的，这为我们存储和处理复杂数据类型提供了更多的可能性。
Map 和 Set 有很好的遍历性能。在 Object 中，我们需要通过 for...in 循环来遍历对象属性，而在 Array 中，我们需要使用 for 循环或者 forEach 方法来遍历数组。这些方法都有一些缺陷，例如无法获取对象中的 symbol 属性、无法从 break 或者 continue 中间跳出循环等。而在 Map 和 Set 中，我们可以使用 for...of 循环来遍历 Map 和 Set，它具有很好的可读性和可维护性。
总结
到这里为止，我们已经详细讲解了 Map 和 Set 数据结构的特性、用法和优势。Map 和 Set 在前端开发中具有广泛的应用场景，例如存储表单数据、存储一些状态等。同时，Map 和 Set 的使用也需要谨慎，比如在选择使用 NaN 作为键时需要注意其特殊性质。虽然 Map 和 Set 中的某些特性仍然需要依赖于 Object 和 Array，但这两个数据结构对于我们理解 JavaScript 数据结构的本质有着重要的作用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645b3fc5968c7c53b0d99af2