HTMLフォームがある場合、入力されたデータは、FormDataインスタンスから作成されたオブジェクトに保存される場合があります。

この記事では、FormDataコンストラクターから作成されたオブジェクトを検査する方法を見ていきます。

for-ofループとエントリメソッド

for-ofループを使用して、FormDataインスタンスのキーと値のペアをループし、それらの値を検査できます。

キーと値のペアを取得するにentriesは、FormDataインスタンスのメソッドを使用して、配列内のキーと値のペアを返します。

たとえば、次のように書くことができます。

const formData = new FormData();
formData.append('key1', 'value1');
formData.append('key2', 'value2');
for (const [key, value] of formData.entries()) {
  console.log(key, value);
}

key1 value1
key2 value2

次にappend、キーと値をそれぞれ使用して呼び出し、エントリをformDataオブジェクトに追加します。

次に、を呼び出しformData.entriesて、配列内のキーと値のペアを持つ配列を返します。

for-ofループでは、キーと値のペアを非構造化し、を使用してログに記録しますconsole.log。

エントリを省略しますメソッド

は反復可能なオブジェクトであるentriesため、メソッドは省略できformDataます。

キーと値のペアを返すイテレータがあります。

したがって、次のように短縮できます。

const formData = new FormData();
formData.append('key1', 'value1');
formData.append('key2', 'value2');
for (const [key, value] of formData) {
  console.log(key, value);
}

また、を使用Object.fromEntriesして、簡単に検査できるオブジェクトにキーと値のペアを取得することもできます。

これが機能するのは、FormDataインスタンスにキーと値のペアの配列を配列で返すイテレータがあるためです。

たとえば、次のように書くことができます。

const formData = new FormData();
formData.append('key1', 'value1');
formData.append('key2', 'value2');
console.log(Object.fromEntries(formData))

{key1: "value1", key2: "value2"}

応答コンストラクターの使用

我々は使用することができますResponse変換するには、コンストラクタをFormData、我々は簡単に検査することができますテキストにインスタンスを。

たとえば、次のように書くことができます。

const formData = new FormData();
formData.append('key1', 'value1');
formData.append('key2', 'value2');
(async () => {
  const text = await new Response(formData).text()
  console.log(text)
})()

次にtext、次のようなものです。

------WebKitFormBoundaryzCHPG30oZJEPIn1B
Content-Disposition: form-data; name="key1"
value1
------WebKitFormBoundaryzCHPG30oZJEPIn1B
Content-Disposition: form-data; name="key2"
value2
------WebKitFormBoundaryzCHPG30oZJEPIn1B--

結論

FormDataインスタンスを検査する方法はいくつかあります。

これは反復可能なオブジェクトなので、for-ofループを使用できます。

また、Responseインスタンスに変換し、textメソッドを使用して検査することもできます。

plainenglish.ioのその他のコンテンツ