关于前端: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