javascript - 在 WeakMap 中使用 DOM 节点作为键

Question

使用 WeakMap 时我遇到了一个令我感到非常困惑的场景:假设我有一个 DOM 节点，其中包含一些我想存储的数据，我将其存储在 WeakMap 中。使用元素/节点本身作为键，任意数据作为值。

在存储和检索来自 WeakMap 的条目之间，DOM 节点发生了变化:比方说，它是 id属性已更新。我希望 .get(<Node>)将返回 undefined因为节点已经发生了变化，但它仍然以某种方式返回它。

但是，当我销毁 DOM 树中的节点并重新呈现它时——即使不更改其任何属性或特性——它现在被视为 WeakMap 中的新元素|存放时。

我的问题是:为什么在 WeakMap 中更改用作存储任意数据的键的 DOM 节点？ , 不返回 undefined ？这是一个概念验证示例，其中包含重现该行为的说明:

1. 点击“商店元素”
2. 单击“检索元素”以验证该元素确实存储在 WeakMap 中
3. 点击“改变元素”。该元素应该有它的 id属性已更新。
4. 点击“取回元素”:即使元素发生了变异，仍然可以取回原始元素设置的值。
5. 点击“销毁并重新创建元素”。 Node 从 DOM 中移除，它的 outerHTML用于创建外观相同的元素。
6. 点击“检索元素”:WeakMap正确报告未找到任何内容，因为我们使用全新的 DOM 节点作为键。

const map = new WeakMap();

// Store element in WeakMap
document.getElementById('set').addEventListener('click', () => {
  const el = document.querySelector('#content > div');
  map.set(el, el.outerHTML);
  console.log('Element stored in WeakMap');
});

// Retrieve element from WeakMap
document.getElementById('get').addEventListener('click', () => {
  const el = document.querySelector('#content > div');
  const elHTML = map.get(el);
  if (elHTML)
    console.log(`Element found in WeakMap, it's data: ${elHTML}`);
  else
    console.log('Element not found in Weakmap!');
});

// Mutate the DOM node, let's say by giving it a new unique ID
let n = 0;
document.getElementById('mutate').addEventListener('click', () => {
  document.querySelector('#content > div').id = `test${n}`;
  console.log(`Element ID updated to: "test${n}"`);
  n++;
});

// Destroy and recreate element
document.getElementById('destroy_and_recreate').addEventListener('click', () => {
  const target = document.querySelector('#content > div');
  const targetHTML = target.outerHTML;
  target.remove();
  document.getElementById('content').innerHTML = targetHTML;
  console.log('Element destroyed and recreated');
});

<section id="content">
  <div id="test">Lorem ipsum dolor sit amet</div>
</section>
<hr />
<button type="button" id="set">Store element</button>
<button type="button" id="get">Retrieve element</button>
<hr />
<button type="button" id="mutate">Mutate element</button>
<button type="button" id="destroy_and_recreate">Destroy and recreate element</button>

Answer 1

同样的道理 {} !== {};两个对象是否具有相同的属性并不重要，或者如果它们被更改了，重要的只是它们是否实际上是同一个对象——从技术上讲，是内存中的相同位置。如果您想按属性和值比较对象，请使用像 Lodash 中的深度相等函数。