Изменение элементов массива в forEach: прямая запись в JS

Быстрый ответ

// Для изменения значений элементов массива с помощью forEach используйте их индексы:
let numbers = [1, 2, 3];
numbers.forEach((num, idx) => numbers[idx] *= 2);
// И вот, массив numbers теперь выглядит так: [2, 4, 6]

Применение forEach для модификации массивов

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

Изменение примитивных значений напрямую

forEach() позволяет изменять элементы массива на месте, обращаясь к ним по индексу. Это делает его незаменимым помощником при работе с примитивными значениями:

let numbers = [1, 2, 3];
numbers.forEach((value, index, array) => {
  array[index] = value * 2; // Удваиваем каждое число
});

Подробнее об этом расскажет наш спикер на видео

Изменение объектов внутри массива

Если массив состоит из объектов, их свойства можно изменять напрямую, так как объекты хранятся по ссылке. В этом случае обращаться к массиву по индексу не требуется:

let users = [{ name: 'Алёна' }, { name: 'Виктор' }];
users.forEach(user => user.name += " Иванов");
// И сейчас users будет выглядеть так: [{ name: 'Алёна Иванов' }, { name: 'Виктор Иванов' }]

Указание контекста 'this' в forEach

Если необходим контекст (this) для функции обратного вызова в forEach, его можно передать вторым аргументом. Стоит отметить, что стрелочные функции не учитывают this и берут его из внешнего контекста.

function logUpperCase() {
  console.log(this.toUpperCase()); // 'this' указывает на переданный объект
}

["a", "b", "c"].forEach(logUpperCase, String.prototype);

Визуализация

Представьте forEach в виде тепловоза 🚂, где каждый вагон – это элемент массива. Проезжая по пути, мы окрашиваем вагоны в новые цвета.

Array.forEach((item, index, arr) => {
  arr[index] = `🎨${item}🎨`; // Каждый элемент окрашивается в яркие цвета
});

Перед началом тепловоз выглядел так:

🚂[📦, 📦, 📦, 📦]

А теперь посмотрите, как он изменился:

🚂[🎨📦🎨, 🎨📦🎨, 🎨📦🎨, 🎨📦🎨]

Сохранение оригинального массива

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

Волшебные способности Map

map() создаёт новый массив, применяя функцию к каждому элементу, не изменяя исходный массив:

let doubled = numbers.map(num => num * 2);

Фильтрация нежелательных элементов

Для выделения элементов по определённому критерию используйте filter(). Он возвращают новый массив с нужными элементами:

let evens = numbers.filter(num => num % 2 === 0);

Методы, не модифицирующие массив

some, every и find помогут вам решить задачи, требующие сохранения исходного массива в исходном состоянии.

Избегаем ловушек

Работа с forEach может быть сложной, поэтому важно избегать некоторых ошибок:

Пропуск пустых значений

forEach() пропускает пустые места в массиве, будто они его не касаются:

let arrWithHoles = [1, , 3];
arrWithHoles.forEach((num) => console.log(num)); // Выведет только 1 и 3

Изменение длины массива

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

Завлекающие в заблуждение индексы

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

Полезные материалы

1. Array.prototype.forEach() – JavaScript | MDN — официальное руководство по методу .forEach().
2. javascript – Циклический обход массива и удаление элементов, не нарушая цикл for – Stack Overflow — обсуждение с примерами изменения массивов.
3. Метод forEach() массива в JavaScript — понятное объяснение метода .forEach() для начинающих.
4. Medium — обсуждение различий между .forEach(), .map(), .filter() и .reduce().
5. Методы массивов — детальный разбор методов работы с массивами в JavaScript.
6. 8 обязательных к знанию методов массивов в JavaScript – YouTube — наглядное руководство по основным методам работы с массивами.
7. Как использовать методы массивов в JavaScript — подробное описание методов итерации при работе с массивами.