Функции генератора JavaScript

Функции генератора JavaScript

Недооцененная и мощная функция, которая может творить чудеса

В JavaScript функция генератора — это функция, выполнение которой можно приостановить в середине ее выполнения и возобновить позже, что позволяет ей создавать последовательность значений с течением времени, а не создавать все свои значения сразу, как обычная функция. Это может быть полезно для различных задач, таких как создание последовательности чисел, повторение структуры данных или создание бесконечного потока данных.

Чтобы создать функцию-генератор, вы используете синтаксис function* вместо обычного синтаксиса function. Внутри функции генератора вы можете использовать ключевое слово yield, чтобы приостановить функцию и создать значение. Вот пример простой функции-генератора, которая создает последовательность чисел:

function* countFrom(n) {
  while (true) {
    yield n;
    n++;
  }
}

const counter = countFrom(1);

console.log(counter.next().value); // 1
console.log(counter.next().value); // 2
console.log(counter.next().value); // 3

Каждый раз, когда вы вызываете метод next для объекта генератора, возвращаемого функцией генератора, функция возобновляет выполнение с точки, где она была приостановлена, и создает следующее значение в последовательности. Когда функция генератора достигает конца своего выполнения, она возвращает объект со свойством done, установленным на true, что указывает на то, что генератор завершил свою последовательность.

Функции-генераторы часто используются в сочетании с итераторами и циклом for-of для перебора последовательности значений. Вот пример использования функции генератора для создания итератора, который создает последовательность Фибоначчи:

function* fibonacci() {
  let [prev, curr] = [0, 1];
  while (true) {
    [prev, curr] = [curr, prev + curr];
    yield curr;
  }
}

for (const n of fibonacci()) {
  console.log(n);
  if (n >= 1000) {
    break;
  }
}

Еще одно полезное применение функций генератора — создание мастеров форм. Мастер форм — это пользовательский интерфейс, который позволяет пользователю заполнять многоэтапную форму путем последовательного перехода через серию страниц или «шагов». Вы можете использовать функцию-генератор для создания мастера форм, создав функцию-генератор, которая создает шаги формы в виде последовательности значений и использует метод next для перехода между шагами.

Вот пример того, как можно создать мастер форм с помощью функции-генератора:

function* formWizard() {
  // Step 1: Collect personal information
  const personalInfo = yield {
    title: "Personal Information",
    fields: [
      { label: "Full Name", type: "text" },
      { label: "Email Address", type: "email" },
      { label: "Phone Number", type: "tel" },
    ],
  };

  // Step 2: Collect address information
  const addressInfo = yield {
    title: "Address Information",
    fields: [
      { label: "Street Address", type: "text" },
      { label: "City", type: "text" },
      { label: "State", type: "text" },
      { label: "Zip Code", type: "text" },
    ],
  };

  // Step 3: Review and submit form
  const review = yield {
    title: "Review and Submit",
    fields: [
      {
        label: "Review your information",
        type: "review",
        data: { personalInfo, addressInfo },
      },
    ],
  };

  // Return the completed form data
  return { personalInfo, addressInfo, review };
}

const wizard = formWizard();

let step;
while (!(step = wizard.next()).done) {
  // Render the current step of the form wizard
  renderStep(step.value);

  // Wait for the user to submit the current step
  const formData = await getFormData();

  // Pass the form data to the generator function
  wizard.next(formData);
}

// The form wizard is complete
const formData = step.value;
submitForm(formData);

В этом примере функция генератора определяет три шага в мастере форм: личная информация, информация об адресе, просмотр и отправка. Каждый раз, когда метод next вызывается для объекта генератора, функция генератора создает следующий шаг в виде объекта с title и списком fields. Данные формы для каждого шага передаются функции-генератору в качестве аргумента метода next, а окончательные данные формы возвращаются функцией-генератором по завершении.

Свяжитесь со мной здесь: LinkedIn | Кодепен | "Электронная почта"