dataset 属性用于读写 HTML 的 data-* 自定义属性，自动转连字符为驼峰命名（如 data-user-id → userId），但值恒为字符串需手动转换，适用于轻量静态 UI 数据，不适用于敏感信息或高频更新场景。
JavaScript 的 dataset 属性用于读写 HTML 元素上的自定义 data-* 属性，是实现 DOM 与数据轻量绑定的常用方式。它自动将连字符命名（如 data-user-id）转为驼峰命名（userId），但需注意命名规则、类型限制和兼容性细节。
dataset 的命名转换规则与读写方式
dataset 不是直接映射属性名，而是按特定规则规范化键名：
- 去掉
data-前缀 - 连字符（
-）后字母转大写，形成驼峰式（如data-order-id→orderId） - 连续多个连字符或下划线会被统一处理（
data-user-name-v2→userNameV2） - 纯数字开头的键名不可用（
data-1id无效，浏览器会忽略）
读取时直接访问：element.dataset.userId；写入也支持赋值：element.dataset.userId = "123"，会自动同步到 DOM 属性中。
dataset 存储的数据始终是字符串类型
无论你在 HTML 中写 data-count="42" 还是 data-active="true"，通过 dataset.count 或 dataset.active 读出的都是字符串，不是数字或布尔值。
立即学习“Java免费学习笔记（深入）”；
- 需手动转换：+dataset.count、Boolean(dataset.active)、JSON.parse(dataset.config) 等
- 避免误判：if (element.dataset.enabled === "true") 而非 if (element.dataset.enabled)
- 复杂结构建议用
JSON.stringify()存入再解析，但不宜存储大量或嵌套过深的数据
适用场景与使用边界
dataset 适合传递轻量、静态、与 UI 强相关的上下文信息，例如：
- 列表项的唯一标识：
<li data-item-id="567"> - 组件配置开关：
<div data-theme="dark" data-auto-save="true"> <li>埋点所需业务字段：<code><button data-event-name="checkout_click" data-step="payment"></button> - 敏感信息（会暴露在 HTML 源码中）
- 频繁更新的大块数据（性能开销高于普通 JS 对象）
- 需要响应式更新的动态状态（应配合 state 管理，而非依赖 dataset 同步）
- 获取全部自定义属性：用
element.attributes过滤以data-开头的项 - 批量设置：可封装工具函数，自动做驼峰转换与字符串化
- 框架中（如 Vue/React）优先使用 props 或 data 属性，仅在需要跨框架交互或服务端渲染打标时才用 dataset
不推荐用于：
兼容性与替代方案提示
dataset 在 IE11+ 和所有现代浏览器中均受支持。若需兼容 IE9–IE10，可用 getAttribute('data-xxx') 和 setAttribute('data-xxx', value) 手动处理。
