如何高效遍历表单输入并将值收集为对象数组中的键值对？

嘿，这个问题我太熟了——表单数据收集确实很容易写得臃肿，你的方括号动态设置键的思路已经找对方向了！下面分享几个更高效、更简洁的实现方式，帮你彻底告别冗余的if/else或switch语句：

1. 用data-*属性自定义键名（灵活可控） #

如果你的表单字段的name属性和最终需要的键名不一致，直接给HTML元素加自定义的data-key属性来指定键名，遍历的时候直接读取这个属性即可，完全不用条件判断：

<form id="profileForm">
  <input type="text" name="full_name" data-key="username" value="Frederick">
  <input type="email" name="email_addr" data-key="email" value="frederick@example.com">
  <input type="number" name="user_age" data-key="age" value="28">
</form>

const form = document.getElementById('profileForm');
const formData = Array.from(form.querySelectorAll('input, select, textarea')).reduce((acc, field) => {
  // 优先用data-key，没有的话 fallback到name属性
  const key = field.dataset.key || field.name;
  // 处理复选框的布尔值
  acc[key] = field.type === 'checkbox' ? field.checked : field.value;
  return acc;
}, {});

// 最终结果：{ username: "Frederick", email: "frederick@example.com", age: "28" }

2. 利用原生FormData API（最省心的原生方案） #

浏览器原生的FormData已经帮你完成了表单字段的遍历，你只需要把它转换成普通对象就行，代码量极少：

const form = document.getElementById('profileForm');
const rawFormData = new FormData(form);

// 直接转成普通对象
const basicData = Object.fromEntries(rawFormData.entries());

// 如果需要处理类型转换（比如数字、布尔值），加一层映射即可
const typedData = Object.fromEntries(
  Array.from(rawFormData.entries()).map(([key, value]) => {
    switch(key) {
      case 'age':
        return [key, Number(value)];
      case 'subscribe':
        return [key, value === 'on'];
      default:
        return [key, value];
    }
  })
);

这里的switch只处理类型转换，比判断每个字段要简洁得多，而且核心遍历逻辑完全不用自己写。

3. 用命名约定构建嵌套对象（适合复杂表单） #

如果需要收集成嵌套结构的对象，可以给表单字段的name属性用点分隔符（比如user.name、user.contact.phone），然后通过reduce构建嵌套对象：

const form = document.getElementById('complexForm');
const rawFormData = new FormData(form);

const nestedData = Array.from(rawFormData.entries()).reduce((acc, [key, value]) => {
  const keySegments = key.split('.');
  let currentLevel = acc;
  
  keySegments.forEach((segment, index) => {
    if (index === keySegments.length - 1) {
      currentLevel[segment] = value;
    } else {
      currentLevel[segment] = currentLevel[segment] || {};
      currentLevel = currentLevel[segment];
    }
  });
  
  return acc;
}, {});

// 输入name="user.name"和name="user.contact.phone"的话，结果会是：
// { user: { name: "Frederick", contact: { phone: "123456789" } } }

4. 借助工具库简化（比如Lodash） #

如果你的项目已经引入了Lodash，用它的_.set方法可以一行搞定嵌套对象的构建，超级简洁：

import _ from 'lodash';

const form = document.getElementById('complexForm');
const rawFormData = new FormData(form);
const nestedData = {};

Array.from(rawFormData.entries()).forEach(([key, value]) => {
  _.set(nestedData, key, value);
});

这些方案的核心都是利用原生能力、自定义属性或命名约定来动态映射键值，完全避免了针对每个字段写if/else的冗余代码，既高效又易维护。

内容的提问来源于stack exchange，提问作者Frederick M. Rogers