javascript - 将 data-* 属性转换为对象

Question

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

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

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

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

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 字符串映射 转换为对象时，数组不会被填充(即上面的代码不起作用)

编辑2

仔细一看，其实是一个DOM字符串映射，而不是一个对象。更正原始问题中的拼写错误以反射(reflect)这一点。

Answer 1

您可以使用 Object.assign

Object.assign({}, element.dataset) 

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