dataset键名自动转小驼峰，HTML中data-user-id对应JS中element.dataset.userId；遍历需用Array.from(elem.attributes)或Object.fromEntries，不可用Object.keys；读取值时注意空字符串与undefined区别。
dataset 键名自动转小驼峰，别用中划线原名
HTML 里写 data-user-id="123"，JS 中必须用 element.dataset.userId，不是 element.dataset['user-id']，更不能写成 element.dataset.user-id（语法错误）。浏览器强制转换，没有配置项可关。常见错误是查控制台看到 dataset 里有 userId，代码却还硬写 user-id，结果取到 undefined。
遍历 dataset 不能用 Object.keys() 或 for...in
element.dataset 是 DOMStringMap，不是普通对象，Object.keys(elem.dataset) 返回空数组，for (let k in elem.dataset) 可能遍历到原型方法或直接不触发。安全做法是：
- 兼容性最广：用
Array.from(elem.attributes).filter(attr => attr.name.startsWith('data-'))，再对每个匹配项提取attr.name.slice(5)和attr.value - 现代浏览器（Chrome 84+ / Firefox 68+）：可用
Object.fromEntries(Array.from(elem.dataset, ([k, v]) => [k, v]))转成真对象 - 千万别写
Object.entries(elem.dataset)——它在 Safari 16.6 之前完全不可用
批量读取多个元素的 data-id 时，Array.from 第二个参数别漏掉
目标是取所有 .item 元素的 data-id 值组成数组，正确写法是：
const idList = Array.from(
document.querySelectorAll('.item'),
el => el.dataset.id
);
错误写法：Array.from(document.querySelectorAll('.item')).map(el => el.dataset.id) 也能跑，但多一次遍历；更危险的是误写成 Array.from(element.dataset.id)——这会把字符串 "100" 拆成 ["1", "0", "0"]。
立即学习“前端免费学习笔记（深入）”；
注意点：
- 缺失
data-id的元素，对应项为undefined，建议后续加.filter(Boolean)或.filter(id => id != null) - 值始终是字符串，要数字就写
+el.dataset.id，要布尔就按约定判断el.dataset.active === 'true'
data 属性没赋值时值是空字符串，不是 undefined
<div data-flag></div> 和 <div data-flag=""></div> 都会让 elem.dataset.flag 返回 ""；只有 <div></div> 才让 elem.dataset.flag 是 undefined。所以判断是否存在，要用 'flag' in elem.dataset，而不是 elem.dataset.flag != null——后者对空字符串也返回 false。
这个区别在批量处理时容易被忽略：你可能想跳过“未设置 flag”的元素，结果把 data-flag 空置的也过滤掉了。
