Пишите циклы JavaScript, используя map, filter, reduce и find

Как выполнять общие операции в JavaScript, где вы можете использовать циклы, используя map (), filter (), reduce () и find ()

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

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

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

map,filter,reduce,find

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

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

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

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

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

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

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

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))

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

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

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 () возвращает первый элемент в массиве, не вызывая ошибки, если массив пуст (возвращаетundefinedв таком случае).

Примечание: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)

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

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

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

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)

Скачать мою бесплатнуюРуководство для начинающих по JavaScript


Больше руководств по js: