Основные операции с массивами, объединяющие Map, Filter и Reduce в JavaScript

Здравствуйте, друзья! Надеюсь, сегодня у вас все хорошо. В наше время трудно заниматься программированием, не применяя концепции функционального программирования к нашему коду, что делает его более читаемым, сопровождаемым и тестируемым.

Очень распространенным и популярным мышлением в современном мире программирования является программирование в стиле обработки массивов. Это подразумевает использование массивов в качестве фундаментальной структуры данных, которая будет обрабатывать ряд операций над каждым из своих элементов.

Это полезный контекст для применения при заполнении части компонентов, например, в React, где мы можем использовать метод map() для итерации по заданному массиву для отображения его содержимого в этой области вместе с HTML (JSX), и в то же время, используя метод filter() для удаления нерелевантных данных перед использованием их на карте, или для простого дублирования значений элементов числового массива или получения общего числа всех из них с помощью метода reduce.

Позвольте мне привести вам пару примеров некоторых случаев, когда мы можем использовать методы filter(), reduce() и map() в JavaScript, чтобы найти решение с помощью этих современных абстракций цикла for. Имейте в виду, что все эти операции можно прекрасно выполнить с помощью обычного цикла for, но на этот раз мы собираемся замарать руки функциональным программированием в нашем JavaScript-коде, не так ли, друзья?

Давайте начнем с примера добавления всех элементов массива. Для этого мы будем использовать классический цикл for и метод reduce:

const arrNumbers = [1,2,3,4,5,6];

// With plain JavaScript
let total = 0;
for (let i = 0; i < arrNumbers.length; i += 1) {
total += arrNumbers[i];
}

console.log(`The sum of all items is: ${total}`) // should be 21

// Using the Reduce Method this goes like this:
const sumAllItems = arrNumbers.reduce((prev, curr) => prev + curr, 0);

console.log(`Reducing all items to a total of: ${sumAllItems}`) 
// this should also be 21

Как видите, в обоих случаях у нас есть накопитель, кулак — total, а затем переменная sumAllItems, которая будет продолжать добавлять значение следующего элемента к накопленному, пока не завершится последний круг цикла, довольно круто, правда?

Хорошо, а что если у меня есть запрос на создание функции, которая принимает массив чисел и одно число в качестве аргумента… затем это одно число суммируется с каждым элементом массива: Должны ли мы использовать обычный цикл for или просто пойти по пути функционального программирования этого маленького негодяя, используя метод map? Что ж, давайте сделаем и то, и другое, хорошо?

// Plain JavaScript Code
function additionWithVanilla(arr, amount) {
  let addNumbers = [];
  for (let i = 0; i < arr.length; i++) {
    addNumbers.push(arr[i] + amount);
  }
  return addNumbers;
}

console.log(additionWithVanilla([1, 2, 3, 4, 5], 8));
// result [ 9, 10, 11, 12, 13 ]

// Same function using EcmaScript 6
const addition = (arr, amount = 0) => arr.map((el) => el + amount);

console.log(addition([1, 2, 3, 4, 5], 8));
// result [ 9, 10, 11, 12, 13 ]

Ну, это было довольно круто, скажут некоторые, но что если я хочу, чтобы к общему числу прибавлялись только нечетные числа? Ну, в таком случае, давайте сделаем это двумя способами, функциональным и классическим структурно-подобным программированием, готовы?

Сначала с помощью цикла for мы используем условие, которое будет суммировать только все нечетные числа. Затем, с помощью EcmaScript, мы объединим метод filter, чтобы вернуть массив только нечетных элементов, а затем используем метод reduce, чтобы сложить эти элементы в общий итог и вывести его на печать. Слишком много? Вот пример:

const arrMixedNumbers = [1, 2, 3, 4, 5, 6];

// With plain JavaScript
let totalOddNumbers = 0;
for (let i = 0; i < arrMixedNumbers.length; i += 1) {
  if (arrMixedNumbers[i] % 2 == 0) {
    totalOddNumbers += arrMixedNumbers[i];
  }
}

console.log(`The sum of all odd numbers: ${totalOddNumbers}`);
// should be 12

// Using the Filter combined with Reduce Method to get the result:
const sumAllOddNumbs = arrMixedNumbers
  .filter((item) => item % 2 == 0)
  .reduce((total, currentValue) => total + currentValue, 0);

console.log(`Filtered Reduction of Odd numbers: ${sumAllOddNumbs}`);
// this should also be 21

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

Допустим, мы извлекли массив с именами известных игроков FIFA, и их имена почему-то в разных падежах, однако мы хотим перевести их все в верхний регистр, чтобы все они выглядели круто, как нам это сделать? Ну, друзья, давайте я расскажу вам, как бы я это сделал, используя эти методы:

const fifaPlayers = [
  "Cristiano Ronaldo",
  "Mohamed salah",
  "robert lewandowski",
  "Leonel MESSI",
  "LUKA Modric",
  "Antoine griezmann",
];
const namesInUppercaseArr = [];

for (let i = 0; i < fifaPlayers.length; i += 1) {
  namesInUppercaseArr.push(fifaPlayers[i].toUpperCase());
}

console.log(namesInUppercaseArr);

// Let's do the same exact thing but using the ES6 map method
console.log(fifaPlayers.map((player) => player.toUpperCase()));

Резюме:

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

❤️ Если вам понравилась эта статья, это мотивирует писать больше!
🦄 Если вы действительно считаете, что эта статья помогла вам в полной мере!
🔖 Если вы захотите вернуться к этой статье позже.
🤔 Пожалуйста, оставьте свой комментарий, ваше мнение очень важно.