在前端开发中，我们经常需要处理数据集合和数据映射的问题。ES6 的 Map 和 Set 对象为我们提供了更加高效和灵活的解决方案。本文将介绍 Map 和 Set 对象的基本用法、常见应用场景和一些实用技巧，希望能为你在前端开发中提供帮助。
Map 对象
Map 对象是一种集合类型，它可以存储键值对，并且键和值可以是任意类型的数据。在 ES6 之前，我们通常使用对象来模拟 Map 的功能，但是对象的键只能是字符串类型，而且无法遍历。Map 对象可以解决这些问题，它提供了以下几个常用的方法：
创建 Map 对象
创建 Map 对象的方法很简单，可以使用 new 关键字加上 Map() 构造函数来创建一个空的 Map 对象。
const map = new Map();
也可以在创建对象的同时添加键值对。
const map = new Map([ ['key1', 'value1'], ['key2', 'value2'] ]);
添加和获取键值对
Map 对象的 set() 方法可以用来添加键值对。
const map = new Map();
map.set('key1', 'value1');
map.set('key2', 'value2');Map 对象的 get() 方法可以用来获取键对应的值。
map.get('key1'); // 'value1'
map.get('key2'); // 'value2'判断是否存在某个键
Map 对象的 has() 方法可以用来判断是否存在某个键。
map.has('key1'); // true
map.has('key3'); // false删除键值对
Map 对象的 delete() 方法可以用来删除键值对。
map.delete('key1');清空 Map 对象
Map 对象的 clear() 方法可以用来清空所有的键值对。
map.clear();
遍历 Map 对象
Map 对象提供了多种遍历方法，包括 keys()、values()、entries() 和 forEach()。
// javascriptcn.com 代码示例
const map = new Map([
['key1', 'value1'],
['key2', 'value2']
]);
// 遍历键
for (const key of map.keys()) {
console.log(key);
}
// 遍历值
for (const value of map.values()) {
console.log(value);
}
// 遍历键值对
for (const [key, value] of map.entries()) {
console.log(key, value);
}
// 使用 forEach 遍历
map.forEach((value, key) => {
console.log(key, value);
});Set 对象
Set 对象是一种集合类型，它可以存储任意类型的数据，但是不允许重复。Set 对象提供了以下几个常用的方法：
创建 Set 对象
创建 Set 对象的方法也很简单，可以使用 new 关键字加上 Set() 构造函数来创建一个空的 Set 对象。
const set = new Set();
也可以在创建对象的同时添加元素。
const set = new Set(['value1', 'value2']);
添加元素
Set 对象的 add() 方法可以用来添加元素。
const set = new Set();
set.add('value1');
set.add('value2');判断是否存在某个元素
Set 对象的 has() 方法可以用来判断是否存在某个元素。
set.has('value1'); // true
set.has('value3'); // false删除元素
Set 对象的 delete() 方法可以用来删除元素。
set.delete('value1');清空 Set 对象
Set 对象的 clear() 方法可以用来清空所有的元素。
set.clear();
遍历 Set 对象
Set 对象提供了多种遍历方法，包括 keys()、values()、entries() 和 forEach()，用法和 Map 对象相同。
// javascriptcn.com 代码示例
const set = new Set(['value1', 'value2']);
// 遍历元素
for (const value of set.values()) {
console.log(value);
}
// 使用 forEach 遍历
set.forEach(value => {
console.log(value);
});应用场景
Map 和 Set 对象在前端开发中有很多应用场景，例如：
缓存数据
Map 对象可以用来缓存数据，避免重复计算。例如，我们可以使用 Map 对象来存储某个函数的计算结果，当需要重复调用该函数时，先判断 Map 对象中是否已经有该函数的计算结果，如果有，则直接返回结果，否则进行计算并存储结果。
// javascriptcn.com 代码示例
const cache = new Map();
function factorial(n) {
if (cache.has(n)) {
return cache.get(n);
}
let result = 1;
for (let i = 1; i <= n; i++) {
result *= i;
}
cache.set(n, result);
return result;
}去重
Set 对象可以用来去重，避免重复元素。例如，我们可以使用 Set 对象来对数组进行去重。
const array = [1, 2, 3, 2, 1]; const set = new Set(array); const uniqueArray = Array.from(set);
计数
Map 对象可以用来进行计数，统计某个元素出现的次数。例如，我们可以使用 Map 对象来统计字符串中各个字符出现的次数。
// javascriptcn.com 代码示例
function countCharacters(str) {
const map = new Map();
for (const char of str) {
if (map.has(char)) {
map.set(char, map.get(char) + 1);
} else {
map.set(char, 1);
}
}
return map;
}实用技巧
将对象转换为 Map 对象
我们可以使用 Object.entries() 方法将对象转换为 Map 对象。
const obj = { key1: 'value1', key2: 'value2' };
const map = new Map(Object.entries(obj));将 Map 对象转换为对象
我们可以使用 Object.fromEntries() 方法将 Map 对象转换为对象。
const map = new Map([['key1', 'value1'], ['key2', 'value2']]); const obj = Object.fromEntries(map);
将数组转换为 Set 对象
我们可以使用扩展运算符将数组转换为 Set 对象。
const array = [1, 2, 3]; const set = new Set([...array]);
将 Set 对象转换为数组
我们可以使用扩展运算符将 Set 对象转换为数组。
const set = new Set([1, 2, 3]); const array = [...set];
总结
本文介绍了 ES6 的 Map 和 Set 对象的基本用法、常见应用场景和一些实用技巧。Map 对象和 Set 对象在前端开发中非常实用，可以提高开发效率和代码质量。希望本文能够对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/653cdbee7d4982a6eb6d24fc