Map JavaScript數據結構

發現ES6中引入的Map數據結構,以將數據與鍵相關聯。在引入之前,人們通常通過將一些對像或值與特定的鍵值相關聯來將對像用作地圖。

什麼是地圖

Map數據結構允許將數據與鍵相關聯。

在ES6之前

ECMAScript6(也稱為ES2015)將Map數據結構引入了JavaScript世界,以及

在引入之前,人們通常通過將某些對像或值與特定的鍵值相關聯來將對像用作地圖:

const car = {}
car['color'] = 'red'
car.owner = 'Flavio'
console.log(car['color']) //red
console.log(car.color) //red
console.log(car.owner) //Flavio
console.log(car['owner']) //Flavio

輸入地圖

ES6引入了Map數據結構,為我們提供了處理此類數據組織的適當工具。

通過調用以下方法初始化Map:

const m = new Map()

將項目添加到地圖

您可以使用set方法:

m.set('color', 'red')
m.set('age', 2)

通過按鍵從地圖上獲取物品

您可以使用來從地圖中提取項目get

const color = m.get('color')
const age = m.get('age')

通過按鍵從地圖上刪除項目

使用delete()方法:

m.delete('color')

從地圖上刪除所有項目

使用clear()方法:

m.clear()

通過鍵檢查地圖是否包含項

使用has()方法:

const hasColor = m.has('color')

查找地圖中的項目數

使用size財產:

const size = m.size

用值初始化地圖

您可以使用一組值來初始化地圖:

const m = new Map([['color', 'red'], ['owner', 'Flavio'], ['age', 2]])

地圖鍵

就像任何值(對象,數組,字符串,數字)都可以用作地圖項的鍵值條目的值一樣,任何值都可以用作鍵,甚至是對象。

如果您嘗試使用來獲取不存在的密鑰get()走出地圖,它將返回undefined

在現實生活中幾乎找不到的奇怪情況

const m = new Map()
m.set(NaN, 'test')
m.get(NaN) //test
const m = new Map()
m.set(+0, 'test')
m.get(-0) //test

遍歷地圖

遍歷地圖鍵

地圖提供keys()我們可以用來迭代所有鍵的方法:

for (const k of m.keys()) {
  console.log(k)
}

遍歷地圖值

Map對象提供了values()我們可以用來迭代所有值的方法:

for (const v of m.values()) {
  console.log(v)
}

遍歷映射鍵,值對

Map對象提供了entries()我們可以用來迭代所有值的方法:

for (const [k, v] of m.entries()) {
  console.log(k, v)
}

可以簡化為

for (const [k, v] of m) {
  console.log(k, v)
}

轉換為數組

將映射鍵轉換為數組

const a = [...m.keys()]

將地圖值轉換為數組

const a = [...m.values()]

弱地圖

WeakMap是一種特殊的地圖。

在地圖對像中,永遠不會垃圾收集項目。相反,WeakMap允許自由地對其所有項目進行垃圾回收。 WeakMap的每個鍵都是一個對象。當對該對象的引用丟失時,可以對該值進行垃圾回收。

主要區別如下:

  1. 您不能遍歷WeakMap的鍵或值(或鍵值)
  2. 您無法從WeakMap清除所有項目
  3. 你不能檢查它的大小

WeakMap公開了那些方法,這些方法與Map的方法等效:

  • get(k)
  • set(k, v)
  • has(k)
  • delete(k)

WeakMap的用例不如Map的用例明顯,您可能永遠找不到它們的需求,但從本質上講,它可以用於構建對內存敏感的緩存,而不會干擾垃圾回收,或者進行仔細的封裝和信息隱藏。

免費下載我的JavaScript初學者手冊


更多js教程: