dataset是domstringmap，不继承object.prototype，故object.keys()等无法遍历；需用array.from(elem.attributes)过滤或object.fromentries()转换；键名自动转小驼峰，含数字或大写时须用getattribute()。
用 dataset 遍历时为什么拿不到键值？
因为 dataset 是 DOMStringMap，不是普通对象，Object.keys()、for...in 甚至 Object.entries() 都会返回空——它不继承 Object.prototype。直接打印 console.log(elem.dataset) 能看到属性，但不能用常规对象方法遍历。
正确做法是转成真数组再操作：
- 兼容性最广：用
Array.from(elem.attributes)过滤出以data-开头的属性 - 现代浏览器（Chrome 84+ / Firefox 68+ / Safari 14.1+）可用：
Object.fromEntries(Array.from(elem.dataset, ([k, v]) => [k, v])) - 别写
for (let k in elem.dataset)——可能遍历到原型方法，也可能啥也不返回
dataset 和 getAttribute() 该选哪个？
看你要不要“自动转换”和“类型控制”：
- 要自动转小驼峰（
data-user-id→userId）、语义清晰、且属性名纯小写+连字符 → 用elem.dataset.userId - 要原始字符串（比如
data-api-key、data-item-2-id、data-URL），或需兼容 IE11 → 必须用elem.getAttribute('data-api-key') -
dataset对含数字的键名支持差：data-item-2-id在 dataset 中无法变成item2Id（浏览器不转换数字后的连字符），访问结果是undefined
批量提取多个元素的同一 data- 值怎么写才不翻车？
比如取所有 .card 元素的 data-id，组成字符串数组：
- ✅ 推荐写法：
Array.from(document.querySelectorAll('.card'), el => el.dataset.id) - ⚠️ 别写成
Array.from(el.dataset.id)——这会把字符串 "100" 拆成["1", "0", "0"] - ⚠️ 缺失
data-id的元素会返回undefined，需要过滤：.filter(id => id != null && id !== '') - 如果属性名不规整（如含大写、数字、下划线），统一改用
el.getAttribute('data-xxx')替代el.dataset.xxx
判断 data- 属性是否存在，别用 == null
elem.dataset.flag 是空字符串 ""（当 HTML 写成 <div data-flag></div>），不是 null 或 undefined；只有属性根本没声明时才是 undefined。
- ✅ 正确判断存在：
'flag' in elem.dataset或elem.hasAttribute('data-flag') - ❌ 错误写法：
elem.dataset.flag != null——空字符串也会被当成“存在但假值” - 需要布尔语义时，建议显式约定：
elem.dataset.flag === 'true'，而不是!!elem.dataset.flag - 数值要用
Number(elem.dataset.count)或一元加号+elem.dataset.count，它不会自动转类型
data-active="false"，JS 里拿到的仍是字符串 "false"，不是布尔值。别指望它自动解析，也别在命名时混用数字和大小写——那不是“写法问题”，是浏览器根本不认。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
