Преобразовать форму в объект с помощью JavaScript

Введение

В этом практическом занятии мы изучим, как с помощью JavaScript преобразовать набор элементов формы в объект. Мы будем использовать конструктор FormData и метод Array.from() для создания массива данных формы. Затем мы будем использовать метод Array.prototype.reduce() для сбора данных формы в объект. В конце этого практического занятия у вас будет лучше понимание, как собирать и организовывать данные формы с использованием JavaScript.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("JavaScript")) -.-> javascript/DOMManipulationGroup(["DOM Manipulation"]) javascript(("JavaScript")) -.-> javascript/ToolsandEnvironmentGroup(["Tools and Environment"]) javascript(("JavaScript")) -.-> javascript/BasicConceptsGroup(["Basic Concepts"]) javascript(("JavaScript")) -.-> javascript/AdvancedConceptsGroup(["Advanced Concepts"]) javascript/BasicConceptsGroup -.-> javascript/variables("Variables") javascript/BasicConceptsGroup -.-> javascript/data_types("Data Types") javascript/BasicConceptsGroup -.-> javascript/arith_ops("Arithmetic Operators") javascript/BasicConceptsGroup -.-> javascript/comp_ops("Comparison Operators") javascript/AdvancedConceptsGroup -.-> javascript/higher_funcs("Higher-Order Functions") javascript/AdvancedConceptsGroup -.-> javascript/spread_rest("Spread and Rest Operators") javascript/DOMManipulationGroup -.-> javascript/dom_select("DOM Selection") javascript/ToolsandEnvironmentGroup -.-> javascript/bom("Browser Object Model") subgraph Lab Skills javascript/variables -.-> lab-28315{{"Преобразование формы в объект"}} javascript/data_types -.-> lab-28315{{"Преобразование формы в объект"}} javascript/arith_ops -.-> lab-28315{{"Преобразование формы в объект"}} javascript/comp_ops -.-> lab-28315{{"Преобразование формы в объект"}} javascript/higher_funcs -.-> lab-28315{{"Преобразование формы в объект"}} javascript/spread_rest -.-> lab-28315{{"Преобразование формы в объект"}} javascript/dom_select -.-> lab-28315{{"Преобразование формы в объект"}} javascript/bom -.-> lab-28315{{"Преобразование формы в объект"}} end

Преобразование формы в объект

Для практики программирования откройте Терминал/SSH и введите node. Вы можете закодировать набор элементов формы в виде объекта, выполнив следующие шаги:

Используйте конструктор FormData для преобразования HTML-формы (form) в FormData.
Преобразуйте FormData в массив с использованием Array.from().
Соберите объект из массива с использованием Array.prototype.reduce().

Ниже представлен пример кода:

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

Для преобразования определенной формы вы можете вызвать функцию formToObject и передать в качестве аргумента элемент формы:

formToObject(document.querySelector("#form"));
// { email: '[email protected]', name: 'Test Name' }

Резюме

Поздравляем! Вы завершили практическое занятие по преобразованию формы в объект. Вы можете выполнить больше практических заданий в LabEx, чтобы улучшить свои навыки.