Я видел, как многие новички в JS сталкивались с трудностями при использовании карты, фильтра или сокращения, и не знали различных вариантов использования каждого из этих методов. Поэтому я решил написать этот блог и сравнить эти методы на нескольких примерах.

Давайте прыгнем прямо в него.

Массив.прототип.фильтр()

Метод filter вызывается для массива, возвращает новый массив и выбирает элементы, удовлетворяющие определенному условию.

function useFilter(arr) {
  return arr.filter((element) => {
    // You have to return a boolean here.
    return element % 2 === 0
  })
}
useFilter([1, 2, 3, 4, 5]) // return [2, 4]

В приведенном выше примере условие element % 2 === 0. Следовательно, этому условию удовлетворяют только четные числа, а именно 2 и 4 в приведенном выше примере.

Массив.protoype.map()

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

function doubler(arr) {
  return arr.map((element) => {
    return element * 2
  })
}
doubler([1, 2, 3]) // returns [2, 4, 6]

Простая функция выше возвращает новый массив, в котором все элементы удвоены.

Массив.protoype.reduce()

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

Общий синтаксис

Array.protoype.reduce((accumulator, currentValue) => {}, initialValue)

Примеры

Первый пример — это функция, которая возвращает сумму всех элементов массива.

function getSum(arr) {
  return arr.reduce((acc, currVal) => {
    // Whatever you return here will be the new value of the accumulator
    return acc + currVal
  }, 0)
}
getSum([1, 2, 3]) // returns 6

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

iteration    acc    currVal    retrun value
   1st        0        1         0 + 1 (1)
   2nd        1        2         1 + 2 (3)
   3rd        3        3         3 + 3 (6)

В следующем примере я хочу использовать пустой массив в качестве initialValue, чтобы имитировать функциональность метода filter(), просто чтобы показать вам силу reduce().

function useReduceToFilter(arr) {
  return arr.reduce((acc, currVal) => {
    currVal % 2 === 0 && acc.push(currVal)
    return acc
  }, [])
}
useReduceToFilter([1, 2, 3, 4]) // returns [2, 4]

Давайте еще раз проследим за всеми нашими переменными.

iteration    acc    currVal    retrun value
   1st       []        1            []
   2nd       []        2            [2]
   3rd       [2]       3            [2]
   4th       [2]       4           [2, 4]

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

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