Как получить объект из входных данных в ванильном JavaScript

Question

Например, у меня есть 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, но я получаю массив, а необъект

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

Answer 1

Вы должны использовать объект JavaScript с динамическими именами свойств:

var obj = {};
document.querySelectorAll("input").forEach(input => obj[input.name] = input.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" />

Answer 2

Вы можете просмотреть значения с помощью forEach и обновить объект.
Примечание: Можно также использовать reduce для непосредственного создания объекта

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" />

Answer 3

Используйте JavaScript объект вместо массива .Чтобы создать ключ объекта, нужно просто объявить его в скобках [] и присвоить значение.

var obj = {};
var x = document.querySelectorAll('input');
for (var i = 0; i < x.length; i++) {
  obj[x[i].name] = x[i].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"/>