Очень часто мне приходится выполнять какие-то операции над массивом объектов, и какое-то время я не знал, какое решение лучше.

Поэтому я попробовал несколько вещей, которые я опишу в этой истории.\

Эта история может вас заинтересовать, если вы на самом деле не знаете, когда использовать map, forEach и filterметоды, иначе вы ничему не научитесь, но не стесняйтесь продолжать, если хотите.

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

Контекст

Давайте определим контекст нашего примера.

У меня есть массив пользователей, и я хочу получить всех пользователей с проверенной учетной записью, скажем, наш массив выглядит примерно так:

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

Возможные решения

  1. Некрасивый метод

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

В console.log массив будет выглядеть примерно так:

Так в чем проблема, наша функция выполняет свою работу. Здесь есть несколько плохих моментов:

  • Во-первых, наиболее важно то, что функция map должна использоваться, когда вы хотите изменитьзначения каждого элемента в массиве, поэтому эта функция должна что-то возвращать, поэтому вместо сопоставления функция использовать здесь будет forEach, так что это должно выглядеть примерно так:

Результат тот же.

  • Вторая проблема заключается в том, что мы просто используем неправильный метод. Действительно, нам нужен массив результатов, и для этого мы должны: создать пустой массив, отобразить в текущий массив, затем для каждого элемента мы проверяем его свойство accountValidated, затем, если проверка пройдена, мы нажимаем это в наш новый массив. Слишком большая ответственность за этот цикл.

2. Лучшее решение

Лучшее решение состоит в использовании метода filter, который делает именно то, что мы хотим согласно его документации:

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

Использование этого метода довольно простое, вы просто вызываете его для своего массива, затем передаете ему функцию обратного вызова, которая принимает 3 аргумента: текущий обрабатываемый элемент, текущий индекс и массив, для которого был вызван фильтр.

Итак, теперь давайте используем нашу функцию filter в нашем массиве:

Как видите, нужно написать намного меньше кода, чтобы получить то, что мы хотим, и результат тот же — массив, содержащий отфильтрованные элементы. В моем примере я взял только первый параметр, но если бы я хотел, я мог бы использовать индекс, например, для получения только нечетных записей. Вы также можете написать столько условий, сколько хотите, вы просто хотите вернуть boolean , true, чтобы сохранить его, false, чтобы не делать этого.

3. Немного о представлениях

Поскольку в настоящее время все ищут лучшие результаты, вот краткий пример того, почему вы должны прекратить использовать метод ugly, описанный выше.

Вот время, затраченное на сопоставление 50 элементов, таких как массив выше, с помощью метода forEach :

А теперь результат с функцией фильтра:

Как видите, функция filter в два раза быстрее, чем forEach. И даже если мы говорим о небольшом массиве, важно отметить, что вы можете повысить производительность, написав более чистый и компактный код, так почему бы не сделать это?

Вывод

  • Используйте map, когда вы хотите изменить значение каждого элемента (требуется функция возврата)
  • Используйте foreach, когда вам просто нужно выполнить итерацию по вашему массиву (например, вызов функции, но без прямого изменения объекта)
  • Используйте filter, когда вы хотите получить определенные данные вашего массива.

На этом у меня все, надеюсь, вам понравилась моя первая статья на Medium!