面试因React代码过多if-else失利，求条件判断简化方案

问题背景 #

招聘测试中因manageSelectedOptions方法存在过多if-else分支未通过，需要简化该方法的条件检查逻辑。

优化思路 #

1. 简化参数默认值处理 #

原代码中对gender、habitat、growthRate为null的判断可以用空值合并操作符简化，一行搞定默认值赋值。

2. 用映射表替代分支判断 #

将每个筛选维度的选项与对应的数据路径建立映射，当选择"all"时返回所有分类的合并数组，其他选项直接通过映射获取对应数据，彻底消除大量if-else。

3. 优化过滤逻辑性能 #

原selectPokemons中用find做存在性检查效率较低，改用Set存储筛选后的名字集合，通过has方法快速判断，提升性能同时简化代码。

优化后完整代码 #

import React, { createContext, useState, useEffect } from "react";
import { filteredResults } from "../services/getGlobalVariables";
import { IAllData, IChosenUser, IPokemonResponse } from "../interfaces/pokemonInterfaces";

interface IPokemonContext {
  storedPokemon: IAllData | undefined,
  setStoredPokemon: React.Dispatch<React.SetStateAction<IAllData | undefined>>,
  selectedPokemons: IAllData | undefined,
  setSelectedPokemons: React.Dispatch<React.SetStateAction<IAllData | undefined>>,
  selectedOptions:IChosenUser,
  setSelectedOptions: React.Dispatch<React.SetStateAction<IChosenUser>>,
  manageSelectedOptions: (gender: string | null, habitat: string | null, growthRate: string | null) => void
}

interface IPokemonContextProps {
  children: React.ReactNode
}

export const PokemonContext = createContext({} as IPokemonContext);

export const PokemonProvider = ({ children }: IPokemonContextProps) => {
  const [storedPokemon, setStoredPokemon] = useState<IAllData>();
  const [selectedPokemons, setSelectedPokemons] = useState<IAllData>();
  const [selectedOptions, setSelectedOptions] = useState<IChosenUser>({gender: 'all', growthRate: 'all', habits: 'all'})

  useEffect(() => {
    const fetchData = async () => {
      const results: IAllData = await filteredResults();
      setStoredPokemon(results)
      setSelectedPokemons(results)
    };
    fetchData();
  }, []);

  // 定义各维度的映射表
  const getGenderPokemons = (gender: string) => {
    const genderMap = {
      male: storedPokemon?.allPokemonsByGender.male || [],
      female: storedPokemon?.allPokemonsByGender.female || [],
      genderless: storedPokemon?.allPokemonsByGender.genderless || []
    };
    return gender === 'all' ? Object.values(genderMap).flat() : genderMap[gender as keyof typeof genderMap] || [];
  };

  const getHabitatPokemons = (habitat: string) => {
    const habitatMap = storedPokemon?.allPokemonsByHabitat || {};
    return habitat === 'all' ? Object.values(habitatMap).flat() : habitatMap[habitat as keyof typeof habitatMap] || [];
  };

  const getGrowthRatePokemons = (growthRate: string) => {
    const growthRateMap = storedPokemon?.allPokemonsByGrowthRate || {};
    return growthRate === 'all' ? Object.values(growthRateMap).flat() : growthRateMap[growthRate as keyof typeof growthRateMap] || [];
  };

  const manageSelectedOptions = (gender: string | null, habitat: string | null, growthRate: string | null) => {
    // 简化默认值赋值
    const currentGender = gender ?? selectedOptions.gender;
    const currentHabitat = habitat ?? selectedOptions.habits;
    const currentGrowthRate = growthRate ?? selectedOptions.growthRate;

    // 通过映射表获取对应数据
    const pokemonsChosenByGender = getGenderPokemons(currentGender);
    const pokemonsChosenByHabitat = getHabitatPokemons(currentHabitat);
    const pokemonsChosenByGrowthRate = getGrowthRatePokemons(currentGrowthRate);

    selectPokemons(pokemonsChosenByGender, pokemonsChosenByHabitat, pokemonsChosenByGrowthRate);
  };

  const selectPokemons = (
    pokemonsChosenByGender: IPokemonResponse[],
    pokemonsChosenByHabitat: IPokemonResponse[],
    pokemonsChosenByGrowthRate: IPokemonResponse[]
  ) => {
    // 用Set存储名字，提升查找效率
    const genderNames = new Set(pokemonsChosenByGender.map(p => p.name));
    const habitatNames = new Set(pokemonsChosenByHabitat.map(p => p.name));
    const growthRateNames = new Set(pokemonsChosenByGrowthRate.map(p => p.name));

    const allChosenPokes = storedPokemon?.allPokemons.filter(p => 
      genderNames.has(p.name) && habitatNames.has(p.name) && growthRateNames.has(p.name)
    );

    setSelectedPokemons({ allPokemons: allChosenPokes });
  };

  return (
    <PokemonContext.Provider value={{
      storedPokemon,
      setStoredPokemon,
      selectedPokemons,
      setSelectedPokemons,
      selectedOptions,
      setSelectedOptions,
      manageSelectedOptions
    }}>
      {children}
    </PokemonContext.Provider>
  );
};

关键改动说明 #

• 参数默认值：使用??空值合并操作符替代if判断，一行完成参数与默认值的合并。
• 映射表逻辑：每个筛选维度单独抽成函数，通过对象映射直接获取对应数据，"all"选项用Object.values().flat()合并所有分类数组，无需手动列举。
• 过滤性能优化：将数组转为Set后用has判断存在性，时间复杂度从O(n)降到O(1)，同时简化了过滤条件的写法。

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