dataset不能直接用object.keys()遍历，因其是domstringmap而非普通对象；正确做法是用object.fromentries(array.from(el.dataset))或遍历attributes；连字符转小驼峰仅支持纯小写字母+连字符，含数字、大写、下划线时需用getattribute；批量提取应作用于nodelist而非dataset属性值；getattribute更可靠但返回字符串，需手动类型转换。
dataset 不能直接用 Object.keys() 遍历
element.dataset 是 DOMStringMap，不是普通对象。写 Object.keys(el.dataset) 或 for (let k in el.dataset) 大概率返回空数组或遍历到原型方法，根本拿不到你写的 data- 属性。这是最常被忽略的兼容性陷阱。
正确做法是先转成真实对象：
– 现代浏览器（Chrome 84+ / Firefox 68+ / Safari 16.4+）可用：Object.fromEntries(Array.from(el.dataset, ([k, v]) => [k, v]))
– 兼容性要求高时，老老实实用：Array.from(el.attributes).filter(attr => attr.name.startsWith('data-')).reduce((acc, attr) => { acc[attr.name] = attr.value; return acc; }, {})
data-user-id → dataset.userId，但 data-item-2-id 就失效
dataset 自动把连字符转小驼峰，但只支持「全小写字母 + 连字符」组合。一旦含数字（data-item-2-id）、大写字母（data-apiKey）、下划线（data_user_id），对应键在 dataset 中就不存在，访问结果是 undefined，且不报错。
这时候必须换方式：
– 用 el.getAttribute('data-item-2-id') 直接读原始字符串
– 或用属性选择器定位：document.querySelectorAll('[data-item-2-id]')
– 别试图拼 el.dataset.item2Id —— 浏览器根本不识别这种转换
批量提取所有 data-id 值，别把 Array.from 用错位置
目标是拿到一组 .item 元素的 data-id 值组成数组，常见错误是写成：Array.from(el.dataset.id) —— 这会把单个字符串（如 "100"）拆成 ["1", "0", "0"]。
正确写法是作用于 NodeList：const idArray = Array.from(document.querySelectorAll('.item'), el => el.dataset.id).filter(id => id != null && id !== '')
注意两点：
– Array.from() 第一个参数是节点集合，第二个参数是映射函数
– dataset.id 对应 data-id，命名要匹配驼峰规则；若 HTML 是 data-user-id，这里就得写 dataset.userId
getAttribute 比 dataset 更稳，但值永远是字符串
只要不确定命名是否规范，或者需要保留原始格式（比如 data-api-key、data-1st-load），一律优先用 getAttribute()。它不转换、不猜测、不静默失败。
但代价是：所有值都是字符串，哪怕你写的是 data-count="42" 或 data-active="false"，JS 拿到的仍是 "42" 和 "false"。
需要数值就手动转：Number(el.getAttribute('data-count'))
布尔判断建议显式比对：el.getAttribute('data-active') === 'true'
空属性（<div data-flag></div>）值为 ""，不是 null；属性不存在时才返回 null
真正麻烦的不是怎么读，而是命名那一刻——HTML 里写 data-userId，浏览器自动转成 data-userid，JS 里 dataset.userid 能取到，但 dataset.userId 就不行。这种隐式标准化，往往在调试半小时后才反应过来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
