JavaScript中Set和Map数据结构使用场景详解
作者：Tom_Li
这篇文章主要为大家介绍了JavaScript中Set和Map数据结构使用场景详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
Set数据结构
Set 是 ES6 中引入的一种新的数据结构，它是一种集合，可以存储任意类型的数据
Set 每个元素的值在集合中是唯一的。
使用 Set 数据结构可以方便地去除数组或对象中的重复元素。
应用场景
// 1 数组去重
const arr = [1, 2, 3, 2, 1];
const set = new Set(arr);
const newArr = Array.from(set); // newArr = [1, 2, 3]
// 2 对象去重
const arr = [{ id: 1 }, { id: 2 }, { id: 1 }, { id: 3 }];
const set = new Set(arr.map(item => item.id));
const newArr = Array.from(set, id => ({ id }));
// newArr = [{ id: 1 }, { id: 2 }, { id: 3 }]在上面的代码中，我们首先使用 Array.map 将数组中的对象映射为它们的 id 值，
然后使用 new Set 去除重复的 id 值。
最后，我们使用 Array.from 将集合转换为对象数组，
并根据每个 id 值创建一个新的对象，得到不重复对象的数组。
Map 数据结构
解释
Map是一种 js 数据结构，与数组的 map 方法并非一种，要区分开来
Map数据结构来管理数据，能提高代码的可读性
Map 相比较 对象格式 存储速度要更快
// 创建一个Map对象
const formData = new Map();
// 添加表单元素的值到Map中
formData.set('username', 'Tom');
formData.set('password', '123456');
// 获取表单元素的值
const username = formData.get('username');// username = Tom
const password = formData.get('password');// password = 123456通过使用Map来管理数据，可以使代码更加简洁和易于维护。
同时，Map也提供了一些方便的方法，如set()、get()、has()、delete()等，可以方便地对数据进行操作。
使用场景
1. 管理表单数据
当页面中有多个表单元素需要进行数据交互时，可以使用Map来存储表单数据。例如：
const formData = new Map();
formData.set('username', 'Tom');
formData.set('password', '123456');
// 通过get()方法来获取已存储的数据
const username = formData.get('username');// username = Tom
const password = formData.get('password');// password = 1234562. 管理页面状态
当页面中存在一些状态需要管理时，可以使用Map来存储状态。例如：
const state = new Map();
state.set('loading', false);
state.set('error', null);
// 通过set()方法来更新已存储的数据
state.set('loading', true);
state.set('error', '请求失败');3. 管理列表数据
当页面中存在一个列表需要管理时，可以使用Map来存储列表数据。例如：
const list = new Map();
list.set(1, { id: 1, name: 'Tom' });
list.set(2, { id: 2, name: 'Join' });
// 通过get()方法来获取已存储的数据
const item = list.get(1); // item = { id: 1, name: 'Tom' }
const item = list.get(2); // item = { id: 2, name: 'Join' }4. 管理缓存数据
当我们需要缓存一些数据时，可以使用Map来存储缓存数据。例如：
const cache = new Map();
cache.set('key1', 'value1');
cache.set('key2', 'value2');
// 通过get()方法来获取已存储的数据
const value = cache.get('key1');// value = value1
const value = cache.get('key2');// value = value2以上就是JavaScript中Set和Map数据结构使用场景详解的详细内容，更多关于JavaScript Set Map数据结构的资料请关注脚本之家其它相关文章！