Question

我试图通过迭代输入从表单中的多个输入字段中收集值，然后将它们作为键/值对存储在对象数组中。但是，我正在努力寻找一种有效的方法，如果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，name或自定义数据属性）动态设置键值。

Answer 1

您可以将括号表示法用作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 2

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

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

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

Answer 3

具体是Array.reduce()函数的用途：

＆＃13;

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)
});

＆＃13;

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

＆＃13;

Answer 4

您可以在一个表达式中执行此操作：

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

如果您想要输入中的值（正如您在文中所说），则表达式右侧需要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 5

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

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

＆＃13;

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)
});

＆＃13;

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

＆＃13;

Answer 6

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

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

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

只是众多选择中的一个。

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

6 个答案: