JavaScript中Set和Map數(shù)據(jù)結(jié)構(gòu)使用場(chǎng)景詳解

更新時(shí)間：2023年06月01日 08:59:29 作者：Tom_Li

這篇文章主要為大家介紹了JavaScript中Set和Map數(shù)據(jù)結(jié)構(gòu)使用場(chǎng)景詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

Set數(shù)據(jù)結(jié)構(gòu)

Set 是 ES6 中引入的一種新的數(shù)據(jù)結(jié)構(gòu)，它是一種集合，可以存儲(chǔ)任意類(lèi)型的數(shù)據(jù)

Set 每個(gè)元素的值在集合中是唯一的。

使用 Set 數(shù)據(jù)結(jié)構(gòu)可以方便地去除數(shù)組或?qū)ο笾械闹貜?fù)元素。

應(yīng)用場(chǎng)景

// 1  數(shù)組去重
const arr = [1, 2, 3, 2, 1];
const set = new Set(arr);
const newArr = Array.from(set); // newArr = [1, 2, 3]
// 2 對(duì)象去重
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 將數(shù)組中的對(duì)象映射為它們的 id 值，

然后使用 new Set 去除重復(fù)的 id 值。

最后，我們使用 Array.from 將集合轉(zhuǎn)換為對(duì)象數(shù)組，

并根據(jù)每個(gè) id 值創(chuàng)建一個(gè)新的對(duì)象，得到不重復(fù)對(duì)象的數(shù)組。

Map 數(shù)據(jù)結(jié)構(gòu)

解釋

Map是一種 js 數(shù)據(jù)結(jié)構(gòu)，與數(shù)組的 map 方法并非一種，要區(qū)分開(kāi)來(lái)

Map數(shù)據(jù)結(jié)構(gòu)來(lái)管理數(shù)據(jù)，能提高代碼的可讀性

Map 相比較對(duì)象格式存儲(chǔ)速度要更快

// 創(chuàng)建一個(gè)Map對(duì)象
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

通過(guò)使用Map來(lái)管理數(shù)據(jù)，可以使代碼更加簡(jiǎn)潔和易于維護(hù)。

同時(shí)，Map也提供了一些方便的方法，如set()、get()、has()、delete()等，可以方便地對(duì)數(shù)據(jù)進(jìn)行操作。

使用場(chǎng)景

1. 管理表單數(shù)據(jù)

當(dāng)頁(yè)面中有多個(gè)表單元素需要進(jìn)行數(shù)據(jù)交互時(shí)，可以使用Map來(lái)存儲(chǔ)表單數(shù)據(jù)。例如：

const formData = new Map();
formData.set('username', 'Tom');
formData.set('password', '123456');
// 通過(guò)get()方法來(lái)獲取已存儲(chǔ)的數(shù)據(jù)
const username = formData.get('username');// username = Tom
const password = formData.get('password');// password = 123456

2. 管理頁(yè)面狀態(tài)

當(dāng)頁(yè)面中存在一些狀態(tài)需要管理時(shí)，可以使用Map來(lái)存儲(chǔ)狀態(tài)。例如：

const state = new Map();
state.set('loading', false);
state.set('error', null);
// 通過(guò)set()方法來(lái)更新已存儲(chǔ)的數(shù)據(jù)
state.set('loading', true);
state.set('error', '請(qǐng)求失敗');

3. 管理列表數(shù)據(jù)

當(dāng)頁(yè)面中存在一個(gè)列表需要管理時(shí)，可以使用Map來(lái)存儲(chǔ)列表數(shù)據(jù)。例如：

const list = new Map();
list.set(1, { id: 1, name: 'Tom' });
list.set(2, { id: 2, name: 'Join' });
// 通過(guò)get()方法來(lái)獲取已存儲(chǔ)的數(shù)據(jù)
const item = list.get(1); // item = { id: 1, name: 'Tom' }
const item = list.get(2); // item = { id: 2, name: 'Join' }

4. 管理緩存數(shù)據(jù)

當(dāng)我們需要緩存一些數(shù)據(jù)時(shí)，可以使用Map來(lái)存儲(chǔ)緩存數(shù)據(jù)。例如：

const cache = new Map();
cache.set('key1', 'value1');
cache.set('key2', 'value2');
// 通過(guò)get()方法來(lái)獲取已存儲(chǔ)的數(shù)據(jù)
const value = cache.get('key1');// value = value1
const value = cache.get('key2');// value = value2

以上就是JavaScript中Set和Map數(shù)據(jù)結(jié)構(gòu)使用場(chǎng)景詳解的詳細(xì)內(nèi)容，更多關(guān)于JavaScript Set Map數(shù)據(jù)結(jié)構(gòu)的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: