将data- *属性转换为对象

Question

我正在玩HTML5的attr-data- *属性和相应的javascript 数据集

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

<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 。 纠正原始问题中的拼写错误以反映这一点。

Answer 1

您可以使用Object.assign

Object.assign({}, element.dataset) 

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

Answer 2

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

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

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

Answer 3

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

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;
}

从中获取 ： 使用javascript / jQuery获取data- *属性列表

Answer 4

在es6中你可以使用对象传播。
{ ...element.dataset }