JavaScript

Question

我试图通过迭代输入然后将它们存储为对象数组中的 key/value 对来从表单中的多个输入字段收集值。但是，我正在努力寻找一种有效的方法来执行此操作，该方法不涉及长集 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为key，value为value：

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: ""}

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

Answer 2

首先，您应该在 for 循环之外声明变量，否则您将在每次 for 循环运行时都声明。

此外，您可以使用括号表示法代替点表示法来实现这一点。

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

Answer 3

您可以使用括号表示法作为对象的 property accessor 和获取输入元素的 getElementsByTagName。

var inputs = document.getElementsByTagName('input'),
    object = {};

function setValues() {
    for (var i = 0; i < inputs.length; i++) {
        object['val' + i] = inputs[i].value;
    }
    console.log(object);
}

<form onchange="setValues()">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
</form>

Answer 4

我会这样写 Array.prototype.forEach():

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

inputs.forEach((element, index) => myObject[`val${index}`] = element)

Answer 5

这正是 Array.reduce() 函数的用途：

document.querySelector('button').addEventListener('click', function(e) {
  var inputs = document.querySelectorAll('input');    

  var obj = [].reduce.call(inputs, (accumulator, currentValue, currentIndex) => {
    accumulator[`val${currentIndex}`] = currentValue.value
    return accumulator
  }, {})
  
  console.log(obj)
});

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

Answer 6

你可以用一个表达式来完成：

var myObject = Object.assign(...
    Array.from(document.getElementsByTagName('input'), (inp, i) => ({ ['val'+i]: inp }))
);

如果您想要输入中的 values（正如您在文中所说），那么您需要 inp.value 而不是右侧的 inp表达式的一侧，或解构赋值：

var myObject = Object.assign(...Array.from(
    document.getElementsByTagName('input'), ({value}, i) => ({ ['val'+i]: value })
));

console.log(myObject);

<input value="hello">
<input value="world">

Answer 7

遍历您的元素并动态使用索引：

a[`val${i}`] = e.value;

document.querySelector('button').addEventListener('click', function(e) {
  e.preventDefault();
  
  var inputs   = document.querySelectorAll('input'),
      myObject = Array.from(inputs).reduce(function(a, e, i) {
                    a[`val${i}`] = e.value;
                    return a;
                 }, {});
                 
  console.log(myObject)
});

<form>
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <button>Click me!</button>
</form>

Answer 8

循环输入字段。可能是这样的：

    let inputList = document.getElementsByTagName('input');
    let val = 'val';

    for (let x in inputList){
       let name = val + x;
       myObj.`${name}`= inputList[x].value;
       number++;
    }

只是众多选项中的一个。

Answer 9

总结您似乎想要填充一个值数组如果我理解正确的话，这应该可以回答你的问题

var inputs = document.getElementsByTagName('input'),
    object = [];

function setValues() {
    for (var i = 0; i < inputs.length; i++) {
        object.push("val" + i + ": " + inputs[i].value );
    }
    console.log(object);
}

document.addEventListener("DOMContentLoaded", setValues(), false);

<form onchange="setValues()">
  <input type="text" value="test">
  <input type="text"  value="test22">
  <input type="text"  value="test333">
  <input type="text" value="test444">
</form>

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

JavaScript - Iterate over form inputs and collect values as key value pairs in object

for-loop

object-literal