Map與Set怎么使用

這篇文章主要介紹“Map與Set怎么使用”的相關(guān)知識(shí)，小編通過(guò)實(shí)際案例向大家展示操作過(guò)程，操作方法簡(jiǎn)單快捷，實(shí)用性強(qiáng)，希望這篇“Map與Set怎么使用”文章能幫助大家解決問(wèn)題。

1.基本概念

我們先來(lái)了解以下 Map 和 Set 的基本概念，這樣才能幫助我們更好的使用。雖然我們通常把這兩種數(shù)據(jù)結(jié)構(gòu)混合著來(lái)講，但事實(shí)上它們它們還是有挺大區(qū)別的！

1.1 Map（字典）

想要迅速了解一個(gè)新的數(shù)據(jù)結(jié)構(gòu)或 API 是，查看官網(wǎng)是一個(gè)不錯(cuò)的選擇。Map 在官網(wǎng)上也有解釋?zhuān)覀円黄饋?lái)看下。

官網(wǎng)解釋?zhuān)?/strong>

Map 對(duì)象保存鍵值對(duì)，并且能夠記住鍵的原始插入順序。任何值（對(duì)象或者原始值）都可以作為一個(gè)鍵或一個(gè)值。

官網(wǎng)的這句話非常精煉，我們從上面這句話中總結(jié)如下幾個(gè)關(guān)鍵詞：

• 鍵值對(duì)

• 記住插入順序

• 任意值作為鍵

一看到鍵值對(duì)，難免會(huì)想到對(duì)象。事實(shí)確實(shí)如此，Map 與我們平常所用的對(duì)象非常類(lèi)似，它是一種類(lèi)對(duì)象的數(shù)據(jù)結(jié)構(gòu)，所以我們通常稱它為 Map 對(duì)象。

但是我們可以把它說(shuō)得更為官方一點(diǎn)：Map 字典。關(guān)于程序中字典的概念大家可以下去了解一下。

特點(diǎn)總結(jié)：

• Map 對(duì)象這種數(shù)據(jù)結(jié)構(gòu)和和對(duì)象類(lèi)型，都已鍵值對(duì)的形式存儲(chǔ)數(shù)據(jù)，即 key-vlue 形式。

• Map 對(duì)象存儲(chǔ)的數(shù)據(jù)是有序的，而我們平常使用的對(duì)象是無(wú)序的，所以通常當(dāng)我們需要使用對(duì)象形式（鍵值對(duì)）存儲(chǔ)數(shù)據(jù)且需要有序時(shí)，采用 Map 對(duì)象進(jìn)行存儲(chǔ)。

• Map 對(duì)象的鍵值可以是任意類(lèi)型，我們平時(shí)使用的對(duì)象只能使用字符串作為鍵。

1.2 Set（集合）

和 Map 類(lèi)似，我們同樣先來(lái)看一看官網(wǎng)是怎么解釋 Set 這個(gè)數(shù)據(jù)結(jié)構(gòu)的。

官網(wǎng)的解釋?zhuān)?/strong>

Set 對(duì)象允許你存儲(chǔ)任何類(lèi)型的唯一值，無(wú)論是原始值或者是對(duì)象引用。

Set 的解釋比 Map 的解釋還要精煉，我們從中提取出幾個(gè)關(guān)鍵詞：

• 任何類(lèi)型

• 唯一值

上面關(guān)鍵詞中我們需要重點(diǎn)關(guān)注“唯一值”，這說(shuō)明使用 Set 存儲(chǔ)的數(shù)據(jù)是不會(huì)重復(fù)的，除此之外，Set 也是一個(gè)對(duì)象，但是它是一個(gè)類(lèi)數(shù)組對(duì)象，也就是說(shuō)它長(zhǎng)得像數(shù)組，我們通常直接稱它為 Set 對(duì)象。

當(dāng)然也可以官方一點(diǎn)的稱它：Set 集合。

特點(diǎn)總結(jié)：

• Set 對(duì)象是一個(gè)類(lèi)數(shù)組對(duì)象，它長(zhǎng)得就很像數(shù)組。

• Set 對(duì)象存儲(chǔ)的值是不重復(fù)的，所以我們通常使用它來(lái)實(shí)現(xiàn)數(shù)組去重。

• Set 對(duì)象存儲(chǔ)的數(shù)據(jù)不是鍵值對(duì)的形式，而且它可以存儲(chǔ)任何類(lèi)型的數(shù)據(jù)。

2.基本使用

我們平常使用 Array 或者 Object 的時(shí)候，都是直接采用[變量] = []、[變量] = {}的形式來(lái)進(jìn)行初始化。而這里我們所講的 Map 和 Set 數(shù)據(jù)結(jié)構(gòu)它們都是以構(gòu)造函數(shù)的形式出現(xiàn)的，所以我們通常使用 new Set()或者 new Map()的形式初始化的。

2.1 Map 基本使用

初始化 map 對(duì)象：

let myMap = new Map();

初始化 map 時(shí)傳入數(shù)據(jù)：

由于 Map 對(duì)象是一個(gè)構(gòu)造函數(shù)，所以我們?cè)诔跏蓟臅r(shí)候可以傳入默認(rèn)數(shù)據(jù)的，只不過(guò)我們需要注意傳入默認(rèn)數(shù)據(jù)的格式，它默認(rèn)接收一個(gè)二維數(shù)組。

let defaultMap = new Map([['name', '張三'], ['age', 20]]);

打印出來(lái)看看結(jié)果：

插入數(shù)據(jù)：

myMap.set('name', '小豬課堂'); // 字符串作為鍵
myMap.set(12, '會(huì)飛的豬'); // number 類(lèi)型作為鍵
myMap.set({}, '知乎'); // 對(duì)象類(lèi)型作為鍵

