matyushkin 14 января 2020
0
2963

Функциональный JavaScript: 6 образцов кода без цикла for

Лаконичные примеры того, как бывает удобно вместо циклов использовать every, map, reduce и filter. Сравниваем попарно код с применением for и функциональное решение.

Зачем заменять циклы?

Использование функций высшего порядка делает ваш код:

  • более читаемым,
  • понятнее,
  • проще для отладки.

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

1. Перебрать все элементы и получить новый изменённый массив

С циклом:

            var names = ["Jack", "Jecci", "Ram", "Tom"];

var upperCaseNames = [];

for (let i = 0, totalNames = names.length; i < totalNames; i = i + 1) {
  upperCaseNames[i] = names[i].toUpperCase();
}
        

Без цикла:

            var names = ["Jack", "Jecci", "Ram", "Tom"];

var upperCaseNames = names.map(name => name.toUpperCase());
        

Примечание. Если вы используете map, в процессе перебора нельзя сделать break, continue или return. Но если возникает необходимость, такие случаи обычно сводятся к применению методов every или some.

2. Перебрать все элементы и выполнить действие

С циклом:

            function print(name) {
  console.log(name);
}

var names = ["Библиотека", "программиста", "proglib.io"];

for (let i = 0, totalNames = names.length; i < totalNames; i = i + 1) {
  print(names[i])
}
        

Без цикла:

            var names = ["Библиотека", "программиста", "proglib.io"];

names.forEach(name => print(name));
        

3. Отфильтровать массив

Если использовать цикл:

            function isOdd(n) {
  return n % 2;
}

var numbers = [1, 2, 3, 4, 5];

var odd = [];

for (let i = 0, total = numbers.length; i < total; i = i + 1) {
  let number = numbers[i];
  if (isOdd(number)) {
    odd.push(number);
  }
}
        

Используя filter:

            var numbers = [1, 2, 3, 4, 5];

var odd = numbers.filter(n => n % 2); // одна строка
        

4. Найти значение, аккумулирующее значения элементов массива

Сумма чисел, если использовать цикл:

            var numbers = [1, 2, 3, 4, 5]

var result = 0;

for (let i = 0, total = numbers.length; i < total; i = i + 1) {
  result = result + numbers[i];
}
        

Используя reduce:

            var numbers = [1, 2, 3, 4, 5];

var result = numbers.reduce((acc, val) => acc + val, 0);
        

5. Проверить, содержит ли массив значение

Если использовать цикл:

            var names = ["prog", "frog", "IO"];

for (let i = 0, totalNames = names.length; i < totalNames; i = i + 1) {
  if (names[i] === "frog") {
    console.log("%c found frog", "color:red");
    return;
  }
}
        

Используя some:

            var names = ["prog", "frog", "IO"];

let isRahulPresent = names.some(name => name === "frog");

if (isRahulPresent) {
  console.log("%c found frog", "color:red");
}
        

%c в выражении будет применять стиль к тексту консоли.

6. Проверить, соответствует ли условию каждый элемент массива

Если использовать цикл:

            var num = [1, 2, 3, 4, 5, 0];

for (let i = 0, total = numbers.length; i < total; i = i + 1) {
  if (num <= 0) {
    console.log("0 present in array");
  }
}
        

Используя every:

            var num = [1, 2, 3, 4, 5, 0];

var isZeroFree = num.every(e => e > 0);

if (!isZeroFree) {
  console.log("0 present in array");
}
        

Заключение

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

Что ещё вам было бы интересно узнать о JavaScript?

Источники

РУБРИКИ В СТАТЬЕ

МЕРОПРИЯТИЯ

moscowcss №17
06 февраля Москва Бесплатно
Продано! 2020
28 января Москва Онлайн Бесплатно
GameDev Meetup Belgorod vol.2
23 января Белгород Бесплатно

Комментарии 0

ВАКАНСИИ

Разработчик Unity 3D
Новосибирск, по итогам собеседования
Technical Lead – PHP
Монреаль, по итогам собеседования
Программист 3D графики на С++
по итогам собеседования
Research Analyst
Амстердам, по итогам собеседования

ЛУЧШИЕ СТАТЬИ ПО ТЕМЕ

BUG