如何将表单字段转换为指定格式的JSON数组以调用API？

你需要的是一个包含多个{name:..., value:...}对象的数组，之前的代码错误地用对象作为reduce的累加器，导致每次都会覆盖name和value属性，最终只保留最后一个元素的数据。这里提供两种简单的修复方案：

方案一：使用map（更直观简洁） #

直接在过滤后把每个表单元素映射成目标格式的对象，这是最适配当前场景的写法：

const formObject = Array.from(formElement.elements)
  .filter(element => element.type !== 'submit')
  .map(element => ({ name: element.name, value: element.value }));

方案二：修正reduce的写法 #

如果一定要用reduce，需要把累加器初始化为数组，每次向数组中添加新的对象：

const formObject = Array.from(formElement.elements)
  .filter(element => element.type !== 'submit')
  .reduce((accumulator, element) => {
    accumulator.push({ name: element.name, value: element.value });
    return accumulator;
  }, []); // 初始值设为空数组，而非空对象

额外优化 #

如果表单里存在没有name属性的元素（比如纯展示用的输入框），可以在过滤条件里加上判断，避免生成无效对象：

.filter(element => element.type !== 'submit' && element.name)

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