如何使用Set和Map存儲(chǔ)數(shù)據(jù)

這篇文章主要講解了“如何使用Set和Map存儲(chǔ)數(shù)據(jù)”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“如何使用Set和Map存儲(chǔ)數(shù)據(jù)”吧！

我們提供的服務(wù)有：網(wǎng)站建設(shè)、成都做網(wǎng)站、微信公眾號(hào)開(kāi)發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、阿拉山口ssl等。為近1000家企事業(yè)單位解決了網(wǎng)站和推廣的問(wèn)題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的阿拉山口網(wǎng)站制作公司

許多年來(lái)，程序員們一直使用Object和Array來(lái)存儲(chǔ)數(shù)據(jù)，這種趨勢(shì)不僅僅局限于JavaScript。除了這兩個(gè)選項(xiàng)外，沒(méi)有其他選擇來(lái)存儲(chǔ)多個(gè)值和處理數(shù)據(jù)結(jié)構(gòu)。然而，在使用Object和Array時(shí)有幾個(gè)限制，例如：

• Array可以存儲(chǔ)重復(fù)的元素。

• 沒(méi)有像Array那樣找到Object長(zhǎng)度的方法。

• 只有字符串可以存儲(chǔ)在Object中，不記插入順序。

• 開(kāi)發(fā)人員必須根據(jù)用例選擇數(shù)組或?qū)ο蟆?/p>

• 像Lodash這樣的第三方庫(kù)被用來(lái)增強(qiáng)數(shù)組的功能。

隨著2015年ES6的發(fā)布，情況開(kāi)始好轉(zhuǎn)。ES6引入了對(duì)Map和Set的支持，旨在克服上述限制。

什么是Set和Map?

如前所述，這兩個(gè)功能都是在JavaScript的ES6版本中引入的。Set是唯一元素的有序集合?！拔ㄒ辉亍笔亲钪匾?，因?yàn)樗馕吨粋€(gè)Set中不能存儲(chǔ)重復(fù)的元素。但是它沒(méi)有鍵-值對(duì)系統(tǒng)。

Map是Array和Object數(shù)據(jù)結(jié)構(gòu)的組合。它像Object一樣是鍵-值對(duì)的Set，但它也記住插入格式，并具有l(wèi)ength(.size)屬性。

Set的聲明和初始化：一個(gè)集合可以像這樣初始化。

const set = new Set();

const set = new Set();

· 從Set中添加和刪除元素：你可以使用.add()方法輕松地將元素插入到集合中。

const set = new Set();set.add('John');set.add('Martha')set.add('Bryan');set.add('John');//set = {'John','Martha','Bryan'}

JavaScript中的Set借用了很多數(shù)學(xué)集合的屬性，并且只包含唯一的元素。刪除元素也非常簡(jiǎn)單，使用.delete()方法刪除單個(gè)元素，或使用.clear()方法刪除所有元素。

set.add('John');set.add('Martha')set.add('Bryan');set.delete('Martha')//set= {'John','Bryan'}set.clear(); // removes all the element

· Set的大?。菏褂?size，你可以很容易地找到有用的Set的大小。

set.add('a')set.add('b');set.add('c');console.log(set.size) // => 3

· 訪問(wèn)Set中的元素：Set在嘗試記錄或訪問(wèn)其值時(shí)的方式不同。你可以記錄數(shù)組并查看元素，但這不適用于Set。

var arr=[1,2,3];const set = new Set(arr);console.log(set) // => [objectSet]console.log(arr) // => (3) [1,2,3]

為了訪問(wèn)Set，我們需要一個(gè)SetIterator()來(lái)獲取所有的值。JavaScript提供了一個(gè)屬性.values()來(lái)獲取一個(gè)迭代器，然后我們可以將該迭代器與循環(huán)結(jié)合使用獲取所有的值。如以下代碼片段演示：

var arr=[1,2,3];const set = new Set(arr);variterator=set.values()console.log(iterator.next().value) //1

檢索所有元素更簡(jiǎn)單的方法是使用.forEach()，如下所示：

var arr=[1,2,3];const set = new Set(arr);set.forEach(v=>console.log(v))

輸出：

1 2 3

此外，你可以使用.has()方法檢查是否存在某個(gè)值，如果找到該元素，該方法將返回true。

var arr=[1,2,3];const set = new Set(arr);console.log(set.has(1)); // true

值得一提的是，盡管Set不支持鍵-值對(duì)元素，但keys()和entries()等方法對(duì)Set是可用的。

Set vs Array

Set和Array傾向于執(zhí)行和處理相同的操作，但存在一些差異。最大的區(qū)別是Set不能像Array那樣有重復(fù)項(xiàng)，而Set提供了一種更簡(jiǎn)單的方法來(lái)刪除項(xiàng)。此外，Set的元素在插入順序上是可迭代的。

與數(shù)學(xué)集合一樣，JavaScript中的集合也可以用于執(zhí)行union和intersection等操作，這些操作可以在合并數(shù)據(jù)或在兩個(gè)Set中尋找公共元素時(shí)使用。

