JavaScript
Когда использовать forEach(), map(), filter(), find() и reduce() в массивах JavaScript
Руководство по использованию функций циклов массива JavaScript для разработчиков
Функции массива — это то, что может помочь вам с любыми манипуляциями или перебором массива элементов в JavaScript. Некоторые из готовых функций могут иметь очень похожие варианты использования, поэтому я создал список функций манипулирования, с указанием их внешнего вида и вариантов использования.
.для каждого()
Функция .forEach() — это еще одна форма обычного цикла for, которую можно использовать для перебора элементов массива. Этот случай функции используется для более сложных массивов, например массива объектов с большим количеством записей, чем просто массив целых чисел.
Эта функция принимает 1 параметр .forEach(callback). Параметр callback может принимать до 3 параметров element, index и array (но требуется только параметр element, остальные необязательны).
Параметр element будет использоваться как переменная, хранящая текущий элемент в массиве. Параметр index относится к индексу element в массиве, а параметр array указывает на массив, к которому он был вызван.
Я должен сказать, что более новый готовый цикл for..of в JavaScript намного эффективнее, чем .forEach() в чистоте кода и его производительности.
Пример
Вот пример перебора массива объектов со свойствами имени и записи каждого имени в консоль:
.карта()
Функция .map() — это манипулятивная функция, которая может изменять содержимое каждого элемента в массиве, к которому она вызывается. Эта функция возвращает новый массив с измененными значениями, массив, для которого она вызывается, останется неизменным. Эта функция полезна для внесения небольшого изменения в уже существующий массив, например добавления свойства к объекту или его изменения. Ее конструкция и использование идентичны предыдущей функции .forEach(), и обе могут использоваться взаимозаменяемо.
Как и функция .forEach(), эта функция также принимает только 1 параметр .map(callback). Параметр callback может принимать до 3 параметров element, index и array (но требуется только параметр element, остальные необязательны).
Пример
Вот пример перебора массива объектов со свойствами цены и добавления к нему налогового значения 5%:
.фильтр()
Функция .filter() — это функция поиска, которая возвращает все элементы, удовлетворяющие заданному условию. Вы можете искать по простым терминам, например, этот элемент равен определенному целому числу, или по более сложным терминам, например, поиск объекта с определенным свойством, равным чему-либо. Оба примера очень часто используются разработчиком.
Эта функция возвращает массив найденных результатов, если они есть, даже если найдено только 1 совпадение. Если функция не находит совпадений, она просто возвращает пустой массив.
Как и функция .forEach(), эта функция также принимает только 1 параметр .filter(callback). Параметр callback может принимать до 3 параметров element, index и array (но требуется только параметр element, остальные необязательны).
Примеры
Вот пример поиска по простым терминам в массиве целых чисел и нахождения элементов, равных значению 1:
Вот пример поиска по более сложным терминам в массиве объектов и поиска объектов со свойствами возраста, равными меньше 18:
.находить()
Функция .find() также является функцией поиска, как и предыдущая, но они отличаются одной маленькой деталью — эта функция возвращает только одно совпадение в массиве. Если в массиве более одного результата, функция вернет первый совпавший.
Как и функция .forEach(), эта функция также принимает только 1 параметр .find(callback). Параметр callback может принимать до 3 параметров element, index и array (но требуется только параметр element, остальные необязательны).
Пример
Вот пример поиска по более сложным терминам в массиве объектов и нахождения объекта с именем свойства, равным John Doe:
.уменьшать()
Функция .reduce() — это накопительная функция, которая может найти сумму всех или выбранных значений в массиве. Эта функция также используется в обоих терминах, тем самым поддерживая деконструкцию объекта. Эта функция принимает 2 параметра — .reduce(callback: (accumulator, current), default).
Первым параметром .reduce() является callback, который также принимает 2 параметра — accumulator и current. Параметр accumulator отслеживает текущую сумму, а current будет использоваться как переменная, хранящая текущий элемент в массиве.
Второй параметр .reduce() — это default, это значение по умолчанию, с которого эта функция начнет считать.
Примеры
Вот пример перебора массива целых чисел и добавления каждого значения к общему числу, начиная с 0:
Вот пример перебора массива объектов со значениями свойств и добавления каждого значения к общему числу, начиная с 0:
Заключение
Создание сложных функций, которые запускаются только один раз, — не лучший способ обработки вашего кода, вместо этого вы можете использовать эти функции массива, которые легче вычислить. Итак, это были функции, которые могут помочь вам работать быстрее, чем набирать ненужный код, который можно упростить. Я надеюсь, что вы будете использовать их с умом в своем следующем проекте в качестве разработчика, чтобы быстрее донести свою точку зрения всего с одной строкой кода.
Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter и LinkedIn. Присоединяйтесь к нашему сообществу Discord.