我們先打印出來(lái)看看結(jié)果：

獲取長(zhǎng)度：

我們傳統(tǒng)的對(duì)象可以通過(guò) Object.key().length 來(lái)獲取對(duì)象長(zhǎng)度，而 map 對(duì)象自帶 size 屬性獲取對(duì)象長(zhǎng)度。

let myMapSize = myMap.size;

獲取值：

let objKey = {};
myMap.set('name', '小豬課堂'); // 字符串作為鍵
myMap.set(12, '會(huì)飛的豬'); // number 類(lèi)型作為鍵
myMap.set(objKey, '知乎'); // 對(duì)象類(lèi)型作為鍵
let name = myMap.get('name');
let age = myMap.get(12);
let any = myMap.get(objKey);
console.log(name, age, any); // 小豬課堂 會(huì)飛的豬 知乎

上段代碼中需要注意的是不能使用 myMap.get({})的形式獲取數(shù)據(jù)，因?yàn)?objKey!=={}。

刪除某個(gè)值：

myMap.delete('name');

判斷某個(gè)值是否存在：

myMap.has('name'); // 返回 bool 值

2.2 Set 基本使用

Set對(duì)象的使用方式和Map對(duì)象的使用方式非常的類(lèi)似，只不過(guò)存儲(chǔ)的數(shù)據(jù)格式不一樣罷了。這里需要注意的Set對(duì)象存儲(chǔ)的不是鍵值對(duì)形式，它只存儲(chǔ)了值，沒(méi)有鍵，就和數(shù)組類(lèi)似。

初始化Set對(duì)象：

let mySet = new Set();

初始化Set對(duì)象帶有默認(rèn)值：

和Map類(lèi)似，Set初始化時(shí)也可以初始化默認(rèn)數(shù)據(jù)。

let defaultSet = new Set(['張三', 12, true]);

一起來(lái)看看輸出結(jié)果：

插入數(shù)據(jù)：

mySet.add(1);
mySet.add('小豬課堂');

打印結(jié)果：

獲取長(zhǎng)度：

let mySetSize = mySet.size;

獲取值：

由于Set對(duì)象存儲(chǔ)的不是鍵值對(duì)形式，所以未提供get方法獲取值，我們通常遍歷它獲取值：

mySet.forEach((item) => {
  console.log(item)
})

刪除某個(gè)值：

mySet.delete(1);

判斷某個(gè)值是否存在：

mySet.has(1); // 返回Boolean值

3.Map和Set區(qū)別

如果我們學(xué)會(huì)了它們兩者如何使用，或多或少都知道它們的區(qū)別在哪里，我們這里為大家總結(jié)一下它們的區(qū)別要點(diǎn)：

• Map和Set查找速度都非常快，時(shí)間復(fù)雜度為O(1)，而數(shù)組查找的時(shí)間復(fù)雜度為O(n)。

• Map對(duì)象初始化的值為一個(gè)二維數(shù)組，Set對(duì)象初始化的值為一維數(shù)組。

• Map對(duì)象和Set對(duì)象都不允許鍵重復(fù)（可以將Set對(duì)象的鍵想象成值）。

• Map對(duì)象的鍵是不能改的，但是值能改，Set對(duì)象只能通過(guò)迭代器來(lái)更改值。

4.使用場(chǎng)景介紹

4.1 Set對(duì)象使用場(chǎng)景

數(shù)組去重

這是大家很熟悉的一種場(chǎng)景，使用Set對(duì)象的唯一性值特性方便的給我們數(shù)組去重。

代碼如下：

let arr = [1, 2, 3, 4, 5, 6, 3, 2, 5, 3, 2];
console.log([...new Set(arr)]); // [1, 2, 3, 4, 5, 6]

需要注意的是Set對(duì)象是一個(gè)類(lèi)數(shù)組，我們使用...擴(kuò)展運(yùn)算符將一個(gè)類(lèi)數(shù)組轉(zhuǎn)化為了一個(gè)真正的數(shù)組。

4.2 Map對(duì)象使用場(chǎng)景

數(shù)字類(lèi)型充當(dāng)鍵

代碼如下：

let errors = new Map([
  [400, 'InvalidParameter'],
  [404, 'Not found'],
  [500, 'InternalError']
]);
console.log(errors);

輸出結(jié)果：

我們可以使用Map對(duì)象建立一個(gè)請(qǐng)求狀態(tài)碼對(duì)象字典，因?yàn)闋顟B(tài)碼是數(shù)字類(lèi)型，所以使用Map對(duì)象很合適。

除了該場(chǎng)景外，如果需要保證對(duì)象的順序，那么也是可以使用Map對(duì)象的。

5.思考點(diǎn)

前面我們說(shuō)Set和Map的插入刪除效率為什么很高呢？

這里簡(jiǎn)單講一下，更加深入需要大家自己下去好好學(xué)習(xí)一下數(shù)據(jù)結(jié)構(gòu)了。

簡(jiǎn)述原因：

map和set存儲(chǔ)的所有元素都是以節(jié)點(diǎn)的方式來(lái)進(jìn)行存儲(chǔ)的，這種節(jié)點(diǎn)結(jié)構(gòu)和鏈表有點(diǎn)類(lèi)似。我們都知道鏈表的特點(diǎn)是插入和刪除都非?？?，時(shí)間復(fù)雜度為O(1)，兩個(gè)節(jié)點(diǎn)通過(guò)指針相連，刪除或者增加元素時(shí)，我們只是重新更改了指針的指向，不想數(shù)組那樣，摻入或刪除之后需要重新排序。

關(guān)于“Map與Set怎么使用”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。