Как выбрать правильные HOF для использования

Привет, разработчики! 🌼

Я студент full-stack dev, и сегодня я помогу вам выбрать правильную функцию высокого порядка (ФВП) для использования в вашей ситуации.

Мы используем HOF с массивами. HOF проходят через каждый элемент массива, как и при использовании простой функции for, но проще.

Для применения этих функций я буду использовать результат конечной точки «/characters» из API Breaking Bad. [доступно здесь].

HOF, о которых я буду говорить в этой статье, следующие: forEach, map, find, some, every, filter, sort и reduce.

Параметры в HOF’ах

Эти функции уже имеют исходные параметры.

  • Первый параметр: текущий элемент.
  • Второй параметр: индекс текущего элемента.
  • Третий параметр: весь массив.
const array = [0, 1, 2, 3, 4];
array.forEach((element, index, allArray) => {
  console.log(`The element ${element} is in the position ${index} of the array ${allArray}`);
});

/* this code output:
The element 0 is in the position 0 of the array 0,1,2,3,4
The element 1 is in the position 1 of the array 0,1,2,3,4
The element 2 is in the position 2 of the array 0,1,2,3,4
The element 3 is in the position 3 of the array 0,1,2,3,4
The element 4 is in the position 4 of the array 0,1,2,3,4
*/
Вход в полноэкранный режим Выход из полноэкранного режима

Функции

.forEach()

Наиболее важной особенностью этой функции является то, что она ничего не возвращает. Из-за этого мы используем ее, когда хотим, чтобы функция что-то выполнила, не требуя ничего взамен. Это означает, что нам не нужно присваивать ей const.

const  characters  =  require('../characters-data/characters');

const  result  =  characters.forEach((cur) =>  console.log(cur.name));
/*
Walter White
Jesse Pinkman
...
Ignacio Varga
Eduardo Salamanca
*/

console.log('Result of const: ', result);
// Result of const: undefined
Вход в полноэкранный режим Выход из полноэкранного режима

.map()

Очень похоже на функцию .forEach(). Разница в том, что эта функция возвращает массив той же длины, что и исходный. В своих проектах я в основном использую ее для рендеринга всех элементов, присутствующих в массиве внутри React-компонента.

const  characters  =  require('../characters-data/characters');

const  result  =  characters.map((cur) =>  cur.name);

console.log(result);
/*
[ 'Walter White', 'Jesse Pinkman', 'Skyler White', ...  'Ignacio Varga', 'Eduardo Salamanca' ]
*/
Вход в полноэкранный режим Выйти из полноэкранного режима

.filter()

Как следует из собственного названия, эта функция фильтрует наш массив в соответствии с проверкой, сделанной нами. Нам нужно только создать условный тест, а фильтр будет проверять, вернется ли результат true или false. Если true, то текущий элемент будет частью возвращаемого массива.

Эта функция — моя любимая. Мы можем использовать ее для создания массива с нужными нам значениями. Очень полезно.

const  characters  =  require('../characters-data/characters');

const  result  =  characters.filter((cur) =>  cur.name.includes('White'));

console.log(result);
/*
[
    {
        char_id: 1,
        name: 'Walter White',
        ...
    },
    {
        char_id: 3,
        name: 'Skyler White',
        ...
    },
    {
        char_id: 4,
        name: 'Walter White Jr.',
        ...
    },
    {
        char_id: 39,
        name: 'Holly White',
        ...
    }
]
*/
Вход в полноэкранный режим Выход из полноэкранного режима

Если ни один из элементов не удовлетворяет условию, функция возвращает пустой массив.

const  characters  =  require('../characters-data/characters');

const  result  =  characters.filter((cur) =>  cur.name.includes('Bla Bla Bla'));

console.log(result); // []
Войти в полноэкранный режим Выход из полноэкранного режима

.find()

Эта функция похожа на фильтр. Нам нужно передать условие, но возвращен будет только первый элемент, подходящий под него. Легко увидеть разницу между find и filter, когда мы используем одно и то же условие в обеих функциях, а результат получается разный.

const  characters  =  require('../characters-data/characters');

const  result  =  characters.find((cur) =>  cur.name.includes('White'));

console.log(result);
 /*
 {
     char_id: 1,
     name: 'Walter White',
     birthday: '09-07-1958',
     occupation: [ 'High School Chemistry Teacher', 'Meth King Pin' ],
     img: 'https://images.amcnetworks.com/amc.com/wp-content/uploads/2015/04/cast_bb_700x1000_walter-white-lg.jpg',
     status: 'Presumed dead',
     nickname: 'Heisenberg',
     appearance: [ 1, 2, 3, 4, 5 ],
     portrayed: 'Bryan Cranston',
     category: 'Breaking Bad',
     better_call_saul_appearance: []
}
 */
Вход в полноэкранный режим Выход из полноэкранного режима

Если ни один из элементов не подходит под условие, функция возвращает undefined.

const  characters  =  require('../characters-data/characters');

const  result  =  characters.find((cur) =>  cur.name.includes('Bla Bla Bla'));

console.log(result); // undefined
Войти в полноэкранный режим Выход из полноэкранного режима

.some()

