Map數(shù)據(jù)類型

顧名思義

也就是映射類型,包含一個[[Entries]]私有特性

我們可以使用一個二維數(shù)組作為初始值

const map1 = new Map([[1, 1],[2, 2],[3, 3],]); console.log("Map數(shù)據(jù)類型====>", map1);

當然也可以使用迭代器進行初始化

const map2 = new Map({[Symbol.iterator]: function* () {yield* [[1, 1],[2, 2],[3, 3],];},});console.log("Map數(shù)據(jù)類型====>", map2);

我們來看一下Map數(shù)據(jù)類型內(nèi)部結(jié)構(gòu)(著重看下私有特性)

我們可以看到,Map數(shù)據(jù)類型包含了一個[[Entries]]私有特性

這個特性中可以看到一個清晰的映射關(guān)系

而在Map數(shù)據(jù)類型的原型上還掛在了很多方法

諸如 get set delete clear等操作方法

還有一個關(guān)于size屬性的get訪問器特性

另外,我們還可以清晰地看到

Map數(shù)據(jù)類型包含著迭代器屬性,且迭代方法默認為entries()

我們首先來學習一下關(guān)于Map的操作方法

---

.set() const emptyMap = new Map();console.log("emptyMap====>", emptyMap);emptyMap.set('name', 'shang')console.log("set結(jié)果====>", emptyMap);

新增映射關(guān)系

由于set方法會返回被操作的Map數(shù)據(jù),所以可以鏈式調(diào)用

emptyMap.set("gender", "male").set("age", 17);console.log("set結(jié)果====>", emptyMap);

可以鏈式調(diào)用.get() console.log('get方法====>', emptyMap.get('name')

通過鍵獲取映射值.has() console.log('has方法====>', emptyMap.has('name'))

通過has方法檢驗映射是否存在.delete() emptyMap.delete('name') console.log("delete結(jié)果====>", emptyMap);

使用delete刪除一個映射.clear() emptyMap.clear()console.log("emptyMap的size====>", emptyMap.size);

clear后,所有映射關(guān)系都被清除了

---

Map數(shù)據(jù)類型可以接受各種類型的作為鍵

這里我們測試一下,function, Symbol 以及Object類型

const functionKey = function() {};const symbolKey = Symbol()const objectKey = new Object()emptyMap.set(functionKey, functionKey).set(symbolKey, symbolKey).set(objectKey, objectKey)console.log('各種特殊鍵值對===>', emptyMap)

---

復雜類型作為鍵值時,Map類型并不保存快照,而是保存指針

這句話聽起來挺唬人

but其實理解起來很簡單

我舉個例子

const emptyArr = []; const emptyObj = {}; emptyMap.set(emptyArr, emptyObj); emptyArr.push("1"); emptyObj.name = "shang"; console.log("復雜類型特殊鍵值對===>", emptyMap); console.log("復雜類型特殊值===>", emptyMap.get(emptyArr));

---

順序維護和迭代方法

Map會自動維護關(guān)于元素的順序

而且從上面Map數(shù)據(jù)類型原型鏈我們可以得知

Map數(shù)據(jù)類型包含一個默認方法為entries的迭代器

console.log('Map數(shù)據(jù)類型默認迭代器', emptyMap.entries === emptyMap[Symbol.iterator])

foroffor (const [key, value] of emptyMap) {console.log("forof映射元素分別為===>", key, value); }

Map可以使用forof方法展開迭代拓展運算符console.log("拓展運算符用于Map數(shù)據(jù)類型", [...emptyMap]);

拓展運算符與forof公用迭代器forEach方法emptyMap.forEach((value, key) => {console.log("forEach映射元素分別為===>", key, value); });

Map關(guān)于forEach的迭代效果與數(shù)組類似,value在前,key在后

---

Map使用values & keys 返回映射的迭代器

keys返回映射關(guān)于key的迭代器
可以用于forof 拓展運算符 Map Set等等// Map使用values & keys 返回映射的迭代器 const keysIterator = emptyMap.keys(); console.log("Map的keys的迭代器===>", keysIterator); for (const iterator of keysIterator) {console.log("keysIterator===>", iterator); }

values返回映射關(guān)于value的迭代器
可以用于forof 拓展運算符 Map Set等等const valuesIterator = emptyMap.values(); console.log("Map的values的迭代器===>", valuesIterator); for (const iterator of valuesIterator) {console.log("valuesIterator===>", iterator); }

---

Map相較于Object有何優(yōu)缺點???

數(shù)據(jù)類型占用內(nèi)存插入數(shù)據(jù)刪除數(shù)據(jù)查數(shù)據(jù)MapObject

同等數(shù)據(jù)量比Object少占50%內(nèi)存	插入更快,更省性能	刪除更快,更省性能	×
×	×	×	有線性優(yōu)化,查找更快,數(shù)據(jù)量越大查找優(yōu)勢越明顯

總結(jié)

以上是生活随笔為你收集整理的类型“unknown”上不存在属性“foreach”_JavaScript红宝书第四版精简解析系列--映射Map数据类型...的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。