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

Функциональный 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?

proglib.io

Добавить комментарий

Ваш e-mail не будет опубликован.

тринадцать − 3 =