Функция, которая работает с другими функциями, либо принимая их в качестве аргументов, либо возвращая их, называется функциями высшего порядка.
В большинстве сценариев мы действительно работаем с данными при программировании. Начиная от сбора информации о пользователе и заканчивая вызовами API, фильтрацией некоторого набора доступной информации и т. д. Существует большая вероятность того, что большая часть этих данных будет в формате массива.
Хорошая новость о JavaScript заключается в том, что он предоставляет нам некоторые встроенные функции, которые чрезвычайно упрощают работу с Array.
Базовое понимание того, как работают функции высшего порядка в JavaScript, может упростить сложные итерации по массиву в JavaScript.
В этом уроке мы сосредоточимся на рассмотрении некоторых функций высшего порядка, доступных в JavaScript: forEach()
, filter()
, map()
, reduce()
.
Массив.для каждого()
Синтаксис: array.forEach(обратный вызов)
Метод forEach()
вызывает функцию (известную как функция обратного вызова) один раз для каждого элемента массива в порядке возрастания.
Независимо от имени, которое вы даете аргументам, переданным в функцию обратного вызова в методе массива более высокого порядка, порядок, в котором вы их перечисляете, имеет значение.
Например, если вы хотите использовать метод forEach
только с одним аргументом, вы можете просто напишите как .forEach(index)
. Это означает, что фактическое значение в массиве будет называться этим, а не индексом массива.
Функция обратного вызова в forEach()
принимает 3 аргумента:
1. Индекс текущего элемента
2. Значение текущего элемента
3. Сам массив
Запустите этот код ниже, чтобы получить значение и индекс каждого элемента в массиве. Функция обратного вызова в этом методе filter()
будет перебирать каждый элемент в массиве.
data = [9, 5, 3, 23, 65, 87] data.forEach((value,index,data)=> console.log(`The present number is ${value} having index of ${index}`))
The present number is 9 having index of 0 The present number is 5 having index of 1 The present number is 3 having index of 2 The present number is 23 having index of 3 The present number is 65 having index of 4 The present number is 87 having index of 5
Массив.фильтр()
Синтаксис: array.filter(обратный вызов)
Метод filter()
создает новый подмассив с элементами массива, которые проходят тест, указанный в обратном вызове.
Функция обратного вызова в filter()
принимает 3 аргумента:
1. Индекс текущего элемента
2. Значение текущего элемента
3. Сам массив
Каждый из элементов, прошедших проверку в функции обратного вызова, будет добавлен в новый массив, созданный методом filter()
.
Давайте использовать массив, определенный как data = [9, 5, 3, 23, 65, 87]
, например. Если мы хотим получить только новый массив, в котором значения, которые должны быть внутри массива, должны быть больше 23, мы можем использовать метод filter()
, предоставляемый JavaScript.
Он работает аналогично методу forEach()
, за исключением того, что он создает новый массив
data = [9, 5, 3, 23, 65, 87]
a = data.filter((value)=>{
if (value > 23){
return value;
}
}
)
console.log(a)
//[ 65, 87 ]
Массив.карта()
Синтаксис: array.map(обратный вызов)
Метод map()
создает новый массив с результатами функции обратного вызова, применяемыми к каждому элементу исходного массива.
Функция обратного вызова в filter()
принимает 3 аргумента:
1. Индекс текущего элемента
2. Значение текущего элемента
3. Сам массив
data = [9, 5, 3, 23, 65, 87]
a = data.map((value)=>{
return value * 2;
}
)
console.log(a)
//[ 18, 10, 6, 46, 130, 174 ]
Массив.некоторые()
Синтаксис: array.some(обратный вызов)
Метод some()
удобен, когда вам нужно проверить, соответствует ли какой-либо элемент массива определенному условию. Он возвращает true
, если какое-либо значение соответствует условию, определенному в функции обратного вызова. В противном случае возвращается false
Функция обратного вызова в filter()
принимает 3 аргумента:
1. Индекс текущего элемента
2. Значение текущего элемента
3. Сам массив
data = [9, 5, 3, 23, 65, 87]
a = data.some((value,index,data)=>{
return value < 4;
}
)
console.log(a)
if(a == false){
console.log('it says none of the items is less than 4')
}
//false
//it says none of the items is less than 4
Массив.каждый()
Синтаксис: array.every(обратный вызов)
Метод every()
работает аналогично методу some()
в JavaScript, за исключением того, что он гарантирует, что каждый элемент в массиве пройдет тест в функции обратного вызова, прежде чем он сможет вернуть true.
.
Функция обратного вызова в every()
принимает 3 аргумента:
1. Индекс текущего элемента
2. Значение текущего элемента
3. Сам массив
data = [4, 4, 4, 4, 4, 4]
a = data.every((value,index,data)=>{
return value > 1;
}
)
console.log(a)
//true
Массив.findIndex()
Синтаксис: array.findIndex(обратный вызов)
Метод findIndex()
возвращает индекс первого элемента массива, прошедшего проверку, предоставленную обратным вызовом. Возвращает -1
, если совпадений не существует
data = [8, 10, 9, 1, 3, 0]
a = data.findIndex((value,index,data)=>{
return value < 4;
}
)
console.log(a)
//3
Массив.уменьшить()
Синтаксис:array.reduce(обратный вызов, начальное значение)
Метод reduce()
сводит массив к одному значению. Возвращаемое одиночное значение может быть любой структурой данных, т. е. числом, массивом и т. д. Сначала функция обратного вызова запускается для начального значения, а затем для каждого элемента массива, начиная слева направо. Array.reduceRight
работает аналогично этому, но начинает свою итерацию справа налево.
Функция обратного вызова в reduce()
принимает 4 аргумента:
1. Начальное значение
2. Текущее значение элемента
3. Текущий индекс элемента
4. Сам массив
data = [8, 10, 9, 7, 9, 4]
sumOfNumbers = data.reduce((previousTotal,value)=>{
return previousTotal + value;
}, 0
)
console.log(sumOfNumbers)
//47
Заключительная мысль
До сих пор мы могли работать с функциями высшего порядка JavaScript. Эти функции очень удобны, потому что они делают итерацию по массиву JavaScript бесшовной.