14 января 2020

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

Пишу, перевожу и иллюстрирую IT-статьи. На proglib написал 140 материалов. Увлекаюсь Python, вебом и Data Science. Открыт к диалогу – ссылки на соцсети и мессенджеры: https://matyushkin.github.io/links/ Если понравился стиль изложения, упорядоченный список публикаций — https://github.com/matyushkin/lessons
Лаконичные примеры того, как бывает удобно вместо циклов использовать every, map, reduce и filter. Сравниваем попарно код с применением for и функциональное решение.
Функциональный JavaScript: 6 образцов кода без цикла for

Хочешь уверенно проходить IT-интервью?

Готовься к IT-собеседованиям уверенно с AI-тренажёром T1!

Мы понимаем, как сложно подготовиться: стресс, алгоритмы, вопросы, от которых голова идёт кругом. Но с AI тренажёром всё гораздо проще.

💡 Почему Т1 тренажёр — это мастхэв?

  • Получишь настоящую обратную связь: где затык, что подтянуть и как стать лучше
  • Научишься не только решать задачи, но и объяснять своё решение так, чтобы интервьюер сказал: "Вау!".
  • Освоишь все этапы собеседования, от вопросов по алгоритмам до диалога о твоих целях.

Зачем листать миллион туториалов? Просто зайди в Т1 тренажёр, потренируйся и уверенно удиви интервьюеров. Мы не обещаем лёгкой прогулки, но обещаем, что будешь готов!

Реклама. ООО «Смарт Гико», ИНН 7743264341. Erid 2VtzqwP8vqy


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

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

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

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

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?

Источники

МЕРОПРИЯТИЯ

Комментарии

ВАКАНСИИ

Добавить вакансию
Hotel Search Team Lead (Golang)
по итогам собеседования
Golang-разработчик
Пермь, по итогам собеседования

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