javascript - 重构 forEach 循环最有效的功能方式是什么？

Question

我有一个方法可以接受 Prop 中的元素和可用元素。在数组上迭代时，我应该按 forEach 循环内的两个条件过滤项目。如果项目 id 不存在或项目 id 等于 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 转换为 ID 查找。然后使用该查找过滤您的 availableItems。然后最后进行数组合并。