Главная » Статьи » Вам не нужны циклы в JavaScript

Вам не нужны циклы в JavaScript

Вам не нужны циклы в JavaScript

От автора: узнайте, как заменить циклы и использовать функции высшего порядка, такие как map, Reduce и Filter.

Почему мы заменяем циклы?

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

Более читабельный.

Понятным.

Отлаживаемым.

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 = ["Jack", "Jecci", "Ram", "Tom"];
for(let i=0, totalNames = names.length; i< totalNames ; i= i +1) { print(names[i])
}

без цикла

var names = ["Jack", "Jecci", "Ram", "Tom"];
names.forEach(name=> print(name));

3. Фильтрация массива

Используя стандартный цикл for:

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, 6, 7]
var odd = numbers.filter(n => n%2); // single line

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,6,7];
function sum(accumulator, currentValue){ return accumulator + currentValue;
}
var initialVal = 0;
var result = numbers.reduce(sum, initialVal);

Приведенный выше код может быть еще более упрощенным:

var numbers = [1,2,3,4,5,6,7, 10];
var result = numbers.reduce((acc, val)=> acc+val, 0);

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

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

Использование some:

var names = ["ram", "raj", "rahul"];
let isRahulPresent = names.some(name => name==="rahul");if(isRahulPresent) { console.log("%c found rahul", "color:red"); }

%c в операторе console применяет стиль к тексту консоли.

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

Используя цикл for:

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");
}

Спасибо за прочтение. Надеюсь, вам это нравится.

Источник: https://medium.com

Редакция: Команда webformyself.