Напишите циклы JavaScript, используя карту, фильтр, сокращение и поиск

Циклы обычно используются на любом языке программирования для выполнения операций с массивами: при наличии массива вы можете перебирать его элементы и выполнять вычисления.

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

ПРИМЕЧАНИЕ: Я не рекомендую один подход по сравнению с другим. Я просто хочу представить различные способы выполнения одного и того же и, возможно, познакомить вас с новыми функциями, которые вы, возможно, никогда не использовали до сих пор.

сопоставлять, фильтровать, уменьшать, находить

Это 3 действительно мощные функции массива:

• map возвращает массив одинаковой длины,
• фильтр как следует из названия, он возвращает массив с меньшим количеством элементов, чем исходный массив
• уменьшить возвращает одно значение (или объект)
• найти возвращает первые элементы в массиве, удовлетворяющем условию

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

найти был представлен в ES6/ES2015.

Они предлагают более декларативный подход , а не императивный подход (опишите что должно произойти, а не пишите каждую крошечную часть обработки, которая должна произойти)

Выполните что-нибудь для каждого элемента с картой

Петля будет выглядеть так:

const performSomething = (item) => {
  //...
  return item
}
const items = ['a', 'b', 'c']
items.forEach((item) => {
  performSomething(item)
})

При декларативном подходе вы указываете JavaScript выполнять что-либо для каждого элемента с помощью:

const items = ['a', 'b', 'c']
const newArray = items.map((item) => performSomething(item))

Это создает новый массив без редактирования исходного (то, что мы называем неизменяемостью)

Поскольку мы используем одну функцию в функции обратного вызова map, мы можем переписать образец как:

const items = ['a', 'b', 'c']
const newArray = items.map(performSomething)

Поиск одного элемента в массиве

Иногда вам нужно найти определенный элемент в массиве и вернуть его.

Вот как вы сделали бы это с помощью цикла:

const items = [
  { name: 'a', content: { /* ... */ }},
  { name: 'b', content: { /* ... */ }},
  { name: 'c', content: { /* ... */ }}
]
for (const item of items) {
  if (item.name === 'b') {
    return item
  }
}

Вот версия без цикла, использующая find() (ES6+):

const b = items.find((item) => item.name === 'b')

Вот такая же функциональность с использованием filter() (ES5+):

const b = items.filter((item) => item.name === 'b').shift()

shift() возвращает первый элемент в массиве без возникновения ошибки, если массив пуст (в этом случае возвращает неопределенный ).

Примечание: shift() изменяет массив, но изменяемый массив – это массив, возвращаемый filter() , а не исходный массив. Если это звучит неприемлемо, вы можете проверить, не пуст ли массив, и получить первый элемент, используя b[0] .

Для целей обучения (на практике это не имеет особого смысла), вот та же функциональность с использованием reduce():

const items = [
  { name: 'a', content: { /* ... */ }},
  { name: 'b', content: { /* ... */ }},
  { name: 'c', content: { /* ... */ }}
]

const b = items.reduce((result, item) => {
  if (item.name === 'b') { result = item }
  return result
}, null)

фильтр() и reduce() будет повторяться по всем элементам массива, в то время как find() будет быстрее.

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

Используйте reduce() , чтобы получить одно значение из массива. Например, суммируйте элементы содержимое.значение свойство:

const items = [
  { name: 'a', content: { value: 1 }},
  { name: 'b', content: { value: 2 }},
  { name: 'c', content: { value: 3 }}
]

использование цикла:

let count = 0
for (const item of items) {
  count += item.content.value
}

может быть написано как

const count = items.reduce((result, { content: { value } }) => result + value, 0)

Оригинал: “https://flaviocopes.com/javascript-loops-map-filter-reduce-find/”