I Shar

I Shar

мир глазами веб-разработчика

JavaScript: функции высшего порядка вместо циклов

почему вместо циклов нужно использовать функции высшего порядка: map, reduce, filter

I Shar

время чтения 3 мин.

Photo by Marc Schulte on Unsplash

Функция, принимающая в качестве аргументов другие функции или возвращающая функцию в качестве результата, называется функцией высшего порядка. Такая функция имеет тот же статус, что и другие объекты данных. Одна из хороших особенностей JavaScript - способность принимать такие функции. Это делает язык пригодным для функционального программирования.

Содержание



Зачем отказываться от циклов?

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

  1. хорошо читаемым,
  2. легким в понимании,
  3. пригодным к быстрому внесению исправлений и модификаций.

Рассмотрим примеры кода.

Перебрать все элементы массива и создать новый измененный массив

С помощью цикла:

var names = ["Jack", "Jecci", "Ram", "Tom"];
var upperCaseNames = [];
for(let i=0, totalNames = names.length; i< totalNames ; i= i +1) {
    upperCaseNames = names[i].toUpperCase();
}

Без цикла:

var names = ["Jack", "Jecci", "Ram", "Tom"];
var upperCaseNames = names.map(name => name.toUpperCase());

Перебрать все элементы массива и выполнить действие

С помощью цикла:

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

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

С помощью цикла 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

Манипуляции с элементами массива

Получим сумму элементов массива с помощью цикла:

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

Проверить массив на наличие значения

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 определяет стиль текста выводимого в консоли.

Проверить элементы массива на соответствие условию

С помощью цикла for:

var num = [1,2,3,4,5, 0];
for(let i=0, total = numbers.length; i< total ; i= i +1) {
    if(num <= 0) {
      break;
      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");
}


Спасибо за внимание.

    • frontend
    • js

Новые публикации

Далее

Категории

О нас

Frontend & Backend. Статьи, обзоры, заметки, код, уроки.