如何使用 JavaScript 从 html 输入数组中获取值？

在前端开发中，经常需要从 HTML 输入数组中获取值。本文将介绍如何使用 JavaScript 从 HTML 输入数组中获取值。

HTML 中输入数组

在 HTML 中，我们可以使用以下代码创建一个输入数组：

<input type="text" name="myArray[]" />
<input type="text" name="myArray[]" />
<input type="text" name="myArray[]" />

这个输入数组包含了三个输入框，它们的 name 属性相同且名为 "myArray[]"。输入数组可以用于收集多个值，这些值可以通过 JavaScript 获取并使用。

使用 JavaScript 获取 input 数组值

我们可以使用一系列的 JavaScript 操作来获取输入数组的值。最简单的方法是使用 getElementsByTagName() 函数获取所有的 input 输入框，并使用 for 循环来遍历它们。代码如下：

var inputs = document.getElementsByTagName('input');
var values = [];
for (var i = 0; i < inputs.length; ++i) {
  if (inputs[i].name == 'myArray[]') {
    values.push(inputs[i].value);
  }
}

这段代码获取了所有 input 输入框，并使用 for 循环遍历它们。如果输入框的 name 属性与 "myArray[]" 相同，则将它们的值添加到 values 数组中。最终，我们可以使用 values 数组来处理输入数组中的所有值。

改进 JavaScript 代码

上面的代码虽然可以让我们获取 input 数组中的值，但是它存在一些问题：

• 在 for 循环中，我们使用了 inputs[i].name 来比较输入框的名称，但这样会缓慢，并且不够优雅。
• 我们只能在 for 循环之外访问 values 数组，这可能会使代码变得混乱。

下面的完整代码解决了这些问题：

var values = Array.prototype.filter.call(
  document.getElementsByName('myArray[]'),
  function(input) {
    return input.value !== '';
  }
).map(function(input) {
  return input.value;
});

这段代码使用 filter() 函数和 map() 函数来获取输入数组中的值：

• filter() 函数遍历名称为 "myArray[]" 的输入框，并返回一个数组，该数组包含那些输入框值不为空的元素。
• map() 函数遍历这个新的输出数组（由 filter() 函数返回）并提取它们的值。

这个改进的代码更短、更快，也更具可读性。

扩展

在本文中，我们介绍了如何使用 JavaScript 从 HTML 输入数组中获取值。我们了解了常见问题并提供了优化的解决方案。这个技巧可以帮助你在前端开发中更好地处理输入数组的值。