Мои 3 любимые функции высшего порядка в JavaScript

Функции высшего порядка — это функции, которые работают с другими функциями, либо принимая их в качестве аргументов, либо возвращая их. В JavaScript есть много встроенных функций высшего порядка, таких как map() и filter(), но вы также можете создавать свои собственные функции высшего порядка.

В этой статье я расскажу о трех функциях высшего порядка в JavaScript: map(), filter() и reduce(). Все они представлены в ES6 и делают код короче и проще.

Метод карты

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

Петля:

const Array = [
  {
    name: "John Doe",
    age: 21
  },
  {
    name: "Abdellah",
    age: 23
  }
]
const newArray = []
for(let i = 0; i < Array.length; i++){
  newArray.push(Array[i])
}

Карта:

const Array = [
 {
 name: “John Doe”,
 age: 21
 },
 {
 name: “Abdellah”,
 age: 23
 }
]
const newArray = Array.map(arr => arr)

Вы видите разницу? в этом случае гораздо проще и лучше использовать карту, чем цикл for. Я также использовал синтаксис стрелочной функции, если вы не знакомы с этим, вы можете прочитать эту статью Стрелочная функция

Метод фильтра

Этот метод создает новый массив со всеми элементами, прошедшими проверку, предоставленную функцией обратный вызов. Метод filter упрощает фильтрацию массива элементов.

Пример:

const Array = [
 {
 name: “John Doe”,
 age: 22
 },
 {
 name: “Abdellah”,
 age: 23
 },
 {
 name: “Ace”,
 age: 23
 }
]
const newArray = Array.filter(item => item.age === 23)

Метод редуктора

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

Функция редуктора может принимать четыре аргумента: аккумулятор, текущее значение, текущий индекс и исходный массив.

При первом вызове функции аккумулятор будет равен либо первому значению в массиве, либо начальному значению, если вы его указали.

Аккумулятор — это значение, которое мы получим в конце, а currentValue — это текущий обрабатываемый элемент в массиве.

Пример:

const Array = [5 ,6 ,6]
const sum = Array.reduce((acc, val) => {
 return acc + val
})

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

Заворачивать

Сопоставление, фильтрация и сокращение очень полезны в JavaScript и позволяют писать простой и короткий код по сравнению с другими традиционными способами, такими как цикл for. Я надеюсь, что вы узнали что-то из этой статьи. Это всего лишь обзор этих методов, если вы хотите получить более подробную информацию, есть много ресурсов, чтобы углубиться в них.