フォームからオブジェクトへ

はじめに

この実験では、JavaScript を使って一連のフォーム要素をオブジェクトに変換する方法を探ります。FormDataコンストラクタとArray.from()メソッドを使って、フォームデータの配列を作成します。その後、Array.prototype.reduce()メソッドを使って、フォームデータをオブジェクトに収集します。この実験が終わるとき、JavaScript を使ってフォームデータを収集して整理する方法をより深く理解しているでしょう。

フォームをオブジェクトに変換する

コーディングを練習するには、ターミナル/SSH を開いてnodeと入力します。以下の手順を使って、一連のフォーム要素をオブジェクトとしてエンコードできます。

1. FormDataコンストラクタを使って、HTML のformをFormDataに変換します。
2. Array.from()を使ってFormDataを配列に変換します。
3. Array.prototype.reduce()を使って配列からオブジェクトを収集します。

以下はコードの例です。

const formToObject = (form) =>
  Array.from(new FormData(form)).reduce(
    (acc, [key, value]) => ({
      ...acc,
      [key]: value
    }),
    {}
  );

特定のフォームを変換するには、formToObject関数を呼び出して、フォーム要素を引数として渡します。

formToObject(document.querySelector("#form"));
// { email: 'test@email.com', name: 'Test Name' }

まとめ

おめでとうございます！あなたはフォームからオブジェクトへの実験を完了しました。あなたの技術を向上させるために、LabEx でさらに多くの実験を練習することができます。