如何从香草JavaScript中的输入获取对象 [英] How to get a Object from inputs in vanilla javascript

问题描述

例如，我有3个输入

<input type="text" name="color" value="blue"/>
<input type="text" name="flavor" value="acid"/>
<input type="text" name="name" value="jack"/>

我需要得到这样的东西

const obj = {color:'blue', flavor:'acid', name:'jack};

我尝试使用for循环，但是我得到了一个数组，而不是一个对象

I tried use a for loop, but i get a array, not a object

var obj = [];
var x = document.querySelectorAll('input');
for (var i = 0; i < x.length; i++) {
  obj.push(x[i].value)
}
console.log(obj);

推荐答案

您可以使用forEach遍历值并更新对象.
注意:也可以使用reduce直接创建对象

You can loop through the values using a forEach and update the object.
Note: Could also use reduce to directly create the object

const obj = {};
const inputs = document.querySelectorAll("input");
inputs.forEach(({ name, value }) => {
 obj[name] = value
})

console.log(obj);

<input type="text" name="color" value="blue" />
<input type="text" name="flavor" value="acid" />
<input type="text" name="name" value="jack" />

这篇关于如何从香草JavaScript中的输入获取对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！