JavaScript - это мультипарадигмальный язык, который позволяет нам свободно смешивать и сопоставлять объектно-ориентированные, процедурные и функциональные парадигмы. В последнее время наметилась тенденция к функциональному программированию. В таких фреймворках, как Angular и React, мы действительно можем повысить производительность, используя неизменяемые структуры данных. Неизменяемость - это основной принцип функционального программирования.
Давайте сначала поймем, почему я называю их функциональными методами. Ну, из-за их внутренней работы, то есть функционального программирования. Какие? Никогда об этом не слышал? Хорошо, прими таблетку от холода, вот для чего я здесь.
Итак, что же такое функциональное программирование?
Функциональное программирование - это декларативная парадигма программирования. Его основной упор делается на что решать в отличие от императивного стиля, где основной упор делается на как решать.
- Определения функций - это деревья выражений, каждое из которых возвращает значение, а не последовательность императивных операторов, изменяющих состояние программы.
- Функции рассматриваются как первоклассные граждане (сущность, поддерживающая все операции). В основном это означает, что они могут быть привязаны к именам, передаваться в качестве аргументов и возвращаться из других функций, как и другие типы данных.
Теперь давайте перейдем к нашей основной теме - функциональным методам массива JavaScript.
Learning_status = [];
1. карта ()
Метод map()
создает новый массив, заполненный результатами вызова предоставленной функции для каждого элемента в вызывающем массиве.
SYNTAX: let cooked_array = cook.map(function callback(value [, index[, array]) { // return element for cooked_array });
Давайте разберемся на примере.
Код:
let numbers = [ 1, 2, 3, 4, 5 ] let mappedArray = numbers.map(value, index, array) { return (value * 2) ; } console.log(mappedArray) ;
Выход:
[ 2, 4, 6, 8, 10]
Карта создаст еще один (новый) массив на основе массива чисел. Другими словами, мы будем запускать функцию для каждого элемента массива, который вы передаете (который вы вызываете), в данном случае это числа.
Так что он будет работать функция для каждого из этих значений, то есть 1,2,3,4 и 5, и вернуть результат (умноженный на 2) этих функций в этот новый массив.
Learning_status = [«карта»];
2. фильтр ()
Метод filter()
создает новый массив со всеми элементами, которые проходят проверку, реализованную предоставленной функцией.
SYNTAX: let cooked_array = cook.filter(function callback(value [, index[, array]) { // return element for cooked_array });
Код:
let numbers = [ 1, 2, 3, 4, 5 ] let filteredArray = numbers.filter(value, index, array) { return (value > 3) ; } console.log(filteredArray) ;
Выход:
[ 4, 5 ]
По сути, мы возвращаем логическое выражение для каждого обратного вызова. Фильтр проверит каждый элемент массива numbers и проверит условие (больше 3), и эти значения будут добавлены в filterArray.
Learning_status = [«карта», «фильтр»];
3. уменьшить ()
Метод reduce()
выполняет функцию редуктора (которую мы предоставляем) для каждого элемента массива, в результате чего получается одно выходное значение.
SYNTAX: let cooked_array = cook.reduce(function callback(accumulator, value[, index[, array]] ) { // return single output value } [, initialValue]);
Теперь, что делает аккумулятор в вышеуказанных параметрах?
аккумулятор - накапливает значения, возвращаемые обратным вызовом. Таким образом, это значение может быть одним из этих двух значений:
1. ранее возвращенное значение при последнем вызове обратного вызова.
2. или начальное значение если передано в метод reduce ().
Примечание. initialValue - это значение, которое следует использовать в качестве первого аргумента при первом вызове callback
. Если initialValue не задано, первый элемент в массиве будет использоваться как начальное значение аккумулятора и пропущен как значение. Если массив пуст и не указано initialValue, будет выбрано TypeError
.
Код:
let numbers = [ 1, 2, 3, 4, 5 ] let reducedArray = numbers.reduce( acc, value, index, array) { return (acc + value) ; } console.log(reducedArray) ;
Выход:
15
Как? Позволь мне объяснить. Поскольку мы не предоставляем никакого initialValue, аккумулятор примет первый элемент массива чисел, то есть 1, а значение пропустит первое значение и будет 2.
- Аккумулятор начинается с 1 и value = 2, поэтому обратный вызов возвращает (acc + value) 1 + 2 = 3.
- Теперь acc = 3 (возвращаемое значение) и value = 3 (следующее значение в массиве чисел) возвращает 3 + 3 = 6.
- acc = 6, value = 4, возвращает 6 + 4 = 10.
- acc = 10, value = 5, возвращает 10 + 5 = 15.
Learning_status = [«карта», «фильтр», «уменьшить»];
Это основные примеры того, что вы можете сделать с помощью этих методов. Но этим они не ограничиваются. С помощью этих методов вы можете делать так много творческих и безумных вещей. Посмотри на это изображение… это весело, не так ли?
Так что продолжайте экспериментировать с этими методами, потому что экспериментировать не будет вреда. Неудивительно, что каждый раз, используя эти методы, вы находили что-то новое. В этом красота программирования. Не забывайте попрактиковаться, прежде чем использовать их в реальном проекте.
Спасибо, что прочитали. Помогите мне стать лучше, поделившись своими ценными отзывами.
Учитесь, применяйте, делитесь и помогайте.