Учебная итерация: История любви (или наоборот, на самом деле)


Что такое итерация?

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

Чтение страниц за страницами текста и кода может быть пугающим, даже стрессовым. Когда я читал об итераторах, я спрашивал себя: «Какого черта вам нужно «проходить» или итерировать объект или массив?». После пары недель бомбардировки моего мозга различными другими концепциями мне все стало ясно.

Чтобы показать, с чего началось мое обучение, вот пример.

const numbers = [1, 2, 3, 4];

for (num = 0; num < numbers.length; num++) {
  console.log(numbers[num]);
} 

//=> [ 2, 3, 4, 5 ]
Вход в полноэкранный режим Выйти из полноэкранного режима

Это вроде бы имеет смысл, верно? Я выбрал num для представления чисел в нашем массиве; num начинается с нуля, пока num меньше, чем(общая длина), увеличиваем num на 1 — пока не достигнем длины массива. Довольно аккуратно! Эту концепцию легко понять, есть много применений для увеличения чисел.

Концепция, которая поразила мой мозг…

Концепция, которая заняла у меня некоторое время, возвращаясь к моему предисловию; …бомбардируя мой мозг различными другими концепциями, она стала мне понятна… это цикл forEach(). Цикл forEach() очень интересен, он делает именно то, о чем говорит: «Итерация через этот объект или массив и для КАЖДОГО из этих элементов сделайте это!».

Простой пример, давайте добавим 1 к каждому элементу нашего массива.

const numbersArray = [1, 2, 3, 4];

numbersArray.forEach((num, index) => {
  numbersArray[index] = num + 1;
});

console.log(numbers);

//=> [ 2, 3, 4, 5 ]
Вход в полноэкранный режим Выйти из полноэкранного режима

Хотя это тоже имеет большой смысл на первый взгляд, обе эти концепции могут быть применены к большим, более сложным вещам. Я действительно пытаюсь сосредоточиться на цикле forEach().

forEach(biggerTHING)

Я по-настоящему осознал силу цикла forEach(), когда начал изучать добавление элементов в DOM. В JavaScript мы можем начать с базового HTML, как вы, возможно, знаете, и определить некоторые правила CSS для стилизации наших заголовков, абзацев и т.д. В ситуации, когда у нас есть несколько элементов на странице с одинаковой базовой структурой (вспомните результаты yelp, отображающие информацию о ресторане), мы можем избежать повторения жесткого кодирования каждой карточки ресторана, содержащей всю ту же самую необходимую информацию, используя forEach(). Это также делает наш код более динамичным; в один день может быть 10 ресторанов, которые соответствуют нашим критериям поиска, но на следующий день могут открыться еще два. Написание кода таким образом делает нашу функцию многократно используемой независимо от того, сколько результатов остается релевантными, без необходимости возвращаться назад и отменять или переделывать наши жестко закодированные карточки ресторанов.

Вот пример…

// Our returned fetch object:

 const restaurant = {
    name: "Midtown Sushi",
    rating: "4.3",
    location: "2801 P Street",
  };

Вход в полноэкранный режим Выход из полноэкранного режима
  // To keep it simple, lets pretend that searchQuery is a
  // form that calls this function when you search for food.

  searchQuery.addEventListener("submit", (e) => {
    e.preventDefault();

    const restaurantQuery = (rest) => {
      // Select our list and give it a variable name
      const restaurantList = document.querySelector("#restaurant-list");
      // Create a 'home' for each of our fetch data items
      const card = document.createElement("div");
      card.className = "rest-info";
      const header = document.createElement("h2");
      header.textContent = rest.name;
      card.append(header);
      const rating = document.createElement("p");
      rating.textContent = rest.rating;
      card.append(rating);
      const location = document.createElement("p");
      location.textContent = rest.location;
      card.append(rating);
      // Append that new 'card' to our list
      restaurantList.append(".rest-info");

      fetch("http://your-local-restaurant-api.com")
        .then((r) => r.json())
        .then((data) => data.forEach((restaurant) => displayCard(restaurant)));
    };
  });

Войти в полноэкранный режим Выход из полноэкранного режима

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

Суть в том, что при разработке динамического веб-сайта мы можем получить соответствующие данные и использовать JavaScript, чтобы дать этим данным дома для их пар ключ/значение. forEach() наших ресторанных карт, мы заставляем этот шаблон делать работу за нас! Такой шаблон дает нам столько гибкости и позволяет повторно использовать фрагменты кода вместо того, чтобы постоянно возвращаться и редактировать.

Заключение

Хотя эта тема гораздо глубже, чем то, что я показал, она хорошо иллюстрирует возможности, которые дает нам JavaScript в веб-разработке. Итерация предоставляет уникальный инструмент для решения повторяющихся проблем, она позволяет нам применять простые (или сложные) действия, чтобы помочь нам избежать повторений. Я все еще учусь, и я уверен, что в моих примерах есть ошибки, но я надеюсь, что это поможет начинающим разработчикам понять немного больше об итераторах и их значении в нашем коде. Если вы думаете, что есть лучший, более простой или даже просто более чистый способ проиллюстрировать мой пример, пожалуйста, оставьте комментарий ниже, и я смогу его отредактировать!

Спасибо, что читаете!
-Тайлер

Оцените статью
devanswers.ru
Добавить комментарий