Чем методы map(), forEach() и filter() отличаются друг от друга в JavaScript

JavaScript — самый популярный язык программирования в мире, широко используемый для веб-разработки. Разработчики с опытом работы с JavaScript могут легко освоить интерфейсные библиотеки, такие как React.

Это делает JavaScript языком, который необходимо знать профессионалам. Благодаря широкому использованию JavaScript он предлагает множество возможностей для трудоустройства новичков/профессионалов. Если вы готовитесь к собеседованию по JavaScript, наиболее часто задаваемый вопрос — разница между методами map(), forEach() и filter().

карта()

Функция map() получает функцию в качестве параметра, применяет код к каждому элементу и возвращает совершенно новый массив. Это не изменит исходный массив.
Функция map() возвращает новый массив, поэтому ее следует использовать только в том случае, если вы собираетесь использовать возвращенный массив, в противном случае следует предпочесть функцию forEach().

Синтаксис:

map((element) => { /* Coding Logic*/ })
map((element, index) => { /* Coding Logic */ })
map((element, index, mapArray) => { /* Coding Logic */ })

Примечание. Здесь mapArray — это массив, для которого вызывается функция map().

Пример:

Как показано в примере, мы применили функцию, которая ожидает, что каждый элемент массива будет умножен на 2. Метод map() не изменяет исходный массив. Он вернет новый массив. Мы можем использовать возвращенный массив для дальнейших операций.

для каждого()

Функция forEach() получает функцию в качестве аргумента и применяет один и тот же код к каждому элементу. Он ничего не возвращает, он просто применяет условия к каждому элементу. Это не изменит исходный массив.

Возвращаемое значение метода forEach() не определено. Метод forEach() не ждет, пока обещания будут разрешены.

Синтаксис:

forEach((element) => { /* Coding Logic */ })
forEach((element, index) => { /* Coding Logic */ })
forEach((element, index, array) => { /* Coding Logic */ })

Поскольку forEach() возвращает значение undefined, мы не можем добавить какой-либо метод JavaScript, такой как Filter, или уменьшить с его помощью. Его следует использовать только тогда, когда мы не собираемся применять какие-либо дальнейшие операции к итерируемым значениям.

фильтр()

Метод filter() получает функцию в качестве параметра. Он запускает функцию для каждого элемента массива. Он вернет новый массив, который удовлетворяет примененному условию. Это не изменит исходный массив.

Синтаксис:
filter((element) => { /* … */ } )
filter((element, index) => { /* … */ } )
filter((element, index, array) => { /* … */ } )

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

Как показано в примере, метод filter() вернет новый массив с элементами, соответствующими функции обратного вызова.

Поскольку мы подробно рассмотрели синтаксис, работу и возвращаемые значения методов map(), forEach() и filter(), здесь мы собираемся суммировать все пункты вместе.

Разница

  • Возвращаемое значение
    map() возвращает новый массив в соответствии с примененными условиями.
    forEach() ничего не возвращает. forEach() возвращает undefined.
    filter()method возвращает массив совпадающих элементов, иначе возвращает пустой массив, если совпадений не происходит.
  • Если у вас есть требование изменить текущий массив и вы ожидаете модифицированный, вам следует использовать map().
    Если вы просто хотите перебрать массив, вы можете использовать forEach().
    Если вы ожидаете отфильтрованных значений из заданного массива, вам следует использовать метод filter().
  • Поскольку forEach() возвращает значение undefined, вы не можете присоединить к нему другие функции, такие как filter().
    Вы можете легко применить filter() с помощью map().
    Другие методы JavaScript можно подключить с помощью метода filter().

Это все для этой статьи. Если вы считаете эту статью полезной, пожалуйста, ознакомьтесь и с другими статьями.

Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord . Заинтересованы в хакинге роста? Ознакомьтесь с разделом Схема.