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. Аккумулятор начинается с 1 и value = 2, поэтому обратный вызов возвращает (acc + value) 1 + 2 = 3.
  2. Теперь acc = 3 (возвращаемое значение) и value = 3 (следующее значение в массиве чисел) возвращает 3 + 3 = 6.
  3. acc = 6, value = 4, возвращает 6 + 4 = 10.
  4. acc = 10, value = 5, возвращает 10 + 5 = 15.

Learning_status = [«карта», «фильтр», «уменьшить»];

Это основные примеры того, что вы можете сделать с помощью этих методов. Но этим они не ограничиваются. С помощью этих методов вы можете делать так много творческих и безумных вещей. Посмотри на это изображение… это весело, не так ли?

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

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

Учитесь, применяйте, делитесь и помогайте.