Каков наиболее эффективный функциональный способ рефакторинга цикла forEach?

Question

У меня есть метод, который принимает предметы и доступные предметы из реквизита.Во время итерации по массиву я должен фильтровать элементы по двум условиям внутри цикла forEach.Первое условие передается элементу, если идентификатор элемента не существует или идентификатор элемента равен 1. Второе условие должно возвращать элемент и фильтровать поле «описание», в противном случае мы помещаем наши элементы в массив «nextAvailableItems».Каков наиболее эффективный функциональный способ замены цикла forEach в этой ситуации?

Структура элементов:

[{
  id: 23740416,
  display_name: "test",
  date_from: "1970-12-31"
}]

Структура доступных элементов:

[{
  id: 23740416,
  display_name: "test",
  description: "Text"
}]

Ожидаемый результат:

[{
  id: 23740416,
  display_name: "test"
}]

Текущий код:

buildAvailableItems() {
  const { items, availableItems } = this.props
  const nextAvailableItems = [...availableItems]

  items.forEach(item => {
    if (!item.id || item.id === -1) {
      return
    }

    const availableItem = availableItems.find(availableItem => availableItem.id === item.id)

    if (availableItem) {
      const { id, display_name } = availableItem

      return { id, display_name }
    }
    const { id, display_name } = item

    nextAvailableItems.push({ id, display_name })
  })

  return nextAvailableItems
}

Answer 1

buildAvailableItems() {
  const { items, availableItems } = this.props

  const itemIds = items.reduce((c, i) => (c[i.id] = true, c), {})

  const nextAvailableItems = availableItems
    .filter(a => itemIds[a.id])
    .map(a => ({ id: a.id, display_name: a.display_name }))

  return [...availableItems, ...nextAvailableItems]
}

Во-первых, я бы превратил items в поиск идентификатора.Затем отфильтруйте ваш availableItems с помощью этого поиска.Затем выполняйте слияние массивов последним.