Цикл for of в Javascript — один цикл, чтобы управлять всем

Цикл for of в Javascript - один цикл, чтобы управлять всем

От автора: долгое время for in и for были основными циклами, которые можно было использовать для перебора наборов вещей в JavaScript. Позже мы получили некоторые методы массива, такие как forEach, map, filter и т.д. Все начинает становиться немного запутанным, когда мы используем каждый тип цикла.

Например, вы не можете использовать for in для массивов, только для объектов. Тогда, как мне обработать через цикл объект? Ну, вы можете использовать for in, но только если вы проверите hasOwnProperty или что-то еще, или использовать…

Что странно, потому что вы должны получить ключи, затем взять значение и т. д. Теперь у нас есть новая вещь под названием ES6 for of. Он все больше и больше используется, поскольку информированность о том, как это делать, увеличивается, но все еще время от времени возникает путаница относительно того, как и когда его применять. Ниже приведено краткое описание некоторых способов использования for of — одного цикла для управления всем.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Массивы

Для массивов это довольно просто. Это выглядит как for in, но вы не можете применить for in для массива. Суть в том, что thing становится каждым элементом в массиве.

Массивы объектов

Здесь вы заметите, что при итерации массива объектов вы можете использовать деструктурирование, чтобы получить значение ключа name для каждого элемента в массиве. Обратите внимание, что здесь используется дескруктурирование {}, потому что мы дескруктурируем объект, а не [], как в случае дескруктурирования массива.

Объекты

Здесь все становится еще круче, благодаря магии Object.entries. Object.entries возвращает массив пар ключ-значение, поэтому в данном случае мы получаем…

Итак, вы в одной строке конвертируете объект в массив значений ключа, а затем используете деструктурирование для получения значений идентификатора и имени!

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Map

С помощью объектов ES6 Map вы можете просто использовать метод Array.from для преобразования Map в, как вы уже догадались, снова массив пар ключей-значений.

Промисы

Последняя крутая вещь, которую вы можете сделать, это обрабатывать промисы или async / await внутри циклов for of. В приведенном выше примере мы на самом деле создаем массив промисов, с помощью которого затем разрешаем Promise.all, так что это добавит кучу вещей в цикл обработки событий, а затем, когда все они будут разрешены, мы вызываем .then для Promise.all.

Обратите внимание, что в этом случае нет использования async / await, поэтому код будет транспилирован в намного меньший, чем в случае кода, который потребует полифилла babel и т. п. от использования async / await. Тем не менее, вы, вероятно, уже установили полифилл, такой как babel, так что в качестве альтернативы вы все еще можете выполнить async / awit Promise.all с помощью…

Другой вариант — использовать await в качестве функции async и фактически await каждый ответ.

В этом случае код будет приостановлен и будет ждать возвращения getUser каждого ответа, прежде чем перейти к следующему. Вот codesandbox, в котором вы можете увидеть, как все это работает!

Надеемся, что эта статья поможет вам лучше понять цикл for of.

Автор: Jonathan Creamer

Источник: https://www.jonathancreamer.com

Редакция: Команда webformyself.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook: