在 JavaScript 中使用元素作为哈希的键答案

【问题标题】：Using an Element as the key to a Hash in JavaScript在 JavaScript 中使用元素作为哈希的键
【发布时间】：2013-06-20 08:28:43
【问题描述】：

我想创建一个以 DOM 元素为键的散列。以下代码说明了这一点：

var hash = {};
var set = function(element, value) {  hash[element] = value; };
var get = function(element)        {  return hash[element];  };

set(document.getElementById('foo'), 'bar');
get(document.getElementById('foo')); // returns 'bar'

如何确保哈希映射到每个 Element 的唯一值？
请注意，我不能使用原始 ID 字符串作为键，因为可以传入任意的 Element，包括那些没有 id 的。

【问题讨论】：

既然可以直接使用id，为什么还要document.getElementById？
@KarolyHorvath 抱歉，这是一个简化的示例，我确实需要关闭元素。
您可能需要检查this thread on unique arrays
@KarolyHorvath 你是什么意思？
@GriffLab 许多 DOM 节点没有“id”属性，因此这些节点不能由它们的 id 字符串唯一标识。 OP 希望能够使用任何 DOM 节点作为键。

标签： javascript hashmap weakmap

【解决方案1】：

在 ES 6 之前的 JavaScript 中，只有字符串可以用作键。如果你想使用 DOM 元素，要么使用两个链表，要么使用 WeakMap 对象。后一种方法的一个好处是它不会导致内存泄漏。

应用于您的示例：

var hash = new WeakMap();
hash.set(document.getElementById('foo'), 'bar');
hash.get(document.getElementById('foo')); // returns 'bar'

在撰写本文时，WeakMap 仅受以下浏览器支持：

火狐6
Chrome 19（默认禁用，参见instructions to enable）
Opera 15（默认禁用，使用--js-flags=--harmony启动Opera即可启用）。
Internet Explorer 11 (confirmed to exist in leaked build)

在所有其他浏览器中，可以通过加载 WeakMap.js polyfill 来实现对 WeakMap 的支持。

【讨论】：

"由于该技术的规范尚未稳定，请查看兼容性表以了解在各种浏览器中的使用情况。另请注意，实验技术的语法和行为可能会在未来版本的浏览器中发生变化随着规格的变化。”
@gdoron 可以使用 polyfill，例如 Weakmap.js，以防您担心浏览器兼容性。
“后一种方法的好处是它不会导致内存泄漏。”在这种情况下，我认为 OP 应该只使用常规地图。