关于前端:JavaScript-中-Map-数据结构的使用

解释

Map 是一种 js 数据结构，与数组的 map 办法并非一种，要辨别开来
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 = 123456

2. 治理页面状态

当页面中存在一些状态须要治理时，能够应用 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