Trabalhando com FormData em JavaScript

Suponha que temos um formulário:

html<form action="/target/" method="POST">
  <input name="test1" value="123">
  <input name="test2" value="456">
  <input type="submit">
</form>

Suponha que queremos obter os dados deste formulário na forma de pares chave-valor. Entende-se que para isso teremos que executar um loop e nele formar o desejado. Em JavaScript, no entanto, existe uma maneira mais simples - podemos usar um objeto especial FormData, que permite obter os dados do formulário de forma ordenada.

Vamos analisar como trabalhar com este objeto. Primeiro, vamos obter uma referência ao nosso formulário:

javascriptlet form = document.querySelector('form');

Agora vamos criar um objeto com nosso formulário:

javascriptlet formData = new FormData(form);

Podemos exibir nosso objeto no console, no entanto, com essa exibição não veremos os dados do formulário:

javascriptconsole.log(formData);

Vamos converter nosso objeto em um array para ver os dados do formulário:

javascriptconsole.log(Array.from(formData));