Метод map() создает новый массив с результатами вызова предоставленной функции для каждого элемента в вызывающем массиве. [MDN]

Пример:

let arr1 = [2,3,4]
let arr2 = arr1.map(val => val*2)

Я всегда стараюсь визуализировать то, что узнаю. Итак, я создал изображение, которое поможет вам понять, как оно работает. Карта обычно используется, когда у вас есть массив, и вы хотите выполнить некоторую операцию над каждым значением массива.

Давайте посмотрим определение функции map ():

var new_array = 
arr.map(function callback(currentValue[, index[, array]]) {
    // Return element for new_array
}[, thisArg])

Функция карты в основном принимает функцию обратного вызова. В теле функции вы можете определить, какую операцию вы хотите выполнить со значением массива. Эта функция запускает операцию с каждым значением массива. Но вы видели, что мы используем карту (val = ›val * 2). а точнее карта (() = ›{}). Это происходит из функционального программирования javascript. Если вы хотите узнать больше о функциональном программировании, то здесь [ссылка]. Или вы можете попробовать любой другой учебник.

Помните, что map () не изменяет значения основного массива. Скорее он создает новый массив с изменениями.

Но вы видели, что мы используем карту (val = ›val * 2). а точнее карта (() = ›{}). Это происходит из функционального программирования javascript. Если вы хотите узнать больше о функциональном программировании, то здесь [ссылка]. Или вы можете попробовать любой другой учебник. Мы могли бы написать такой же код без функционального программирования.

let arr1 = [2, 3, 4];
let arr2 = arr1.map(function(val) {
  return val * 2;
});

Работа с map () над массивом объекта:

Хотя мы знаем, что map () не изменяет исходный массив, но вы можете запутаться, увидев, что map () изменяет значение объекта в массиве. Это почему? Давайте посмотрим на пример:

let team = [
  {
     name: 'Anurag',
     age: 27
  },
  {
     name: 'Swarna',
     age: 25
  }
]
team.map( teamMember => {teamMember.age += 10})
console.log(team)

вы увидите такой вывод:

[{name: 'Anurag', age: 37}, {name: 'Swarna', age: 35}]

Так почему это так?
Метод карты клонирует массив, как и предполагалось, но поскольку у нас есть массив объектов, каждый элемент на самом деле является только ссылкой на объект в памяти. Это означает, что он, по сути, клонирует ссылку на объект, которая будет указывать на тот же блок в памяти, что и объекты исходного массива.
Итак, когда мы изменяем свойства объекта в методе обратного вызова, мы фактически изменяем свойства через ссылку, которая также изменит исходный объект. Поскольку ссылка на объект находится в исходном массиве, мы также увидим изменения в исходном массиве.
Чтобы узнать больше, перейдите по ссылке [ссылка]

Фильтр

На простом английском языке Filter фильтрует массив значениями, которые вы хотите иметь. Но если быть более точным, метод filter() создает новый массив со всеми элементами, которые передают условие предоставленной функции. Официальный MDN [ссылка].

Пример:

let arr1 = [2,3,4]
let arr2 = arr1.filter(num => (num > 2 && num < 4))

Как видите, у нас есть массив arr1 со значениями [2,3,4]. и нам нужен новый массив со значениями больше 2 и меньше 4. Итак, мы получаем новый массив только со значением 3.

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

let tasks = [
 {
   'name'     : 'Write a blog', 
   'priority' : 1
 },
 {
   'name'     : 'Clean the car',
   'priority' : 2
 },
 {
   'name'     : 'Study JS functions',
   'priority' : 1
 }
]
priorityTasks = tasks.filter( task => task.priority === 1)
console.log(tasks)
console.log(priorityTasks)

Как и map (), filter () также принимает только один аргумент - функцию обратного вызова. Посмотрим, как это будет выглядеть без функционального программирования.

let arr1 = [2,3,4]
let arr2 = arr1.filter(function(num){
     if(num > 2 && num < 4){
          return num;
     }
})

Уменьшать

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

Пример:

const arr1 = [2,3,4]
const reducer = (accumulator, currentValue) => accumulator + currentValue;
let sum = arr1.reduce(reducer, 1);
console.log(sum)

Что тут происходит? Well reduce - это функция, которая принимает два аргумента, функцию и начальное значение для аккумулятора. Аккумулятор - это название того, что снижает доходность. В этом случае мы начинаем подсчет очков с 1.

Функция обратного вызова / редуктор:
редуктор принимает четыре аргумента:

  1. аккумулятор:
    Аккумулятор накапливает возвращаемые значения обратного вызова; это накопленное значение, ранее возвращенное при последнем вызове обратного вызова, или initialValue, если указано (см. ниже).
    При первом вызове обратного вызова аккумулятор и currentValue могут быть одним из двух значений. Если в вызове reduce () указано initialValue, то аккумулятор будет равен initialValue, а currentValue будет равен первому значению в массиве. Если начальное значение не указано, аккумулятор будет равен первому значению в массиве, а текущее значение будет равно второму.
  2. currentValue:
    Текущий обрабатываемый элемент в массиве.
  3. currentIndex: (необязательно)
    Индекс текущего обрабатываемого элемента в массиве. Начинается с индекса 0, если указан initialValue, и с индекса 1 в противном случае.
  4. array: (Необязательно)
    Был вызван массив reduce()

Начальное значение: (необязательно)

Однако начальное значение необязательно. Если начальное значение не указано, будет использоваться первый элемент в массиве. Но вызов reduce() для пустого массива без начального значения является ошибкой.

Подробнее см. MDN [ссылка].

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

Рассмотрим пример объединения обещаний:

let itemIDs = [1, 2, 3, 4, 5];
itemIDs.reduce((promise, itemID) => {
  return promise.then(_ => api.deleteItem(itemID));
}, Promise.resolve());

Это то же самое, что:

Promise.resolve()
.then(_ => api.deleteItem(1))
.then(_ => api.deleteItem(2))
.then(_ => api.deleteItem(3))
.then(_ => api.deleteItem(4))
.then(_ => api.deleteItem(5));

Reduce универсален. Мы можем определить map, filter, compose, foreach все эти функции с помощью reduce. Подробнее см .:



Reduce (Программное обеспечение для создания текста)
Примечание. Это часть серии« Программное обеспечение для создания текста (теперь книга!) По изучению функционального программирования и… среды. com »



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

Как вам нравится концепция JavaScript?
Вы это утешаете.

Надеюсь, вам понравился этот блог. Если вы хотите читать больше моих блогов, подписывайтесь на меня здесь, в medium.

Я Анураг. Профессионально работаю инженером-программистом с 2014 года. Я часто пишу в блогах по вопросам, которые мне часто задают люди и которые я считаю важными. В свободное время я люблю разрабатывать простые и полезные веб-приложения и мобильные приложения. Вы можете связаться со мной здесь:

🔗 https://www.linkedin.com/in/anuragbhattacharjee/
🕸 http://anuragbhattacharjee.com

Удачного кодирования 😀