使用reduce方法处理FormData后输出空对象的问题求助

你遇到的核心问题是**Object.entries()无法正确处理FormData对象**。FormData是特殊的迭代器对象，并非普通键值对对象，Object.entries(formData)会返回空数组，后续reduce操作自然只能得到初始的空对象。

解决方案1：直接迭代FormData对象修改reduce代码 #

FormData本身支持迭代，每次迭代返回[key, value]格式的数组，因此可以直接用Array.from(formData)替代Array.from(Object.entries(formData))：

var form = document.getElementById('todo-form');
form.addEventListener('submit', function(e) {
  e.preventDefault();
  var formData = new FormData(this);
  // 直接迭代FormData，无需Object.entries
  var todo = Array.from(formData).reduce((map, [key, value]) => ({
    ...map,
    [key]: value
  }), {})
  console.log(todo);
})

解决方案2：用forEach构建对象（更直观） #

如果不需要依赖reduce，FormData的forEach方法可以更直接地构建目标对象：

var form = document.getElementById('todo-form');
form.addEventListener('submit', function(e) {
  e.preventDefault();
  var formData = new FormData(this);
  var todo = {};
  formData.forEach((value, key) => {
    todo[key] = value;
  });
  console.log(todo);
})

解决方案3：使用Object.fromEntries（最简洁，ES2019+） #

ES2019及以上版本提供了Object.fromEntries()方法，可直接将FormData这类键值对迭代器转换成普通对象，代码最简洁：

var form = document.getElementById('todo-form');
form.addEventListener('submit', function(e) {
  e.preventDefault();
  var formData = new FormData(this);
  var todo = Object.fromEntries(formData);
  console.log(todo);
})

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