Функциональный JavaScript: 6 образцов кода без цикла 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?