JavaScript 中的 Map 和 Set 是 ES6 引入的两个强大的数据结构，它们提供了更灵活、高效的数据存储和检索方式。在这篇文章中，我们将深入探讨 Map 和 Set 的特性、用法以及它们与传统对象和数组的对比。
1. Map 的基础
Map 是一种键值对的集合，其中键和值可以是任意数据类型。相对于传统的对象，Map 提供了更灵活的键值对关系，并且不受类型限制。
1.1 创建和初始化
// 创建一个空的 Map
const myMap = new Map();
// 使用数组初始化 Map
const initialMap = new Map([
['key1', 'value1'],
['key2', 'value2'],
['key3', 'value3']
]);
// 获取 Map 的大小
console.log(initialMap.size); // 输出 3
1.2 添加和获取元素
const myMap = new Map();
myMap.set('key1', 'value1');
myMap.set('key2', 'value2');
console.log(myMap.get('key1')); // 输出 'value1'
console.log(myMap.get('key3')); // 输出 undefined
1.3 遍历 Map
const myMap = new Map([
['key1', 'value1'],
['key2', 'value2'],
['key3', 'value3']
]);
// 遍历键
for (const key of myMap.keys()) {
console.log(key);
}
// 遍历值
for (const value of myMap.values()) {
console.log(value);
}
// 遍历键值对
for (const entry of myMap.entries()) {
console.log(entry[0], entry[1]);
}
2. Set 的基础
Set 是一种无重复值的集合，它不允许相同的值出现多次。Set 提供了简单而高效的方法来存储和检索唯一的值。
2.1 创建和初始化
// 创建一个空的 Set
const mySet = new Set();
// 使用数组初始化 Set
const initialSet = new Set([1, 2, 3, 4, 5]);
// 获取 Set 的大小
console.log(initialSet.size); // 输出 5
2.2 添加和获取元素
const mySet = new Set();
mySet.add(1);
mySet.add(2);
console.log(mySet.has(1)); // 输出 true
console.log(mySet.has(3)); // 输出 false
2.3 遍历 Set
const mySet = new Set([1, 2, 3, 4, 5]);
// 遍历值
for (const value of mySet) {
console.log(value);
}
3. Map vs. Object
3.1 键的类型
在 Map 中，键可以是任意数据类型，包括对象、函数等。而在对象中，键只能是字符串或者 Symbols。
const myMap = new Map();
const obj = {};
myMap.set(obj, 'value'); // 正常运行
const myObj = {};
myObj[obj] = 'value'; // 键会被转换成字符串 "[object Object]"
3.2 键值对的顺序
在 Map 中，键值对的顺序是插入顺序。而在对象中，键值对的顺序不一定是插入顺序。
const myMap = new Map();
const myObj = {};
myMap.set('a', 1);
myMap.set('b', 2);
myMap.set('c', 3);
for (const entry of myMap.entries()) {
console.log(entry[0], entry[1]);
}
// 输出:
// a 1
// b 2
// c 3
const obj = { a: 1, b: 2, c: 3 };
for (const key in obj) {
console.log(key, obj[key]);
}
// 输出顺序不确定
4. Set vs. Array
4.1 唯一性
Set 中的值是唯一的，不允许重复。而数组中的元素可以重复出现。
const mySet = new Set();
const myArray = [1, 2, 2, 3, 4, 4, 5];
mySet.add(1).add(2).add(3).add(4).add(5);
console.log([...mySet]); // 输出 [1, 2, 3, 4, 5]
console.log([...new Set(myArray)]); // 输出 [1, 2, 3, 4, 5]
4.2 数组方法 vs. Set 方法
Set 提供了一些数组不具备的方法，比如 add、delete、has 等。
const mySet = new Set([1, 2, 3, 4, 5]);
const myArray = [1, 2, 3, 4, 5];
mySet.add(6);
console.log([...mySet]); // 输出 [1, 2, 3, 4, 5, 6]
mySet.delete(3);
console.log([...mySet]); // 输出 [1, 2, 4, 5, 6]
console.log(myArray.indexOf(3) !== -1); // 输出 true
5. 总结
Map 和 Set 提供了 JavaScript 中更加灵活、高效的数据存储和检索方式。它们分别适用于不同的场景，Map 适用于需要键值对映射的情况，而 Set 适用于需要存储唯一值的情况。深入理解这两种数据结构，有助于开发者更好地选择和应用它们，提高代码的效率和可维护性。希望本文能够帮助读者更好地掌握 Map 和 Set 的基本概念和用法。
