在 JavaScript 的开发中，数据结构是非常重要的一部分。ES6 引入了两个新的数据结构，分别是 Map 和 Set，它们在某些场景下能够更加高效地处理数据。本文将详细介绍 Map 和 Set 的用法和应用场景，帮助读者更好地理解和运用这两个数据结构。
Map 数据结构
Map 是一种键值对的集合，其中每个键唯一对应一个值。Map 中的键和值可以是任意类型的，包括基本类型和对象类型。下面是 Map 的基本用法：
let map = new Map();
map.set('key1', 'value1');
map.set('key2', 'value2');
console.log(map.get('key1')); // value1
console.log(map.get('key2')); // value2
console.log(map.size); // 2上面的代码创建了一个 Map 对象，并向其中添加了两个键值对。通过 get 方法可以获取指定键对应的值，通过 size 属性可以获取 Map 中键值对的数量。需要注意的是，Map 中的键是唯一的，如果添加了相同的键，则后添加的值会覆盖之前的值。
除了 set 和 get 方法，Map 还提供了一些其他的方法，如 has 方法用于判断指定的键是否存在，delete 方法用于删除指定的键值对，clear 方法用于清空 Map 中所有的键值对。下面是一个使用 Map 的完整示例：
-- -------------------- ---- ------- --- --- - --- ------ --------------- ---------- --------------- ---------- ----------------------------- -- ---- ----------------------------- -- ------ ------------------- ----------------------------- -- ----- ------------ ---------------------- -- -
Map 还支持使用迭代器遍历其中的键值对。可以使用 keys 方法获取 Map 中所有的键，使用 values 方法获取所有的值，使用 entries 方法获取所有的键值对。下面是一个使用 entries 方法遍历 Map 的示例：
let map = new Map();
map.set('key1', 'value1');
map.set('key2', 'value2');
for (let [key, value] of map.entries()) {
console.log(`${key}: ${value}`);
}
// key1: value1
// key2: value2Set 数据结构
Set 是一种无序且唯一的元素集合，其中不存在重复的元素。Set 中的元素可以是任意类型的，包括基本类型和对象类型。下面是 Set 的基本用法：
let set = new Set();
set.add('value1');
set.add('value2');
console.log(set.has('value1')); // true
console.log(set.has('value3')); // false
console.log(set.size); // 2上面的代码创建了一个 Set 对象，并向其中添加了两个元素。通过 has 方法可以判断指定的元素是否存在，通过 size 属性可以获取 Set 中元素的数量。需要注意的是，Set 中的元素是唯一的，如果添加了相同的元素，则后添加的元素会被忽略。
除了 add 和 has 方法，Set 还提供了一些其他的方法，如 delete 方法用于删除指定的元素，clear 方法用于清空 Set 中所有的元素。下面是一个使用 Set 的完整示例：
-- -------------------- ---- ------- --- --- - --- ------ ------------------ ------------------ ------------------------------- -- ---- ------------------------------- -- ----- --------------------- ------------------------------- -- ----- ------------ ---------------------- -- -
Set 也支持使用迭代器遍历其中的元素。可以使用 values 方法获取 Set 中所有的元素，使用 forEach 方法遍历所有的元素。下面是一个使用 forEach 方法遍历 Set 的示例：
let set = new Set();
set.add('value1');
set.add('value2');
set.forEach((value) => {
console.log(value);
});
// value1
// value2应用场景实践
Map 和 Set 在实际开发中有许多应用场景，下面分别介绍一些常见的应用场景。
Map 的应用场景
存储对象信息
Map 可以用于存储对象信息，并且可以根据对象的属性查找对应的值。下面是一个使用 Map 存储对象信息的示例：
let user1 = { name: '张三', age: 18 };
let user2 = { name: '李四', age: 20 };
let map = new Map();
map.set(user1, 'user1');
map.set(user2, 'user2');
console.log(map.get(user1)); // user1
console.log(map.get(user2)); // user2在上面的示例中，我们将两个对象作为键存储在 Map 中，并且可以根据对象查找对应的值。
缓存数据
Map 可以用于缓存数据，提高数据访问的效率。下面是一个使用 Map 缓存数据的示例：
-- -------------------- ---- -------
--- ----- - --- ------
-------- -------------- -
-- ---------------- -
------ ---------------
-
--- ------ - -- ---- ---
-------------- --------
------ -------
-在上面的示例中，我们通过判断 Map 中是否存在指定的键来判断是否需要重新计算结果，从而实现了数据的缓存。
Set 的应用场景
数组去重
Set 可以用于数组去重，将重复的元素去除。下面是一个使用 Set 进行数组去重的示例：
let arr = [1, 2, 3, 1, 2, 4]; let set = new Set(arr); console.log([...set]); // [1, 2, 3, 4]
在上面的示例中，我们将数组作为参数传递给 Set 构造函数，从而得到一个去重后的数组。
判断元素是否存在
Set 可以用于判断元素是否存在，可以提高数据访问的效率。下面是一个使用 Set 判断元素是否存在的示例：
let set = new Set([1, 2, 3, 4]); console.log(set.has(2)); // true console.log(set.has(5)); // false
在上面的示例中，我们通过 has 方法判断指定的元素是否存在于 Set 中。
总结
本文详细介绍了 ES6 中的 Map 和 Set 数据结构，包括它们的基本用法和常见的应用场景。通过学习本文，读者可以更好地理解和运用这两个数据结构，提高代码的效率和可读性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65f1c6b72b3ccec22fa52b21