dataset 是 HTMLElement 的只读代理接口，无法用 Object.assign() 或展开运算符拷贝；正确浅拷贝需用 Object.fromEntries(Object.entries(el.dataset)) 获取键值快照，修改后须显式写回 dataset 或 setAttribute 才能同步 DOM。
在 JavaScript 中，dataset 是 HTMLElement 的只读属性，返回一个 DOMStringMap 对象，它本身不是普通对象，不能直接用 Object.assign() 或展开运算符进行“浅拷贝”并期望后续修改影响原元素。所谓“浅拷贝在 dataset 中正确生效”，关键在于：你拷贝的是 当前 dataset 的键值快照，而非对 dataset 本身的响应式引用；要让 DOM 属性同步更新，必须显式写回元素的 data-* 属性。
dataset 本质不是可变对象，而是代理接口
dataset 是浏览器提供的映射接口，它：
- 读取时自动将
data-user-id映射为userId（驼峰化） - 写入时反向转换，如
el.dataset.userId = "123"会设置data-user-id="123" - 它不支持
Object.assign({}, el.dataset)得到可写副本——返回的是空对象或不可靠快照（不同浏览器行为不一致）
正确获取 dataset 的浅拷贝（只读快照）
若只需一份当前数据的副本用于计算或比对，推荐用 Object.fromEntries() 配合 Object.entries()（注意兼容性）：
const el = document.getElementById('my-btn');
// ✅ 安全获取当前 dataset 的浅拷贝（plain object）
const datasetCopy = Object.fromEntries(
Object.entries(el.dataset)
);
等价写法（兼容旧浏览器）：
立即学习“Java免费学习笔记（深入）”；
const datasetCopy = {};
for (const [key, value] of Object.entries(el.dataset)) {
datasetCopy[key] = value;
}
这样得到的 datasetCopy 是普通对象，修改它不会影响 DOM，符合“浅拷贝”预期。
修改后如何让 DOM 属性同步更新？必须手动写回
拷贝只是读取，要让 DOM 反映变更，需显式赋值回 dataset 或设置 setAttribute：
- ✅ 推荐：通过
dataset赋值（自动处理连字符 ↔ 驼峰）el.dataset.userId = "456"; // → data-user-id="456" - ✅ 精确控制：用
setAttributeel.setAttribute("data-user-id", "456"); - ❌ 错误：修改
datasetCopy后不写回 → DOM 完全无变化
避免常见陷阱
以下操作看似合理，实则无效或危险：
-
const copy = {...el.dataset}—— 在多数浏览器中返回空对象（{}），因dataset不是普通可枚举对象 -
JSON.parse(JSON.stringify(el.dataset))—— 可能丢失非字符串值（dataset 所有值都是字符串），且低效 - 试图监听
dataset变化 —— 它没有事件机制，DOM 属性变更需监听DOMSubtreeModified（已废弃）或用MutationObserver监听data-*属性