В отличие от предыдущих функций, some возвращает true или false. Ответ будет зависеть от того, удовлетворяет ли хотя бы один элемент используемому условию.

const  characters  =  require('../characters-data/characters');

const  result  =  characters.some((cur) =>  cur.nickname  ===  'Heisenberg');

console.log(result); // true
Войти в полноэкранный режим Выход из полноэкранного режима

.every()

Как и функция some, она возвращает true или false. Разница в том, что все элементы должны соответствовать условию, чтобы вернуть true.

const  characters  =  require('../characters-data/characters');

const  result  =  characters.every((cur) =>  cur.nickname  ===  'Heisenberg');

console.log(result); // false
Вход в полноэкранный режим Выход из полноэкранного режима

.reduce()

Эта функция получает другой набор параметров.

  • Первый параметр: аккумулятор, в котором хранится число.
  • Второй, третий и четвертый — в той же последовательности, как показано ранее.

Мы используем эту функцию для вычисления чего-то, присутствующего во всех элементах. В примере мы используем ее для вычисления количества персонажей в сериале Breaking Bad.

const  characters  =  require('../characters-data/characters');

const  howUseIt  =  characters.reduce((acc, _curr, id, _array) => {
    console.log(`There is ${acc} accumulated, we are at position ${id}`);
    return  acc  +  1
}, 0);

/*
There is 0 accumulated, we are at position 0
There is 1 accumulated, we are at position 1
There is 2 accumulated, we are at position 2
...
There is 61 accumulated, we are at position 61
*/

console.log('There are '  +  howUseIt  +  ' characters on the show');
// There are 62 characters on the show
Вход в полноэкранный режим Выход из полноэкранного режима

Вы можете заметить, что после обратного вызова стоит ноль. Это число является начальным числом, используемым в качестве нашего аккумулятора. Во втором примере мы видим, что произойдет, если это число будет равно 10.

const  characters  =  require('../characters-data/characters');

const  result2  =  characters.reduce((acc) =>  acc  +  1, 10);

console.log(result2); // 72
Вход в полноэкранный режим Выход из полноэкранного режима

.sort()

В работе над этой функцией мне очень помог друг, который учится вместе со мной, Артур Коэльо. Он дал мне несколько советов о том, как она работает, и подсказал, как отсортировать массив случайным образом с помощью этой функции.

Мы используем эту функцию, когда нам нужно отсортировать массив в соответствии с каким-либо правилом. Наиболее отличительной особенностью этой функции является то, что она изменяет исходный массив.

const  myArray  = [90, 78, 65, 54, 09, 45, 35];

console.log(myArray); // [ 90, 78, 65, 54 ]

const  sorting  =  myArray.sort(() =>  Math.random() >  0.5  ?  -1  :  1);

console.log('sorting: ', sorting ); // sorting: [ 54, 78, 90, 65 ]
console.log(myArray); // [ 54, 78, 90, 65 ]
Вход в полноэкранный режим Выход из полноэкранного режима

Как отсортировать массив случайным образом: Мы используем функцию Math.random. Она возвращает случайное число в диапазоне от 0 до 1. Нам просто нужно использовать троичный оператор для определения возврата.

Функция sort, как и reduce, работает с разными параметрами.

  • Первый параметр: текущий элемент.
  • Второй параметр: следующий элемент.

Мы должны создать условие, которое возвращает число. Если оно возвращает отрицательное число, то последовательность остается прежней. Если возвращает положительное число, то порядок изменится, где первый параметр и второй поменяются местами. По условию, мы обычно используем числа 1 и -1.

Во-первых, у нас есть сортировка по имени. Когда мы сравниваем две строки, та, которая «больше», на самом деле является той, которая находится ближе к концу алфавита. Поэтому, если мы хотим получить ее в алфавитном порядке, мы должны поменять местами слова (вернуть положительное число).

const  characters  =  require('../characters-data/characters');

const  result  =  characters.sort((a, b) =>  a.name  <  b.name  ?  -1  :  1);

console.log(result);
/*
[
    {
        char_id: 31,
        name: 'Adam Pinkman',
        ...
    },
    {
        char_id: 23,
        name: 'Andrea Cantillo',
        ...
    },
    ...
    {
        char_id: 4,
        name: 'Walter White Jr.',
        ...
    },
    {
        char_id: 36,
        name: 'Wendy S.',
        ...
    }
]
*/
Войти в полноэкранный режим Выйти из полноэкранного режима

Теперь сортировать числа проще, чем слова, так как если мы возвращаем вычитание между ними, то уже возвращаем положительное или отрицательное число.

const  characters  =  require('../characters-data/characters');

// If we want a crescent order we use 'a - b'
// If we want a descending order we use 'b - a'
const  result  =  characters.sort((a, b) =>  a.char_id  -  b.char_id);

console.log(result);

/*
[
    {
        char_id: 1,
        ...
    },
    {
        char_id: 2,
        ...
    },
    {
        char_id: 3,
        ...
    },
    ...
]
*/
Войти в полноэкранный режим Выход из полноэкранного режима

Если вы видите что-то, что можно улучшить, пожалуйста, свяжитесь со мной! Все отзывы очень приветствуются.✨

Оцените статью
devanswers.ru
Добавить комментарий