Зачем заменять циклы?
Использование функций высшего порядка делает ваш код:
- более читаемым,
- понятнее,
- проще для отладки.
Без лишних комментариев мы хотим показать шесть ситуаций, когда цикл – плохой выбор. К каждому примеру даётся альтернативный вариант решения через функции.
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");
}
Заключение
Используемый подход относится к функциональному программированию. Если понравилось, у нас есть подборка ресурсов об этой концепции и стиле написания кода.
Комментарии