Когда у нас есть массив данных, нам часто требуется пройтись по всем элементам массива и выполнить какое-то действие с элементами массива. Мы можем сделать это, используя цикл for
, но метод массива JavaScript forEach()
— это новый способ сделать это.
Как работает метод forEach()
Метод JavaScript array forEach()
перебирает элементы массива и выполняет функцию для каждого элемента. Синтаксис:
array.forEach(callback, thisArg);
Обратный вызов — это функция, которая выполняется для каждого элемента массива, а thisArg — это значение, используемое как this
в обратном вызове.
Пример:
let foods = ['bread', 'rice', 'meat', 'pizza']; foods.forEach(function(food) { console.log(food); });
Вывод
bread rice meat pizza
Функция обратного вызова принимает 3 аргумента.
- Текущий элемент, для которого вызывается функция (обязательно)
- Индекс элемента в исходном массиве (необязательно)
- Исходный массив (необязательно)
Давайте посмотрим на один пример, использующий все 3 аргумента. В этом примере мы удалим дубликаты из массива, используя forEach()
.
let arr1 = [20, 30, 15, 30, 40, 15]; let unique = []; arr1.forEach((item, index, array) => { if(index === array.indexOf(item)) { unique.push(item); } }); console.log(unique); // [20, 30, 15, 40]
Здесь, в функции обратного вызова, мы сопоставляем индекс текущего элемента с индексом элемента в исходном массиве, используя метод indexOf()
.
Метод indexOf()
возвращает индекс первого вхождения совпадающего элемента в массиве. Это означает, что если один и тот же элемент присутствует в массиве более одного раза, то indexOf()
вернет индекс первого элемента слева в массиве.
Таким образом, если индекс текущего элемента и индекс, возвращаемый indexOf()
, не совпадают, то этот элемент существует в массиве более одного раза. Только уникальные элементы будут помещены в уникальный массив.
Массив с пустыми значениями
Метод forEach()
не вызывает функцию обратного вызова для пустых значений.
let arr = [20, 30]; arr[5] = 50; console.log(arr); // [20, 30, empty × 3, 50] arr.forEach(function(item) { console.log(item); });
Вывод
20 30 50
Здесь функция обратного вызова не вызывалась для всех трех пустых значений.
Завершение/пропуск цикла forEach
В отличие от цикла for
, мы не можем использовать break
или continue
в методе forEach()
. Чтобы завершить forEach()
, нам нужно пройти через исключение внутри него. Точно так же нам нужно использовать оператор return
, чтобы пропустить текущую итерацию вместо ключевого слова continue
.
let arr1 = [20, -45, 30, 15, 30, 40, 15]; arr1.forEach((item, index) => { if(item < 0) { return; } if(index == 3) { throw new Error('Terminating forEach'); } console.log(item); });
Вывод
20 30 Uncaught Error: Terminating forEach
Если вам необходимо использовать
break
илиcontinue
в цикле, тогда используйтеfor
циклов (for
,for…of
).
Пример использования thisArg
В этом примере мы будем фильтровать четные и нечетные числа из массива и устанавливать их в соответствующие свойства объекта.
function filterNumbers() { this.even = []; this.odd = []; } let numbers = [20, 83, 15, 58, 49, 62]; const obj = new filterNumbers(); numbers.forEach(function(item) { if(item % 2 === 0) this.even.push(item); else this.odd.push(item); }, obj) console.log(obj.even); // [20, 58, 62] console.log(obj.odd); // [83, 15, 49]
Здесь экземпляр filterNumbers
передается forEach
для использования в качестве this
внутри обратного вызова.
Связанный
- Различные способы перебора объектов и массивов в JavaScript
- Методы map() и filter() массива в JavaScript
- 6 способов поиска элементов в массиве в JavaScript
Спасибо, что уделили время☺️
Другие блоги по веб-разработке можно найти на jscurious.com.