我可以使用 HTML 元素作为对象键吗？答案

【问题标题】：Can I use HTML elements as Object keys?我可以使用 HTML 元素作为对象键吗？
【发布时间】：2020-05-22 14:16:17
【问题描述】：

我正在尝试创建一个以 HTML 元素为键的对象。我使用document.createElement('div') 创建密钥，但是当我尝试将两者都插入到对象中时，第二个密钥最终替换了第一个：

let a = document.createElement('div');
let b = document.createElement('div');

let obj = {};
obj[a] = 3;
obj[b] = 'x';

console.log(obj);

有没有办法在不替换任何键或值的情况下做到这一点？

【问题讨论】：

你想做什么，你的用例是什么？
您可以使用Map 代替普通对象。
面试时问我这个问题。但是，找不到答案。
面试问题到底是什么？很确定你误解了他们想要的东西。
每当一个键被添加到一个对象时，它在内部执行String(key)。 String(a) 和 String(b) 都返回 "[object HTMLDivElement]"。目前还不清楚问题是什么。您的采访是否问过我们如何使用 HTML 元素作为对象的键？

标签： javascript html dictionary object dom

【解决方案1】：

对象只能保存字符串键。您的 divs 被序列化为字符串，然后相互覆盖。如果您想将 HTML 元素作为键，您应该使用 Map，如下所示：

let a = document.createElement('div');
let b = document.createElement('div');

let map = new Map();
map.set(a, 3);
map.set(b, 'x');

// use Array.from to pretty print the result
console.log(Array.from(map));

【讨论】：

只需Array.from(map) 就足以返回条目:)

【解决方案2】：

当您使用a 在object 中创建密钥时

let a = document.createElement('div');
obj[a] = 3;

它将a 的字符串表示形式分配给object，即"[object HTMLDivElement]"

console.log(obj); // { "[object HTMLDivElement]": 3 }

所以当你分配b

obj[b] = 'x';

你真正想说的是

obj["[object HTMLDivElement]"] = 'x'

并且"[object HTMLDivElement]" 已经存在于对象中，因此它为其分配了'x' 的新值

console.log(obj); // { "[object HTMLDivElement]": "x" }

【讨论】：

我知道但是，我想要任何替代方法所以，我可以达到结果。
你显然不知道。如果您知道这一点，那么您就不会尝试将此作为解决方案。如果您想要替代look at the following answer。