文章目錄

• 1. 基本語法
• 2. 遍歷方式
• 3. WeekMap

ES6 提供了 Map 數據結構。它類似于對象，也是鍵值對的集合，但是“鍵”的范圍不限于字符串，各種類型的值（包括對象）都可以當作鍵。也就是說，Object 結構提供了“字符串—值”的對應，Map 結構提供了“值—值”的對應，是一種更完善的 Hash 結構實現。如果你需要“鍵值對”的數據結構，Map 比 Object 更合適。

1. 基本語法

let map = new Map([1,'one'],[2,'two'])

Map中可以是一個數組或者其他 iterable 對象，其元素為鍵值對。 每個鍵值對都會添加到新的 Map。null 會被當做 undefined。

添加數據

let keyObj = {} let keyFunc = function() {} let keyString = 'a string'// 添加鍵 map.set(keyString, "string value") map.set(keyObj, 'object value') map.set(keyFunc, 'function value')

刪除數據

// 刪除指定的數據 map.delete(keyString) // 刪除所有數據 map.clear()

統計數據

// 統計所有 key-value 的總數 console.log(map.size) //2 // 判斷是否存在 key-value console.log(map.has(keyObj)) // true

查詢數據
get() 方法返回某個 Map 對象中的一個指定元素

console.log(map.get(keyObj)) // 和鍵keyObj關聯的值

2. 遍歷方式

• keys() 返回按照順序插入 Map 對象中每個元素的 key 值
• values() 返回按順序插入Map對象中每個元素的 value 值
• entries() 返回包含[key, value] 對的Iterator對象，順序與 Map 對象的插入順序相同
• forEach() 按插入順序對 Map 對象進行遍歷
• for...of 可以直接遍歷每個成員

for (let key of map.keys()) {console.log(key) }for (let value of map.values()) {console.log(value) }for (let [key, value] of map.entries()) {console.log(key, value) }map.forEach((value, key) => console.log(value, key))for (let [key, value] of map) {console.log(key, value) }

Object 與 Map 的對比：

• 鍵的類型：Object的鍵只能是字符串或Symbol類型；Map可以是任意值（包括函數、對象等）
• 鍵的順序：Object的鍵值對是無序的；Map中的鍵值對是有序的，遍歷時是按插入的順序；
• 個數統計：Object鍵值對個數只能手動計算；Map可以用size屬性獲取個數；
• 鍵值對遍歷：Map迭代方法更多；
• 性能：Map在頻繁增刪鍵值對的場景下性能較好

3. WeekMap

WeakMap結構與Map結構類似，也是用于生成鍵值對的集合。

// WeakMap 可以使用 set 方法添加成員 const wm1 = new WeakMap() const key = {foo: 1 } wm1.set(key, 2) wm1.get(key) // 2// WeakMap 也可以接受一個數組， // 作為構造函數的參數 const k1 = [1, 2, 3] const k2 = [4, 5, 6] const wm2 = new WeakMap([[k1, 'foo'],[k2, 'bar'] ]) wm2.get(k2) // "bar"

WeakMap與Map的區別有兩點：

• WeakMap只接受對象作為鍵名（null除外），不接受其他類型的值作為鍵名
• WeakMap 不能包含無引用的對象，否則會被自動清除出集合（垃圾回收機制）；

const map = new WeakMap() map.set(1, 2) // TypeError: 1 is not an object! map.set(Symbol(), 2) // TypeError: Invalid value used as weak map key map.set(null, 2) // TypeError: Invalid value used as weak map key

WeakMap有什么作用呢？

• 通過 WeakMap 緩存計算結果

// 使用 WeakMap，你可以將先前計算的結果與對象相關聯，而不必擔心內存管理。以下功能 countOwnKeys() 是一個示例：它將以前的結果緩存在 WeakMap 中 cache。 const cache = new WeakMap();function countOwnKeys(obj) {if (cache.has(obj)) {return [cache.get(obj), 'cached'];} else {const count = Object.keys(obj).length;cache.set(obj, count);return [count, 'computed'];} }let obj = { name: "kakuqo", age: 30 }; console.log(countOwnKeys(obj)); // [2, 'computed'] console.log(countOwnKeys(obj)); // [2, 'cached'] obj = null; // 當對象不在使用時，設置為null

• 在 WeakMap 中保留私有數據

// 在以下代碼中，WeakMap _counter 和 _action 用于存儲以下實例的虛擬屬性的值： const _counter = new WeakMap(); const _action = new WeakMap();class Countdown {constructor(counter, action) {_counter.set(this, counter);_action.set(this, action);}dec() {let counter = _counter.get(this);counter--;_counter.set(this, counter);if (counter === 0) {_action.get(this)();}} }let invoked = false; const countDown = new Countdown(3, () => invoked = true); countDown.dec(); countDown.dec(); countDown.dec(); console.log(`invoked status: ${invoked}`)

總結

以上是生活随笔為你收集整理的【ES6(2015)】Map的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。