将 data-* 属性转换为对象答案

【问题标题】：Converting data-* attributes to an object将 data-* 属性转换为对象
【发布时间】：2014-07-05 08:45:32
【问题描述】：

我在玩 HTML5 的 attr-data-* 属性和相应的 javascript dataset

我正在做很多动态表单处理，所以我最终得到了这样的东西：

<input data-feaux="bar" data-fizz="buzz"/>

由于HTMLElement.dataset 返回DOM string map，我能弄清楚如何将其转换为本机对象的唯一方法是：

var obj = JSON.parse(JSON.stringify(input_el.dataset))

有没有更好的方法来做到这一点？

编辑：

我为什么要这样做？假设我有很多很多这些元素。我想遍历它们并将它们推入一个数组以便稍后处理，即

elements = document.querySelectorAll("input")
my_data_array = []
for(var i = 0; i < elements.length; i++) {
    my_data_array.push(elements[i].dataset)
}

现在我有一个对象数组，即我可以使用的 [{feaux: "bar", fizz:"buzz"}....]。

但是，当我不将 DOM string map 转换为对象时，不会填充数组（即上面的代码不起作用）

编辑 2

仔细看，实际上是DOM string map，而不是object。更正原始问题中的拼写错误以反映这一点。

【问题讨论】：

它已经是一个对象。为什么你希望它是原生的？
@cookiemonster 因为DOM string object 不喜欢被推入一个数组并且我松开了钥匙；我已经编辑了我的问题以举个例子
在什么浏览器中不起作用？在 Firefox 中对我来说效果很好。 ...也可以在 Chrome 中使用。
...无论如何，如果你想存储 dataset 对象，你也可以存储元素本身，因为存储 dataset 将保留对元素的引用，因为 @ 987654335@ 依赖于元素来工作。
@cookiemonster 是的，我可以让它在 Chrome 的控制台中工作，但出于某种原因从脚本文件加载它或使用无头网络浏览器运行它，DOM string maps 不要走正确进入阵列。我要做更多的测试；这可能是更高层的错误：P

标签： javascript html data-binding

【解决方案1】：

这是一个将元素数据集作为普通对象检索的小函数：

function datasetToObject(elem){
    var data = {};
    [].forEach.call(elem.attributes, function(attr) {
        if (/^data-/.test(attr.name)) {
            var camelCaseName = attr.name.substr(5).replace(/-(.)/g, function ($0, $1) {
                return $1.toUpperCase();
            });
            data[camelCaseName] = attr.value;
        }
    });
    return data;
}

取自： Get list of data-* attributes using javascript / jQuery

【讨论】：

【解决方案2】：

您可以使用Object.assign

Object.assign({}, element.dataset)

对于不支持 Object.assign 的浏览器，您可以使用 polyfill

【讨论】：

在最新的 Safari 上这不起作用。返回始终为空 {} 因此您需要先将数据集转换为普通对象。
刚刚被这个咬了。 Safari 9.x 失败。 Safari 10.x + 有效。

【解决方案3】：

不要忘记 JSON.stringify 和 JSON.parse。

var data = document.getElementById('someElement').dataset;
data = JSON.parse(JSON.stringify(data));

根据Mozilla，这应该可以在没有 polyfill 的情况下一直使用到 IE 8。

【讨论】：

【解决方案4】：

在 es6 中可以使用对象展开。
{ ...element.dataset }

【讨论】：