为啥 Object.fromEntries(formData) 工作

Posted 2023-02-23

【中文标题】为啥 Object.fromEntries(formData) 工作

【英文标题】：Why does Object.fromEntries(formData) work为什么 Object.fromEntries(formData) 工作

【发布时间】：2022-01-21 01:36:30

【问题描述】：

我有一个表格。 我会在用户提交时收听。 我创建了 FormData 类的新实例。

  <form>
    <input type="text" name="username">
    <input type="submit">
  </form>

  const form = document.querySelector('form');
  form.addEventListener('submit', (e) => 
    e.preventDefault();
    const formData = new FormData(form);
  );

我知道formData.entries() 将返回一个可迭代对象，因此我可以使用for of 循环来获取对...我不明白的是为什么这确实有效：

const pairValues = Object.fromEntries(formData);

formData 是具有多个方法的类的实例。本身不是可迭代的。

Object.fromEntries 默认会查找迭代器吗？

【问题讨论】：

"本身不是可迭代的。" 你为什么认为它不是？ “Object.fromEntries 默认会查找迭代器吗？”是什么是可迭代对象 - 具有迭代器的对象。

【参考方案1】：

这是因为FormData 对象有一个Symbol.iterator 方法，这使得它可以迭代。

您可以检查并看到：

formData[Symbol.iterator] === formData.entries

它们是相同的功能。

现在Object.fromEntries(form) 接受一个可迭代对象，mdn 文档也一样：

参数

iterable

一个可迭代对象，例如 Array 或 Map 或其他实现可迭代协议的对象。

所以Object.fromEntries 将调用formData[Symbol.iterator]，这与调用formData.entries 相同。