JavaScript - 迭代表单输入并收集值作为对象中的键值对

Question

我试图通过迭代输入来从表单中的多个输入字段收集值，然后将它们作为键/值对存储在对象数组中。然而，我正在努力寻找一种有效的方法来执行此操作，该方法不涉及长集 if if else 或 switch 语句。

概念：

<form>
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
</form>

我想避免的：

var inputs = document.querySelectorAll('input');    

for (var i = 0; i < inputs.length; i++) {
  var myObject = {};

  if (i = 0) {
    myObject.val0 = inputs[i];
  } else if (i = 1) {
    myObject.val1 = inputs[i];
  } else if (i = 2) {
    myObject.val2 = inputs[i];
  } else if (i = 3) {
    myObject.val3 = inputs[i];
  } 

}

关于如何更有效地完成此操作有什么建议吗？我的一个想法是使用括号表示法根据现有的 html 元素属性（可能是 id、名称或自定义数据属性）动态设置键值。

Answer 1

为每个输入字段添加唯一的值id（为其提供对象的键）。

<form>
  <input id="firstName" type="text">
  <input id="lastName" type="text">
  <input id="email" type="email">
  <input id="number" type="text">
</form>

现在将 id 保存为键，将值保存为值：

var inputs = document.querySelectorAll('input');    
var myObject = {};

for (var i = 0; i < inputs.length; i++) {
  myObject[inputs[i].id] = inputs[i].value;
}

console.log(myObject) // {firstName: "", lastName: "", email: "", number: ""}

将其全部转换为一个函数，通过以下形式执行此操作：

function getFormValues(formId) {
    var inputs = document.querySelectorAll('#' + formId + ' input');    
    var formValues = {};

    for (var i = 0; i < inputs.length; i++) {
      formValues[inputs[i].id] = inputs[i].value;
    }

    return formValues;
}

全部一起：

<form id="registerForm">
  <input id="firstName" type="text">
  <input id="lastName" type="text">
  <input id="email" type="email">
  <input id="number" type="text">
</form>

getFormValues('registerForm'); // {firstName: "", lastName: "", email: "", number: ""}

现在您可以进一步扩展该函数，以便它处理数组值等。