
Map數據類型
顧名思義
也就是映射類型,包含一個[[Entries]]私有特性
我們可以使用一個二維數組作為初始值
const map1 = new Map([[1, 1],[2, 2],[3, 3],]);
console.log("Map數據類型====>", map1);
當然也可以使用迭代器進行初始化
const map2 = new Map({[Symbol.iterator]: function* () {yield* [[1, 1],[2, 2],[3, 3],];},});console.log("Map數據類型====>", map2);
我們來看一下Map數據類型內部結構(著重看下私有特性)

我們可以看到,Map數據類型包含了一個[[Entries]]私有特性
這個特性中可以看到一個清晰的映射關系
而在Map數據類型的原型上還掛在了很多方法
諸如 get set delete clear等操作方法
還有一個關于size屬性的get訪問器特性
另外,我們還可以清晰地看到
Map數據類型包含著迭代器屬性,且迭代方法默認為entries()
我們首先來學習一下關于Map的操作方法
.set()
const emptyMap = new Map();console.log("emptyMap====>", emptyMap);emptyMap.set('name', 'shang')console.log("set結果====>", emptyMap);

由于set方法會返回被操作的Map數據,所以可以鏈式調用
emptyMap.set("gender", "male").set("age", 17);console.log("set結果====>", emptyMap);

.get()
console.log('get方法====>', emptyMap.get('name')

.has()
console.log('has方法====>', emptyMap.has('name'))

.delete()
emptyMap.delete('name')
console.log("delete結果====>", emptyMap);

.clear()
emptyMap.clear()console.log("emptyMap的size====>", emptyMap.size);

Map數據類型可以接受各種類型的作為鍵
這里我們測試一下,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會自動維護關于元素的順序
而且從上面Map數據類型原型鏈我們可以得知
Map數據類型包含一個默認方法為entries的迭代器
console.log('Map數據類型默認迭代器', emptyMap.entries === emptyMap[Symbol.iterator])

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

拓展運算符
console.log("拓展運算符用于Map數據類型", [...emptyMap]);

forEach方法
emptyMap.forEach((value, key) => {console.log("forEach映射元素分別為===>", key, value);
});

Map關于forEach的迭代效果與數組類似,value在前,key在后
Map使用values & keys 返回映射的迭代器
keys返回映射關于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返回映射關于value的迭代器
可以用于forof 拓展運算符 Map Set等等
const valuesIterator = emptyMap.values();
console.log("Map的values的迭代器===>", valuesIterator);
for (const iterator of valuesIterator) {console.log("valuesIterator===>", iterator);
}

Map相較于Object有何優缺點???
數據類型 | 占用內存 | 插入數據 | 刪除數據 | 查數據 |
---|---|---|---|---|
Map | 同等數據量比Object少占50%內存 | 插入更快,更省性能 | 刪除更快,更省性能 | × |
Object | × | × | × | 有線性優化,查找更快,數據量越大查找優勢越明顯 |