建站
咨詢
售后
建站咨詢
新聞中心
本文轉(zhuǎn)載自公眾號“讀芯術(shù)”(ID：AI_Discovery)。
公司主營業(yè)務(wù)：成都網(wǎng)站制作、成都網(wǎng)站設(shè)計(jì)、外貿(mào)營銷網(wǎng)站建設(shè)、移動網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競爭能力。成都創(chuàng)新互聯(lián)是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對我們的高要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會用頭腦與智慧不斷的給客戶帶來驚喜。成都創(chuàng)新互聯(lián)推出沾化免費(fèi)做網(wǎng)站回饋大家。
許多年來，程序員們一直使用Object和Array來存儲數(shù)據(jù)，這種趨勢不僅僅局限于JavaScript。除了這兩個選項(xiàng)外，沒有其他選擇來存儲多個值和處理數(shù)據(jù)結(jié)構(gòu)。然而，在使用Object和Array時有幾個限制，例如：
- Array可以存儲重復(fù)的元素。
- 沒有像Array那樣找到Object長度的方法。
- 只有字符串可以存儲在Object中，不記插入順序。
- 開發(fā)人員必須根據(jù)用例選擇數(shù)組或?qū)ο蟆?/li>
- 像Lodash這樣的第三方庫被用來增強(qiáng)數(shù)組的功能。
隨著2015年ES6的發(fā)布，情況開始好轉(zhuǎn)。ES6引入了對Map和Set的支持，旨在克服上述限制。
什么是Set和Map?
如前所述，這兩個功能都是在JavaScript的ES6版本中引入的。Set是唯一元素的有序集合。“唯一元素”是最重要的，因?yàn)樗馕吨粋€Set中不能存儲重復(fù)的元素。但是它沒有鍵-值對系統(tǒng)。
Map是Array和Object數(shù)據(jù)結(jié)構(gòu)的組合。它像Object一樣是鍵-值對的Set，但它也記住插入格式，并具有l(wèi)ength(.size)屬性。
Set的聲明和初始化：一個集合可以像這樣初始化。
- 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é)集合的屬性，并且只包含唯一的元素。刪除元素也非常簡單，使用.delete()方法刪除單個元素，或使用.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
· 訪問Set中的元素：Set在嘗試記錄或訪問其值時的方式不同。你可以記錄數(shù)組并查看元素，但這不適用于Set。
- var arr=[1,2,3];const set = new Set(arr);console.log(set) // => [objectSet]console.log(arr) // => (3) [1,2,3]
為了訪問Set，我們需要一個SetIterator()來獲取所有的值。JavaScript提供了一個屬性.values()來獲取一個迭代器，然后我們可以將該迭代器與循環(huán)結(jié)合使用獲取所有的值。如以下代碼片段演示：
- var arr=[1,2,3];const set = new Set(arr);variterator=set.values()console.log(iterator.next().value) //1
檢索所有元素更簡單的方法是使用.forEach()，如下所示：
- var arr=[1,2,3];const set = new Set(arr);set.forEach(v=>console.log(v))
輸出：
- 1
- 2
- 3
此外，你可以使用.has()方法檢查是否存在某個值，如果找到該元素，該方法將返回true。
- var arr=[1,2,3];const set = new Set(arr);console.log(set.has(1)); // true
值得一提的是，盡管Set不支持鍵-值對元素，但keys()和entries()等方法對Set是可用的。
Set vs Array
Set和Array傾向于執(zhí)行和處理相同的操作，但存在一些差異。最大的區(qū)別是Set不能像Array那樣有重復(fù)項(xiàng)，而Set提供了一種更簡單的方法來刪除項(xiàng)。此外，Set的元素在插入順序上是可迭代的。
與數(shù)學(xué)集合一樣，JavaScript中的集合也可以用于執(zhí)行union和intersection等操作，這些操作可以在合并數(shù)據(jù)或在兩個Set中尋找公共元素時使用。
初始化和聲明Map：
與Set類似，Map也可以用同樣的方式聲明。
- const map = new Map();
從Map中添加和刪除元素：Map支持類似Object的鍵值對。因此，在增加價值的同時，我們也需要提供一個密鑰。這和我們在Set中看到的不一樣。
- const map = new Map();map.set('Name', 'iPhone'); // map.set(key,value)formatmap.set('Brand', 'Apple');map.set('Price', '$1000');
要從Map中刪除一個值，我們可以簡單地將鍵傳遞給.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的大小(長度)。
- const map = new Map();map.set('Name', 'iPhone');map.set('Brand','Apple');map.set('Price', '$1000');console.log(map.size)//=> 3
訪問Map中的元素：Map為我們提供了一個.get()方法，通過將鍵作為參數(shù)傳遞到方法中來快速獲取值。
- 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的迭代也非常簡單：
- //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()來獲取所有鍵-值對，但這次我們將使用針對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的混合體。它有一個類似array的size屬性，可以以鍵-值對格式存儲元素。除此之外，它還提供了.has()之類的方法來檢查元素是否存在，這可以節(jié)省大量時間。
而且，它不要求鍵必須是字符串類型。你甚至可以使用一個對象作為鍵來幫助你編寫更好的代碼。
雖然Array和Object已經(jīng)成為存儲集合和鍵-值對元素的事實(shí)上的標(biāo)準(zhǔn)，但通過引入Map和Set，你可以為代碼提供一種有趣的方法。Set和Map是JavaScript提供的用于存儲復(fù)雜數(shù)據(jù)結(jié)構(gòu)的新標(biāo)準(zhǔn)。
此外，使用這些數(shù)據(jù)結(jié)構(gòu)還消除了使用第三方庫(如Lodash)的需要，因?yàn)檫@些新的數(shù)據(jù)結(jié)構(gòu)默認(rèn)提供了.has()和.delete()等方法。
圖源：unsplash
Array和Object在任何意義上都不是過時的，不過使用Set和Map肯定是處理數(shù)據(jù)更好的方法，尤其是在構(gòu)建大型復(fù)雜應(yīng)用程序時。
網(wǎng)站欄目：不想用Object和Array存儲數(shù)據(jù)，你還有Set和Map
標(biāo)題網(wǎng)址：http://www.dlmjj.cn/article/dpdosde.html
