JavaScript >> Javascript 文檔 >  >> Tags >> map

ECMAScript 6 集合,第 3 部分:WeakMaps

Weakmap 類似於常規映射,因為它們將值映射到唯一鍵。該鍵稍後可用於檢索它標識的值。 Weakmap 不同,因為鍵必須是對象,不能是原始值。這似乎是一個奇怪的約束,但它實際上是使弱圖與眾不同和有用的核心。

弱映射只保存對鍵的弱引用,這意味著弱映射內部的引用不會阻止該對象的垃圾收集。當對像被垃圾收集器銷毀時,weakmap 會自動刪除該對象標識的鍵值對。使用弱映射的典型示例是創建與特定 DOM 元素相關的對象。例如,jQuery 在內部維護了一個對象緩存,每個被引用的 DOM 元素都有一個緩存。使用弱映射將允許 jQuery 在將 DOM 元素從文檔中刪除時自動釋放與該元素關聯的內存。

ECMAScript 6 WeakMap type 是鍵值對的無序列表,其中鍵必須是非空對象,值可以是任何類型。 WeakMap 的接口 與 Map 非常相似 在那個 set()get() 分別用於添加數據和檢索數據:

var map = new WeakMap(),
    element = document.querySelector(".element");

map.set(element, "Original");

// later
var value = map.get(element);
console.log(value);             // "Original"

// later still - remove reference
element.parentNode.removeChild(element);
element = null;

value = map.get(element);
console.log(value);             // undefined

在此示例中,存儲了一個鍵值對。鍵是一個 DOM 元素,用於存儲相應的字符串值。後來通過將 DOM 元素傳遞給 get() 來檢索該值 .如果 DOM 元素隨後從文檔中移除,並且引用它的變量設置為 null ,然後數據也會從weakmap中移除,並且下一次檢索與DOM元素關聯的數據的嘗試失敗。

這個例子有點誤導,因為第二次調用 map.get(element) 正在使用 null 的值 (其中 element 被設置為) 而不是對 DOM 元素的引用。你不能使用 null 作為弱映射中的鍵,所以這段代碼實際上並沒有進行有效的查找。遺憾的是,界面中沒有部分可以讓您查詢引用是否已被清除(因為引用已不存在)。

注意:weakmap set() 如果您嘗試使用原始值作為鍵,該方法將引發錯誤。如果你想使用原始值作為鍵,那麼最好使用 Map 而是。

Weakmaps 也有 has() 用於確定地圖中是否存在鍵和 delete() 用於刪除鍵值對。

var map = new WeakMap(),
    element = document.querySelector(".element");

map.set(element, "Original");

console.log(map.has(element));   // true
console.log(map.get(element));   // "Original"

map.delete(element);
console.log(map.has(element));   // false
console.log(map.get(element));   // undefined

在這裡,DOM 元素再次被用作弱映射中的鍵。 has() 方法對於檢查引用當前是否被用作弱映射中的鍵很有用。請記住,這僅在您對鍵具有非空引用時才有效。使用delete()強行從weakmap中移除key ,此時 has() 返回 falseget() 返回 undefined .

瀏覽器支持

Firefox 和 Chrome 都實現了 WeakMap ,但是,在 Chrome 中,您需要手動啟用 ECMAScript 6 功能:轉到 chrome://flags 並啟用“實驗性 JavaScript 功能”。根據當前的稻草人,這兩種實現都是完整的 1 規範(儘管當前的 ECMAScript 6 規範也定義了 clear() 方法)。

使用和限制

Weakmaps 有一個非常具體的用例,即將值映射到將來可能會消失的對象。釋放與這些對象相關的內存的能力對於使用自定義對象(如 jQuery 和 YUI)包裝 DOM 元素的 JavaScript 庫很有用。一旦實現完成並廣泛使用,可能會發現更多用例,但在短期內,如果您找不到使用弱圖的好地方,也不要難過。

在許多情況下,您可能想要使用常規地圖。 Weakmap 的局限性在於它們不可枚舉,並且您無法跟踪其中包含多少項目。也沒有辦法檢索所有鍵的列表。如果您需要此類功能,則需要使用常規地圖。如果你不這樣做,並且只打算使用對像作為鍵,那麼弱映射可能是正確的選擇。

參考

  1. WeakMaps Strawman (ECMA)

Tutorial JavaScript 教程
  1. 如何使用 javascript(文件是本地文件)從一個 HTML 文件重定向到另一個?

  2. React 中的單向數據流

  3. 使用 NextJS + Tailwind CSS + Supabase.io 構建調色板管理器 - 第 1 部分

  4. 如何將 FormData 轉換為查詢字符串

  5. 如何僅使用 JavaScript 製作數字掩碼?

  6. JSByte:Access-Control-Allow-Origin 標頭解釋

  7. 如何從 html 元素中獲取數組索引?

  1. Mongoose:查找、修改、保存

  2. React 拆分組件:一種沒有 Hooks 的函數組件的新方式

  3. 過濾塊

  4. 學習 6 個 ES6 Javascript 等效於 C# LINQ 方法

  5. 尋找最佳函數式編程後端:2021 年更新

  6. 使用 CORS Origin 標頭與 CSRF 令牌的 CSRF 保護

  7. 20分鐘材料三(添加搜索)

  1. 使用 Gitlab CI 管道構建和部署 React

  2. #jskongress 會見 #RxJS 核心團隊

  3. Set 和 MultiSet -  數據結構和算法第三部分

  4. 🤖 使用 TypeScript 和裝飾器創建您的 Discord 機器人!