表单双输入框name重复，如何通过Object.fromEntries获取两者内容？

当表单中有多个同名的<input>标签时，直接用Object.fromEntries(data.entries())会导致重复键被覆盖，只保留最后一个输入框的值——这是因为对象的键具有唯一性，后出现的键值对会替换前面的。

要获取所有同名输入框的内容，需要手动处理FormData.entries()返回的迭代器，将同名值收集到数组中，具体实现如下：

通用解决方案（适配所有同名键） #

修改表单提交函数，使用Array.from()结合reduce()构建包含数组值的对象：

const formSubmit = (event) => {
  event.preventDefault();
  const data = new FormData(event.target);
  const formObject = Array.from(data.entries()).reduce((result, [key, value]) => {
    // 若键已存在，将值转为数组并追加新内容
    if (result[key]) {
      result[key] = Array.isArray(result[key]) 
        ? [...result[key], value] 
        : [result[key], value];
    } else {
      result[key] = value;
    }
    return result;
  }, {});
  console.log(formObject);
};

处理后，formObject中name对应的是一个包含两个输入框值的数组，例如：{ name: ["输入框1内容", "输入框2内容"] }。

针对特定键的简化方案 #

如果只需要处理name这一个同名键，也可以直接使用FormData.getAll()方法：

const formSubmit = (event) => {
  event.preventDefault();
  const data = new FormData(event.target);
  const formObject = {
    name: data.getAll("name")
  };
  console.log(formObject);
};

内容的提问来源于stack exchange，提问作者Fasset