与我一起工作时，WeakMap我遇到了一个令人费解的场景：假设我有一个 DOM 节点，其中包含一些我想要存储的数据，我WeakMap使用元素/节点本身作为键将其存储在 a 中，并将任意数据作为价值。
在存储和检索条目之间WeakMap，DOM 节点发生了变化：比如说，它的id属性被更新了。我希望由于节点已经变异，它将返回，但它仍然以某种方式返回它.get(<Node>)。undefined
但是，当我销毁 DOM 树中的节点并重新渲染它时——即使不更改它的任何属性或属性——它现在在WeakMap存储它时也被认为是一个新元素。
我的问题是：为什么要更改用作存储任意数据的键的 DOM 节点 in WeakMap，而不是 return undefined？这是一个概念验证示例，其中包含重现行为的说明：
- 点击“存储元素”
- 单击“检索元素”以验证该元素确实存储在
WeakMap - 单击“变异元素”。该元素应
id更新其属性。 - 点击“检索元素”：即使元素发生了变异，它仍然可以检索到与原始元素设置的值。
- 单击“销毁并重新创建元素”。节点从 DOM 中移除，并
outerHTML用于创建外观相同的元素。 - 单击“检索元素”：
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>