Курс по JavaScript для начинающих: Модуль 5. Работа с массивами. Урок 3. Перебор массивов (for, forEach)

Введение

Перебор массивов — это основная задача при работе с массивами в JavaScript. Перебор позволяет выполнить определенное действие для каждого элемента массива. В этом уроке мы рассмотрим два основных способа перебора массивов: использование цикла for и метода forEach.

Перебор массива с помощью цикла for

Цикл for — это один из наиболее распространенных способов перебора массивов. Он позволяет получить доступ к каждому элементу массива по его индексу.

Синтаксис:

for (инициализация; условие; инкремент/декремент) {
    // код, который будет выполнен на каждой итерации
}

Пример использования цикла for для перебора массива:

let fruits = ["яблоко", "банан", "вишня"];

for (let i = 0; i < fruits.length; i++) {
    console.log(fruits[i]);
}

Особенности:

• Цикл начинается с инициализации переменной-счетчика.
• Условие проверяется перед каждой итерацией.
• Инкремент/декремент изменяет значение счетчика после каждой итерации.

Перебор массива с помощью метода forEach

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

Синтаксис:

массив.forEach(function(текущийЭлемент, индекс, массив) {
    // код, который будет выполнен для каждого элемента
});

Пример использования метода forEach для перебора массива:

let fruits = ["яблоко", "банан", "вишня"];

fruits.forEach(function(fruit, index) {
    console.log(index + ": " + fruit);
});

Особенности:

• Метод forEach принимает функцию-обработчик, которая выполняется для каждого элемента массива.
• Функция-обработчик может принимать три параметра: текущий элемент, индекс текущего элемента и сам массив.
• Метод forEach не возвращает значения и не прерывает выполнение (не поддерживает break или continue).

Сравнение for и forEach

Преимущества цикла for:

• Гибкость: можно использовать break и continue для управления потоком выполнения.
• Можно изменять элементы массива внутри цикла.

Преимущества метода forEach:

• Простота и лаконичность кода.
• Автоматически проходит по всем элементам массива.

Пример изменения элементов массива с помощью цикла for:

let numbers = [1, 2, 3, 4, 5];

for (let i = 0; i < numbers.length; i++) {
    numbers[i] = numbers[i] * 2;
}

console.log(numbers); // [2, 4, 6, 8, 10]

Пример изменения элементов массива с помощью метода forEach:

let numbers = [1, 2, 3, 4, 5];

numbers.forEach(function(number, index, array) {
    array[index] = number * 2;
});

console.log(numbers); // [2, 4, 6, 8, 10]

Заключение

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

Контрольные вопросы

Какой цикл используется для перебора массива по его индексам?

• while
• for
• do-while
• forEach

Какой метод используется для выполнения указанной функции один раз для каждого элемента массива?

• map
• filter
• forEach
• reduce

Какой параметр в методе forEach представляет текущий элемент массива?

• Первый параметр
• Второй параметр
• Третий параметр
• Не существует такого параметра

Может ли метод forEach использовать операторы break и continue для управления потоком выполнения?

• Да
• Нет

Как изменить элементы массива с помощью цикла for?

• Пройти по элементам массива с помощью цикла for и присвоить новые значения элементам массива.
• Использовать метод map.
• Использовать метод filter.
• Использовать метод reduce.

Какие параметры принимает функция-обработчик метода forEach?

• Текущий элемент, индекс текущего элемента, сам массив.
• Только текущий элемент.
• Текущий элемент и индекс текущего элемента.
• Текущий элемент и сам массив.

Упражнение

Упражнение 1: Перебор массива и вывод элементов

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

let fruits = ["яблоко", "банан", "вишня"];

for (let i = 0; i < fruits.length; i++) {
    console.log(fruits[i]);
}
// Вывод:
// яблоко
// банан
// вишня

Упражнение 2: Перебор массива и изменение элементов

Создайте массив из нескольких числовых элементов. Используйте цикл for для умножения каждого элемента массива на 2. Выведите результат.

let numbers = [1, 2, 3, 4, 5];

for (let i = 0; i < numbers.length; i++) {
    numbers[i] *= 2;
}

console.log(numbers); // [2, 4, 6, 8, 10]

Упражнение 3: Перебор массива с использованием метода forEach

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

let fruits = ["яблоко", "банан", "вишня"];

fruits.forEach(function(fruit, index) {
    console.log(index + ": " + fruit);
});
// Вывод:
// 0: яблоко
// 1: банан
// 2: вишня

Упражнение 4: Перебор массива и изменение элементов с использованием метода forEach

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

let numbers = [1, 2, 3, 4, 5];

numbers.forEach(function(number, index, array) {
    array[index] = number * 3;
});

console.log(numbers); // [3, 6, 9, 12, 15]

Упражнение 5: Подсчет количества элементов массива с использованием цикла for

Создайте массив из нескольких строковых элементов. Используйте цикл for для подсчета количества элементов в массиве и выведите результат.

let fruits = ["яблоко", "банан", "вишня"];
let count = 0;

for (let i = 0; i < fruits.length; i++) {
    count++;
}

console.log(count); // 3

Упражнение 6: Подсчет суммы элементов массива с использованием метода forEach

Создайте массив из нескольких числовых элементов. Используйте метод forEach для подсчета суммы элементов массива и выведите результат.

let numbers = [1, 2, 3, 4, 5];
let sum = 0;

numbers.forEach(function(number) {
    sum += number;
});

console.log(sum); // 15

Упражнение 7: Поиск максимального значения в массиве с использованием цикла for

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

let numbers = [10, 5, 8, 12, 7];
let max = numbers[0];

for (let i = 1; i < numbers.length; i++) {
    if (numbers[i] > max) {
        max = numbers[i];
    }
}

console.log(max); // 12

Упражнение 8: Поиск минимального значения в массиве с использованием метода forEach

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

let numbers = [10, 5, 8, 12, 7];
let min = numbers[0];

numbers.forEach(function(number) {
    if (number < min) {
        min = number;
    }
});

console.log(min); // 5

Упражнение 9: Подсчет количества четных чисел в массиве с использованием цикла for

Создайте массив из нескольких числовых элементов. Используйте цикл for для подсчета количества четных чисел в массиве и выведите результат.

let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];
let evenCount = 0;

for (let i = 0; i < numbers.length; i++) {
    if (numbers[i] % 2 === 0) {
        evenCount++;
    }
}

console.log(evenCount); // 4

Упражнение 10: Подсчет количества нечетных чисел в массиве с использованием метода forEach

Создайте массив из нескольких числовых элементов. Используйте метод forEach для подсчета количества нечетных чисел в массиве и выведите результат.

let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];
let oddCount = 0;

numbers.forEach(function(number) {
    if (number % 2 !== 0) {
        oddCount++;
    }
});

console.log(oddCount); // 5