От автора: узнайте, как заменить циклы и использовать функции высшего порядка, такие как map, Reduce и Filter.
Почему мы заменяем циклы?
Использование функций высшего порядка сделает ваш код:
Более читабельный.
Понятным.
Отлаживаемым.
1. Перебрать все элементы и получить новый модифицированный массив
Используя цикл:
|
1 2 3 4 |
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(); } |
Без цикла:
|
1 2 |
var names = ["Jack", "Jecci", "Ram", "Tom"]; var upperCaseNames = names.map(name => name.toUpperCase()); |
Примечание: если вы используете map, вы не можете ввести break или continue или return во время цикла. Для этого случая вы должны использовать every или some.
2. Перебрать все элементы и выполнить действие
Используя циклы:
|
1 2 3 4 5 6 7 |
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]) } |
без цикла
|
1 2 |
var names = ["Jack", "Jecci", "Ram", "Tom"]; names.forEach(name=> print(name)); |
3. Фильтрация массива
Используя стандартный цикл for:
|
1 2 3 4 5 6 7 8 9 10 11 |
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:
|
1 2 |
var numbers = [1,2,3,4,5, 6, 7] var odd = numbers.filter(n => n%2); // single line |
4. Создание вывода с элементами массива
Сумма чисел:
|
1 2 3 4 5 |
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:
|
1 2 3 4 5 6 |
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); |
Приведенный выше код может быть еще более упрощенным:
|
1 2 |
var numbers = [1,2,3,4,5,6,7, 10]; var result = numbers.reduce((acc, val)=> acc+val, 0); |
5. Проверка, содержит ли массив значение
|
1 2 3 4 5 6 7 |
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:
|
1 2 3 4 |
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:
|
1 2 3 4 5 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:
|
1 2 3 4 5 |
var num = [1,2,3,4,5, 0]; var isZeroFree = num.every(e => e > 0); if(!isZeroFree) { console.log("0 present in array"); } |
Спасибо за прочтение. Надеюсь, вам это нравится.
Источник: //medium.com
Редакция: Команда webformyself.
