Итерирование по массивам с помощью forEach

В этом «Уроке за 5 минут» мы рассмотрим метод итерирования по массиву forEach.

Многие из вас знают более классический способ итерирования for не только по массиву, в целом, а и по объектам и другим структурам данных. Следует напомнить, что кроме обыкновенного метода for, есть ещё и такие методы как for in и for of. Эти три способа использования for мы рассмотрим в другом уроке, а сегодня мы остановимся на forEach.

Метод forEach является более удобным методом и более современным. Как же он работает?

Для того чтобы воспользоваться этим методом, его необходимо выполнять на том массиве, который вы хотите проитерировать.  Для этого, указываете имя массива, в данном случае это arr, затем пишете название метода forEach.

Этот метод принимает один аргумент, — функцию. В данном случае, мы записали функцию обратного вызова, непосредственно сразу внутри forEach. Сама эта функция принимает три аргумента:  item (итерируемый в данный момент элемент), index (индекс того элемента, который мы в данный момент просматриваем) и array (весь массив). Аргумент array используется редко, обычно для работы хватает одного или двух, тем не менее нужно не забывать про все три параметра.

Многие из вас уже могут быть знакомы с шаблонными строками, которые заключаются в обратные кавычки (` `). Они могут содержать местозаполнители (или плейсхолдеры, placeholders), которые обозначаются знаком доллара и фигурными скобками (${выражение}). В console.log с помощью шаблонной строки, мы выводим индекс и элемент, которые нас интересуют:

let arr = ['first element','second element', 77, true, null];


arr.forEach(function(item, index, array){
    console.log(`Индекс: ${index}, элемент: ${item}`);
});

При выполнении данного кода, в консоли мы увидим следующие данные:

Индекс: 0, элемент: first element
Индекс: 1, элемент: second element
Индекс: 2, элемент: 77
Индекс: 3, элемент: true
Индекс: 4, элемент: null

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

В данном примере мы хотели показать, что массив может содержать данные разного типа:  string значения, числовые значения, boolean значения или даже null. Таким образом можно проитерироваться по массиву, на каждой итерации которого получить значение в item; в index получить порядковый номер итерируемого элемента; в array получить, как параметр сам массив, хотя в данном случае, он вам будет доступен благодаря замыканию.

Очень часто, в реальной работе попадаются не такие простые массивы, а массивы, которые состоят из объектов (массивы объектов).

Давайте, для примера, сделаем простейший массив объектов. В него мы запишем некий id и name, допустим, это будет имя пользователя. Создадим два таких массива, с разными id и именами. Теперь, модифицируем метод forEach для нашего случая, и используем только параметр item. Далее, в шаблонной строке изменяем плейсхолдеры на item.id и item.name.

let arr = [{id:1, name:"Jonh"}, {id:2, name:"Smith"}];

arr.forEach(function(item) {
    console.log(`ID: ${item.id}, имя: ${item.name}`);
});

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

ID: 1, имя: Jonh
ID: 2, имя: Smith

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

На этом всё, спасибо за внимание! Ждём вас на следующем «Уроке за 5 минут»!