<MyRusakov.ru />

Программирование на JavaScript с Нуля до Гуру 2.0

Программирование на JavaScript с Нуля до Гуру 2.0

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

Дополнительно, почти к каждому уроку идут упражнения.

Помимо самого курса Вас ждёт ещё 5 бесплатных ценных Бонусов: «Библиотека jQuery», «Защита JavaScript-кода от копирования», «Решение упражнений из курса», «HTML для начинающих» и «CSS для начинающих».

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Перебор массива в JS - метод forEach

Перебор массива в JS - метод forEach

У языка JavaScript существует несколько методов для перебора массива, один из которых мы сейчас рассмотрим. Речь идет о методе forEach, который может принимать callback функцию.

Данная функция принимает три аргумента:

  • элемент массива
  • порядковый номер элемента
  • сам массив, который перебирается

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

Пример работы forEach

Нужно пройтись по всем элементам массива и вывести в консоль индекс (порядковый номер) и соответствующее название фрукта.

let fruit = ["Банан", "Кокос", "Мандарин"];

fruit.forEach(function(item, i, fruit) {
    console.log( i + ": " + item);
});

  1. Создадим массив с фруктами и поместим его в переменную.
  2. Указываем для какого массива и каким методом будет происходить перебор элементов. Для каждого из них вызывается функция с тремя параметрами, чуть выше упоминалось, что это за параметры.
  3. Внутри функции у нас находится всего одно действие - вывести список фруктов под своим порядковым номером.

Перебор массива в JS - метод forEach.

Пример forEach с нахождением суммы

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

let array = [5, 25, 30]; // объявляем переменную с массивом из чисел
let sum = 0; // создадим переменную с нулём

array.forEach( // перебор элементов
    function ( item ) {
        sum += item;
    }
);

console.log( sum ); // значение sum = 60

Пример forEach с вычислением квадрата числа


let square = [ 1, 2, 3, 4, 5, 6];
square.forEach (function (value, index, square) {
    let result = value * value;
    console.log("Квадрат числа " + value + " = " + result);
});
Перебор массива в JS - метод forEach.

Пример с объектами массива

У нас имеется массив, где каждый элемент является объектом. Как мы будем перебирать его элементы?

let cars = [
    {model: 'BMW', year: '2019', carColor: 'white'},
    {model: 'Audi', year: '2010', carColor: 'black'},
    {model: 'Fiat', year: '2009', carColor: 'red'},
    {model: 'Ford', year: '2001', carColor: 'green'},
    {model: 'Honda', year: '2005', carColor: 'blue'},
]

Обращаемся к массиву cars и вызываем на нём метод forEach. Данный метод запускает для каждого элемента функцию с тремя возможными параметрами. Что делает эта функция? Правильно, выводит в консоль весь массив. Поэтому, нам достаточно передать только первый параметр - элемент массива. Так и назовем - element (придумали сами).

cars.forEach(function(element){     console.log(element); });

В консоль вывелись элементы массива, состоящие из объектов.

Перебор массива в JS - метод forEach.

Использование синтаксиса ES6, сделает и так лаконичную запись метода forEach, ещё более лаконичной.

cars.forEach(element => console.log(element));

Заключение

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

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.