Question

与this SO question类似，我想将HTML节点用作对象（不是数组）中的键。

示例：

var _hotspots = {
                 [object HTMLDivElement] : { someProps:[1,2,3] },
                 [object HTMLDivElement] : { someProps:[1,2,3] }
                }

所以我可能会做到这样的事情：

for( var a in _hotspots ){
    if(YAHOO.lang.hasOwnProperty(_hotspots, a)){
    alert('key nodeName: '+a.nodeName);
    }
}

到目前为止，当我警告上面的'a'时，它会警告它实际上是[对象HTMLDivElement]，所以一切看起来都很好 - 但是我无法访问'a'上的属性，比如nodeName。

我正在做什么？这是错的吗？如果我应该能够访问对象的关键引用上的属性，请告诉我，我会写一个示例页面。

欢呼声。

Answer 1

JavaScript对象的键始终是字符。您可以将id存储为键，然后在函数中检索元素。

Answer 2

你可以使用我自己的jshashtable，它接受任何对象作为键，但如果你的所有元素都是id不是问题，那么我建议使用带元素的对象ID作为键，因为这将是最简单，最高效的解决方案。

Answer 3

现在可以使用 Map 或 Set 对象执行此操作，但是如果您想存储键值对（例如常规对象），则 Map 更合适。

您仍然可以将节点添加为常规对象的键，但问题是节点被转换为字符串，因为对象只能将键存储为字符串，这意味着对象无法区分具有相同属性的唯一节点/结构。

Map 之所以有效，是因为它的键可以是任何值，包括函数、对象或任何原语。

const divEl1 = document.querySelectorAll("div")[0];
const divEl2 = document.querySelectorAll("div")[1];

const obj = {};
const map = new Map();

obj[divEl1] = divEl1.getBoundingClientRect();
map.set(divEl1, divEl1.getBoundingClientRect());

console.log("Object: is divEl1? ", !!obj[divEl2]);
console.log("Map: is divEl1? ", map.has(divEl2));
console.log("Map: get divEl1 bounding properties", map.get(divEl1));

<body>
  <div class="foo" data-some-id="1">I am a <span>div</span></div>
  <div class="foo" data-some-id="1">I am a <span>div</span></div>
</body>

将HTML节点存储为对象中的键

3 个答案:

将HTML节点存储为*对象中的键*

3 个答案:

将HTML节点存储为对象中的键