将data-*属性转换为对象

Question

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

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

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

由于HTMLElement.dataset返回a 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

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

Answer 3

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

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

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