初始化和聲明Map：

與Set類似，Map也可以用同樣的方式聲明。

const map = new Map();

從Map中添加和刪除元素：Map支持類似Object的鍵值對(duì)。因此，在增加價(jià)值的同時(shí)，我們也需要提供一個(gè)密鑰。這和我們?cè)赟et中看到的不一樣。

const map = new Map();map.set('Name', 'iPhone'); // map.set(key,value)formatmap.set('Brand', 'Apple');map.set('Price', '$1000');

要從Map中刪除一個(gè)值，我們可以簡(jiǎn)單地將鍵傳遞給.delete()屬性。

const map = new Map();map.set('Name', 'iPhone'); map.set('Brand','Apple');map.set('Price', '$1000');map.delete('Price'); //removes the elementwith key 'Price'

與Set類似，可以使用.clear()刪除所有元素。

map.clear() // removes all the element

Map的大?。菏褂?size可以很容易地檢索Map的大小(長(zhǎng)度)。

const map = new Map();map.set('Name', 'iPhone');map.set('Brand','Apple');map.set('Price', '$1000');console.log(map.size)//=> 3

訪問(wèn)Map中的元素：Map為我們提供了一個(gè).get()方法，通過(guò)將鍵作為參數(shù)傳遞到方法中來(lái)快速獲取值。

const map = new Map();map.set('Name', 'iPhone');map.set('Brand','Apple');map.set('Price', '$1000');console.log(map.get('Name'));//iPhoneconsole.log(map.get('Brand')); // Apple

但是如果你只想要鍵、值，或者鍵和值都想要，該怎么辦呢?Map有.keys()，.values()和.entries()分別實(shí)現(xiàn)相同的功能。使用上面代碼中的相同Map：

console.log(map.keys()); // iterator {'Name','Brand',Price'}console.log(map.values()); // iterator {'iPhone','Apple','$1000'}console.log(map.entries()); //iterator {'Name':'iPhone','Brand':'Apple',Price':'$1000'}

Map的迭代也非常簡(jiǎn)單：

//with for-each map.forEach((value, key) => {    console.log(`${key} is ${value} yearsold!`); });   // with for-of for(const [key, value] of map) {   console.log(`${key} : ${value}`); }

此外，你可以使用.has()屬性并傳遞鍵輕松地檢查元素是否存在。

var map = new Map(); map.set('age',19);console.log(map.has('age')) // true since 'age' key ispresent

如果你決定將object轉(zhuǎn)換為map，JavaScript已經(jīng)搞定了。我們之前使用.entries()來(lái)獲取所有鍵-值對(duì)，但這次我們將使用針對(duì)Object的方法。

const myObject= {   'Age': '25',   'Gender': 'Male',   'Nationality': 'Australian' };   const myMap = new Map(Object.entries(myObject)); //object to mapconstanotherObject = Object.fromEntries(myMap) // map to object

你可以輕松地將map轉(zhuǎn)換為object，如上所示。要將Map轉(zhuǎn)換為Array，可以使用array .from(myMap)。

Map vs Array &Objects

Map似乎解決了Array和Object的許多缺點(diǎn)，比如它能夠處理更復(fù)雜的操作。Map就像是Array和Object的混合體。它有一個(gè)類似array的size屬性，可以以鍵-值對(duì)格式存儲(chǔ)元素。除此之外，它還提供了.has()之類的方法來(lái)檢查元素是否存在，這可以節(jié)省大量時(shí)間。

而且，它不要求鍵必須是字符串類型。你甚至可以使用一個(gè)對(duì)象作為鍵來(lái)幫助你編寫更好的代碼。

雖然Array和Object已經(jīng)成為存儲(chǔ)集合和鍵-值對(duì)元素的事實(shí)上的標(biāo)準(zhǔn)，但通過(guò)引入Map和Set，你可以為代碼提供一種有趣的方法。Set和Map是JavaScript提供的用于存儲(chǔ)復(fù)雜數(shù)據(jù)結(jié)構(gòu)的新標(biāo)準(zhǔn)。

此外，使用這些數(shù)據(jù)結(jié)構(gòu)還消除了使用第三方庫(kù)(如Lodash)的需要，因?yàn)檫@些新的數(shù)據(jù)結(jié)構(gòu)默認(rèn)提供了.has()和.delete()等方法。

感謝各位的閱讀，以上就是“如何使用Set和Map存儲(chǔ)數(shù)據(jù)”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)如何使用Set和Map存儲(chǔ)數(shù)據(jù)這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！

當(dāng)前名稱：如何使用Set和Map存儲(chǔ)數(shù)據(jù)
文章網(wǎng)址：http://bm7419.com/article14/psscde.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站策劃、建站公司、品牌網(wǎng)站設(shè)計(jì)、關(guān)鍵詞優(yōu)化、標(biāo)簽優(yōu)化、網(wǎng)站設(shè)計(jì)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)