dataset快速读取的前提是data-属性名全小写加连字符（如data-user-id），且所有值均为字符串；命名违规（如data-userid）会导致字段缺失，读取需手动类型转换，修改必须用setattribute而非直接赋值。
能用 dataset 快速读取的前提是：HTML 里写的 data- 属性名必须合规，且你接受所有值都是字符串——否则看似“快速”，实则读不到或读错。
data-* 属性名必须全小写+连字符，否则 dataset 根本不认
浏览器只解析形如 data-user-id、data-api-url 这样的命名。写成 data-userId、data_user_id、data-API-Key，DOM 解析时直接忽略，dataset 里压根不会出现对应字段。
常见错误现象：element.dataset.userId 返回 undefined，但 HTML 明明写了 data-userId="123"——根源就是命名违规，不是 JS 写错了。
- 正确写法：
data-order-status→ JS 中读作element.dataset.orderStatus - 含数字开头（如
data-2024-year）只能用方括号：element.dataset["2024Year"] - 连续连字符（如
data-foo--bar）会被转成fooBar，但语义模糊，别这么写
dataset.xxx 读取的是字符串，类型要自己转
dataset 返回的永远是字符串，哪怕你在 HTML 里写的是 data-count="42" 或 data-active="true"，拿到的仍是 "42" 和 "true"。
- 需要数值：用
Number(element.dataset.count)或一元加号+element.dataset.count - 布尔判断别用
!!element.dataset.flag，统一约定为element.dataset.flag === "true" - 空属性（如
<div data-flag></div>）值是""，不是null或undefined - 判断是否存在，用
"flag" in element.dataset，而不是element.dataset.flag != null
dataset 是只读代理，改值必须用 setAttribute
element.dataset.foo = "bar" 看似生效，其实只是操作内存副本；刷新页面后，原始 HTML 的 data-foo 值不变。
- 真正更新 DOM 属性，必须调用
element.setAttribute("data-foo", "bar") - 混用会出问题：
dataset.foo = "a"后再setAttribute("data-foo", "b")，dataset.foo仍返回"a"——因为dataset不是双向绑定 - 批量写入多个
data-属性？老老实实用多次setAttribute，别试图给dataset赋整个对象
遍历所有 data-* 属性不能直接 Object.keys(dataset)
element.dataset 是 DOMStringMap，不是普通对象，for...in、Object.keys()、Object.entries() 都拿不到它的键值对。
- 兼容性最稳的方法：
Array.from(element.attributes).filter(attr => attr.name.startsWith("data-"))，再手动提取name/value - 现代写法（Chrome 84+/Firefox 68+）：
Object.fromEntries(Array.from(element.dataset, ([k, v]) => [k, v]))，但 Safari 旧版不支持 - 别写
for (let k in element.dataset)——可能遍历到原型方法，也可能啥也不返回
最隐蔽的坑是：dataset 自动驼峰转换不可关、不可配，且对命名错误完全静默；一旦 HTML 里写错一个字母，JS 就读不到，还不会报错。所以每次读取前，先在控制台打一行 console.log(element.dataset) 确认键名，比猜半天强得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
