在 Web 开发中，我们经常需要在 HTML 元素中存储一些自定义的数据，比如用户 ID、商品价格等等。为了方便取用这些数据，我们可以使用 data-attribute 自定义数据属性。在 ECMAScript 2020 中，我们可以更加方便地创建和操作这些自定义数据属性。
创建 data-attribute
在 HTML 中，我们可以使用 data-* 的格式来定义自定义数据属性。比如：
---- ----------------------------
在 JavaScript 中，我们可以使用 dataset 属性来访问这些自定义数据属性。比如：
----- --- - ------------------------------ ----- ------ - ------------------- -------------------- -- -- ------
在 ECMAScript 2020 中，我们可以使用 Reflect.set() 方法来更加方便地创建和设置自定义数据属性。比如：
----- --- - ------------------------------ ------------------------ --------- ---------- -------------------------------- -- -- ------
删除 data-attribute
在 HTML 中，我们可以使用 removeAttribute() 方法来删除自定义数据属性。比如：
---- ----------------------------
----- --- - ------------------------------ ------------------------------------
在 JavaScript 中，我们可以使用 delete 操作符来删除自定义数据属性。比如：
----- --- - ------------------------------ ------ -------------------
在 ECMAScript 2020 中，我们也可以使用 Reflect.deleteProperty() 方法来删除自定义数据属性。比如：
----- --- - ------------------------------ ----------------------------------- ----------
注意事项
- 自定义数据属性的名称必须以 data- 开头，否则可能会与 HTML 中的标准属性冲突。
- 自定义数据属性的值只能是字符串，如果需要存储复杂数据类型，可以使用 JSON.stringify() 和 JSON.parse() 方法进行转换。
- 自定义数据属性的名称不区分大小写，但是推荐使用小写字母的方式。
总结
在 ECMAScript 2020 中，我们可以使用 Reflect.set() 和 Reflect.deleteProperty() 方法更加方便地创建和操作自定义数据属性。使用自定义数据属性可以方便地在 HTML 元素中存储和取用自定义数据。需要注意的是，自定义数据属性的名称必须以 data- 开头，值只能是字符串，名称不区分大小写。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65fc482bd10417a2227c3672