Javascript array foreach: Array.prototype.forEach() — JavaScript | MDN

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

Давайте подчеркнем этот момент, потому что это ключ к пониманию того, когда использовать каждый из них. карта() возвращает массив, forEach() — нет. Если вы используете возвращенный массив позже в своем коде, используйте map() , в противном случае forEach() — ваш друг.

Теперь, когда мы установили, что представляет собой этот метод, а что нет, мы готовы отправиться в наш интернет-магазин, чтобы посмотреть, как мы можем применить

В реальном мире

Как и в предыдущих статьях, мы продолжим работу с реалистичным контекстом, на котором будем основывать наши примеры. Мы работаем над кодовой базой интернет-магазина. Это простое приложение, которое я создал специально для демонстрации наших примеров в действии. Вы можете ознакомиться с веб-приложение и см. forEach() , используемое напрямую, и вы можете увидеть код в его репозитории GitHub . Но сначала мы пройдемся по всему здесь.

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

Сначала мы начнем с простого примера регистрации. Давайте немного пофантазируем, чем скромный console.log() . Что произойдет, если мы сделаем это с каждым из наших объектов продукта в магазине?

products.forEach(product => console.table(product))

Результат будет выглядеть так в нашей консоли [открыть консоль с помощью Command + Option + J (Mac) или Control + Shift + J (Windows, Linux, Chrome OS).

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

Отлично, это мило и все такое, но кроме разработки, это бесполезно в нашем готовом к производству интернет-магазине.

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

Я не хочу тратить много времени на Window.localStorage , вы можете прочитать больше об этом здесь , но в двух словах, наш объект окна предоставляет нам метод для хранения некоторых данных в нашем пользовательском браузер, который сохраняется даже после перезагрузки или закрытия и повторного открытия страницы. Мы можем хранить данные там, а затем читать их снова, когда нам это нужно. Пример использования для этого — хранить там, показывали ли вы пользователю всплывающее модальное окно с просьбой подписаться на информационный бюллетень, когда они посещают ваш сайт. Таким образом, вы можете гарантировать, что пользователь увидит его только один раз.

Если вы откроете свои инструменты разработчика, я использую Chrome на изображении ниже, вы найдете вкладку под названием «Приложение». На левой панели вы можете открыть вкладку «Локальное хранилище» и выбрать текущий URL-адрес. Вы увидите таблицу ключ/значение, где мы можем сохранить или прочитать данные.

Здесь мы собираемся хранить некоторые данные о каждом из наших продуктов. Для этого нам понадобится forEach() .

Предположим, что цены в нашем магазине регулярно колеблются в зависимости от рыночных цен. И эти цены сохраняются в нашей базе данных, откуда мы получаем список продуктов для отображения на экране. Нам нужна функция, которая показывает пользователю значок на продукте, если его цена упала по сравнению с последним разом, когда он его видел. Мы не знаем, что пользователь видел во время последнего посещения. Таким образом, мы можем сохранять в локальном хранилище нашего пользователя цену каждого продукта на экране каждый раз, когда они посещают страницу. Таким образом, прежде чем отображать новые цены, мы можем провести сравнение с ценой, сохраненной в локальном хранилище, и, если новая цена ниже, мы можем отобразить значок «Снижение цены» на этом продукте.

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

products.forEach((product) => localStorage.setItem(product.name, product.price)

Как видите, мы начинаем с массива товаров. Применяем forEach() и передайте методу функцию обратного вызова для выполнения на каждой итерации. Функция принимает текущий выбранный элемент массива в качестве первого аргумента, который мы называем «продукт».

Затем мы выполняем нужную нам функцию. В этом случае мы используем API `localStorage`, который позволяет нам сохранять запись, используя собственный метод setItem() . Не слишком беспокоясь об этой части, мы просто передаем ей первый аргумент, который будет ключом в таблице локального хранилища, и второй аргумент, который будет значением. В этом случае мы сохраним название товара в качестве ключа, а цену в качестве значения. Если это работает правильно, он должен сохранить каждый продукт и его цену в нашем локальном хранилище. И вот как это будет выглядеть:

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

Более того

Точно так же, как мы видели с предыдущими рассмотренными методами массива, этот также предоставляет нам три аргумента, которые мы можем использовать. Первый — это текущий выбранный элемент из массива, который мы уже видели в примере выше. Два других - индекс и массив .

myArray.forEach((element, index, array) => // Делаем вещи)

Индекс — это позиция текущего выбранного элемента в массиве, а последний аргумент — это сам исходный массив, который мы итерируем на.

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

Что делать, если нам нужно, чтобы наша функция обратного вызова имела несколько строк? Затем мы просто добавляем фигурные скобки.

products.forEach(product => { const предыдущая цена = localStorage.getItem(product.name) если (предыдущая цена !== product.price) { localStorage.setItem(product.name, product.price) } })

В этом примере мы сначала получаем цену, которую ранее сохранили в локальном хранилище, а затем сравниваем ее с текущей ценой. Если две цены не совпадают, мы сохраняем новую цену. В противном случае мы ничего не делаем.

Как это выглядело до ES6

В ES6 у нас есть стрелочные функции и много замечательных вещей, которые делают наш код более читабельным. Но важно знать, как все выглядело раньше, потому что вы столкнетесь с этим способом написания в куче старых кодовых баз, которые все еще используются, и вы встретите его в старых примерах на Stack Overflow и тому подобное. Вот как мы написали это до ES6:

products.forEach(function(product) { console.table(продукт) })