React应用中JavaScript数组映射访问分类项实现方法

针对你提到的大型数组场景，优先推荐基于Map结构的预映射方案，查询性能远高于每次遍历数组，适合需要频繁查找不同分类的业务场景。

方案1：Map预映射（优先推荐，适配大型数组） #

先遍历一次数组构建「分类名-分类项」的映射表，后续所有查询都可以通过key直接取值，时间复杂度O(1)：

// 构建映射表，仅需遍历一次全量数组
const categoryNameMap = new Map()
categoryObj.forEach(categoryItem => {
  categoryNameMap.set(categoryItem.name, categoryItem)
})

// 直接获取name为"Women"的分类项
const womenCategory = categoryNameMap.get("Women")

如果业务中可能存在多个同名分类项，可以把Map的value调整为数组格式存储所有匹配项：

const categoryNameMap = new Map()
categoryObj.forEach(categoryItem => {
  if (!categoryNameMap.has(categoryItem.name)) {
    categoryNameMap.set(categoryItem.name, [])
  }
  categoryNameMap.get(categoryItem.name).push(categoryItem)
})

// 拿到所有name为"Women"的分类项数组
const womenCategoryList = categoryNameMap.get("Women") || []

如果是在React组件中使用，建议用useMemo缓存映射表，避免组件每次重渲染都重复遍历大数组消耗性能：

import { useMemo } from 'react'

function CategoryComponent() {
  const categoryNameMap = useMemo(() => {
    const map = new Map()
    categoryObj.forEach(cate => map.set(cate.name, cate))
    return map
  }, [categoryObj]) // 仅当原数组变化时重新构建映射

  const womenCategory = categoryNameMap.get("Women")

  return (
    <div>
      {/* 用可选链避免未匹配到项时的报错 */}
      <h3>{womenCategory?.name}</h3>
      {womenCategory?.subCategory.map(subCate => (
        <div key={subCate.id}>{subCate.name}</div>
      ))}
    </div>
  )
}

方案2：单次查询简洁写法 #

如果仅需要做一次查询，不需要频繁查找其他分类，直接用数组find方法即可，写法更简洁，单次遍历的性能损耗在大数组下也可接受：

const womenCategory = categoryObj.find(item => item.name === "Women")

如果需要拿到所有name为"Women"的项，把find替换为filter即可：

const allWomenCategory = categoryObj.filter(item => item.name === "Women")

注意：拿到匹配项后建议加可选链?.再访问内部属性，避免数组中不存在对应项时抛出JS错误。

内容的提问来源于stack exchange，提问作者Nuwan Chamikara