Методы массива JavaScript: .forEach — функциональный цикл for of

Встретиться Array​.prototype​.for​Each().

Его цель — выполнить код, который вы ему предоставляете, для каждого элемента массива: по сути, петля.

Вот его определение:

01-definition.png

Давайте объясним это ниже. 😉

forEach принимает до двух параметров:

  • в callback функция, которая выполняется над каждым элементом массива
  • в thisArg (необязательно), который изменяет значение this внутри функции обратного вызова

А теперь подробнее о каждом. 👇

1) callback функция

Метод, вызываемый для каждого элемента массива. Он принимает до трех параметров:

  • currentValue: текущий элемент массива, 🍎 на первой итерации
  • index (необязательно): индекс текущего элемента, 0 на первой итерации
  • массив (необязательно): весь массив, same на всех итерациях

02-00-callback-function.png

index Параметр

index параметр является необязательным. Это удобно, когда логика зависит от позиции элемента в массиве.

02-01-index-param.png

array Параметр

Последний параметр array. Это значение всего массива в начале выполнения метода обратного вызова.
Удобный : Это полезно, когда у вас есть общий метод, который вы передаете forEach который требует доступа к массиву. Метод является универсальным, вы не можете заранее знать массив, для которого он будет вызываться. Это также означает, что вы не можете полагаться на закрытие, поскольку оно неизвестно.

Таким образом array параметр в этом случае ваш Только возможность получить доступ к текущему массиву.

См. этот ответ Stackoverflow Ответить из реднеб для получения дополнительной информации.

2) thisArg Параметр

Отменяет this значение ключевого слова внутри callback функция.

По умолчанию this будет ссылаться на объект окна, и он будет переопределен значением, которое вы ему передадите.

03-thisArg.png

Обычно я использую его, когда хочу применить побочный эффект к какому-то объекту или другому массиву. (Я стараюсь избегать побочных эффектов, насколько это возможно.)

Пример

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

Два массива сортируются одинаково: при любом заданном индексе элементы из обоих массивов соответствуют друг другу.

04-use-case.png

Обратите внимание, что fruitMap создается перед вызовом forEach на fruitEmojis. И мы обновляем объект во время выполнения addKeyPairToFruitMap.

Перед использованием forEach методов для массивов вот некоторая информация, которую стоит знать.

1) Возврат undefinedтаким образом, НЕ можно связать

forEach метод массива всегда возвращает undefinedтаким образом это НЕТ цепной. Это означает, что в цепочка вызововего можно разместить только на конец.

05-не-цепочка.png

2) Функция обратного вызова может изменить исходный массив

Мы можем добавлять/удалять/обновлять элементы из массива внутри функции обратного вызова.

Добавление

Добавление делает НЕТ влияют на элементы для вызова: обрабатываются только элементы, изначально присутствующие.

Но после казни мы видим, что она была затронута.

06-добавление-к-оригиналу.png

Удаление

Удаление ДЕЛАЕТ влияет на количество элементов для вызова. Если следующий запланированный элемент будет удален, он не будет обработан.

07-удаление-из-оригинала.png

Модификация

Модификация ДЕЛАЕТ влияет на предметы сами себя за звонок, но не в счет. Если мы изменим следующий запланированный элемент, эта модификация будет доступна, когда она затем будет обработана.

Обратите внимание, что четвертый элемент связан с этим оператором, следующим оператором, который добавляет элемент в массив при последнем выполнении: fruitEmojis[index + 1] = "AAAAAARH!";.

08-модификация-исходного-массива-edit.png

3) Не может быть остановлен

Вы не можете остановить выполнение или «разорвать цикл» при вызове метода forEach.

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

Я надеюсь, что эта статья о forEach метод принес вам ценность. 🙂 Это будет часть серии статей о массивах JavaScript, так что следите за новостями! 🎉

А пока удачного кодирования! 😎

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *