本文旨在帮助开发者优化 React 代码中冗长的 if-else 语句，提升代码的可读性和效率。通过使用对象字面量和三元运算符，我们可以避免大量的条件判断，使代码更加简洁、易于维护。本文将提供具体的代码示例，并详细解释优化思路和注意事项，帮助开发者编写更优雅的 React 组件。
在 React 开发中，处理多种状态或条件时，经常会遇到大量的 if-else 语句。虽然 if-else 结构简单直观，但过多的嵌套和重复判断会使代码变得冗长、难以阅读和维护。本文将介绍几种常用的方法，帮助你优化代码，减少 if-else 的使用，提升代码质量。
1. 使用对象字面量 (Lookup Tables)
当 if-else 语句基于某个变量的值执行不同的操作时，可以使用对象字面量来代替。这种方法将不同的条件和对应的操作存储在一个对象中，通过键值对的方式进行查找，从而避免了大量的条件判断。
示例：
原始代码（包含大量 if-else）：
if (habitat == 'all') { pokemonsChosenByHabitat = [ ...storedPokemon!.allPokemonsByHabitat.cave, ...storedPokemon!.allPokemonsByHabitat.forest, ...storedPokemon!.allPokemonsByHabitat.grassland, ...storedPokemon!.allPokemonsByHabitat.mountain, ...storedPokemon!.allPokemonsByHabitat.rare, ...storedPokemon!.allPokemonsByHabitat.roughTerrain, ...storedPokemon!.allPokemonsByHabitat.sea, ...storedPokemon!.allPokemonsByHabitat.urban, ...storedPokemon!.allPokemonsByHabitat.watersedge ] } else if (habitat == 'forest') { pokemonsChosenByHabitat = [ ...storedPokemon!.allPokemonsByHabitat.forest ] } else if (habitat == 'cave') { pokemonsChosenByHabitat = [ ...storedPokemon!.allPokemonsByHabitat.cave ] } // ... 更多 else if
优化后的代码（使用对象字面量）：
const habitatMap = { 'all': [...Object.keys(storedPokemon!.allPokemonsByHabitat).map(key => storedPokemon!.allPokemonsByHabitat[key])], 'forest': [...storedPokemon!.allPokemonsByHabitat.forest], 'cave': [...storedPokemon!.allPokemonsByHabitat.cave], 'grassland': [...storedPokemon!.allPokemonsByHabitat.grassland], 'mountain': [...storedPokemon!.allPokemonsByHabitat.mountain], 'rare': [...storedPokemon!.allPokemonsByHabitat.rare], 'roughTerrain': [...storedPokemon!.allPokemonsByHabitat.roughTerrain], 'sea': [...storedPokemon!.allPokemonsByHabitat.sea], 'urban': [...storedPokemon!.allPokemonsByHabitat.urban], 'watersEdge': [...storedPokemon!.allPokemonsByHabitat.watersEdge] }; pokemonsChosenByHabitat = habitatMap[habitat];
说明：
- 我们创建了一个名为 habitatMap 的对象，它的键是 habitat 的可能值，值是对应的操作（获取特定栖息地的宝可梦）。
- 通过 habitatMap[habitat]，我们可以直接获取对应的操作，避免了大量的 if-else 判断。
- 如果 habitat 的值不在 habitatMap 中，则会返回 undefined。可以根据需要添加默认值或错误处理。
2. 使用三元运算符
对于简单的条件判断，可以使用三元运算符 condition ? value1 : value2 来代替 if-else 语句。三元运算符可以使代码更加简洁，但要注意避免过度使用，以免降低代码的可读性。
示例：
原始代码：
if (gender == null) { gender = selectedOptions.gender }
优化后的代码：
gender ??= selectedOptions.gender; // 使用 Nullish coalescing operator
或
gender = gender ? gender : selectedOptions.gender; // 使用三元运算符
说明：
- 三元运算符 condition ? value1 : value2 的含义是：如果 condition 为真，则返回 value1，否则返回 value2。
- 在上面的例子中，如果 gender 为 null 或 undefined，则将其设置为 selectedOptions.gender，否则保持不变。
- Nullish coalescing operator ??= 是ES2020 引入的语法糖，更加简洁。
3. 利用 Object.keys() 和 map() 方法
当需要遍历对象的键或值，并根据不同的键或值执行不同的操作时，可以结合使用 Object.keys() 和 map() 方法。这种方法可以避免大量的重复代码，使代码更加简洁和易于维护。
示例：
原始代码（假设 storedPokemon!.allPokemonsByGender 是一个对象，包含 male、female、genderless 三个键）：
if (gender === 'all') { pokemonsChosenByGender = [ ...storedPokemon!.allPokemonsByGender.female, ...storedPokemon!.allPokemonsByGender.male, ...storedPokemon!.allPokemonsByGender.genderless, ]; } else if(gender == 'male') { pokemonsChosenByGender = [...storedPokemon!.allPokemonsByGender.male] } else if(gender == 'female') { pokemonsChosenByGender = [...storedPokemon!.allPokemonsByGender.female] } else { pokemonsChosenByGender = [...storedPokemon!.allPokemonsByGender.genderless] }
优化后的代码：
if (gender === 'all') { pokemonsChosenByGender = [ ...Object.keys(storedPokemon!.allPokemonsByGender).map(key => storedPokemon!.allPokemonsByGender[key]).flat() ]; } else if (gender === 'genderless') { pokemonsChosenByGender = [...storedPokemon!.allPokemonsByGender.genderless] } else { pokemonsChosenByGender = [...storedPokemon!.allPokemonsByGender[gender]] }
说明：
- Object.keys(storedPokemon!.allPokemonsByGender) 返回一个包含 storedPokemon!.allPokemonsByGender 对象所有键的数组（例如：[‘male’, ‘female’, ‘genderless’]）。
- map(key => storedPokemon!.allPokemonsByGender[key]) 遍历这个数组，对于每个键，获取对应的值（即包含宝可梦的数组）。
- .flat() 将嵌套的数组扁平化为一个数组。
4. 使用 switch 语句 (谨慎使用)
在某些情况下，switch 语句可以代替多个 if-else 语句，使代码更加清晰。但要注意，switch 语句的 case 必须是常量，且每个 case 后面都要加上 break 语句，否则会发生穿透现象。
示例：
switch (habitat) { case 'forest': pokemonsChosenByHabitat = [...storedPokemon!.allPokemonsByHabitat.forest]; break; case 'cave': pokemonsChosenByHabitat = [...storedPokemon!.allPokemonsByHabitat.cave]; break; // ... 更多 case default: pokemonsChosenByHabitat = [...storedPokemon!.allPokemonsByHabitat.watersEdge]; }
注意事项：
- switch 语句适用于对同一个变量进行多个常量值的判断。
- switch 语句的可读性可能不如对象字面量，因此要根据具体情况选择使用。
总结
通过使用对象字面量、三元运算符、Object.keys() 和 map() 方法，以及 switch 语句（谨慎使用），我们可以有效地减少 React 代码中 if-else 语句的使用，提升代码的可读性、可维护性和效率。在实际开发中，要根据具体情况选择最合适的方法，编写更优雅的 React 组件。
优化后的代码示例：
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 manageSelectedOptions = (gender: string | null, habitat: string | null, growthRate: string | null) => { let pokemonsChosenByGender: IPokemonResponse[] = []; let pokemonsChosenByHabitat: IPokemonResponse[] = []; let pokemonsChosenByGrowthRate: IPokemonResponse[] = []; gender ??= selectedOptions.gender habitat ??= selectedOptions.habits growthRate ??= selectedOptions.growthRate if (gender === 'all') { pokemonsChosenByGender = [ ...Object.keys(storedPokemon!.allPokemonsByGender).map(key => storedPokemon!.allPokemonsByGender[key]).flat() ]; } else { pokemonsChosenByGender = [...storedPokemon!.allPokemonsByGender[gender]] } const habitatMap = { 'all': [...Object.keys(storedPokemon!.allPokemonsByHabitat).map(key => storedPokemon!.allPokemonsByHabitat[key]).flat()], 'forest': [...storedPokemon!.allPokemonsByHabitat.forest], 'cave': [...storedPokemon!.allPokemonsByHabitat.cave], 'grassland': [...storedPokemon!.allPokemonsByHabitat.grassland], 'mountain': [...storedPokemon!.allPokemonsByHabitat.mountain], 'rare': [...storedPokemon!.allPokemonsByHabitat.rare], 'roughTerrain': [...storedPokemon!.allPokemonsByHabitat.roughTerrain], 'sea': [...storedPokemon!.allPokemonsByHabitat.sea], 'urban': [...storedPokemon!.allPokemonsByHabitat.urban], 'watersEdge': [...storedPokemon!.allPokemonsByHabitat.watersEdge] }; pokemonsChosenByHabitat = habitatMap[habitat]; const growthRateMap = { 'all': [...Object.keys(storedPokemon!.allPokemonsByGrowthRate).map(key => storedPokemon!.allPokemonsByGrowthRate[key]).flat()], 'fast': [...storedPokemon!.allPokemonsByGrowthRate.fast], 'fastThenVerySlow': [...storedPokemon!.allPokemonsByGrowthRate.fastThenVerySlow], 'medium': [...storedPokemon!.allPokemonsByGrowthRate.medium], 'mediumSlow': [...storedPokemon!.allPokemonsByGrowthRate.mediumSlow], 'slow': [...storedPokemon!.allPokemonsByGrowthRate.slow], 'slowThenVeryFast': [...storedPokemon!.allPokemonsByGrowthRate.slowThenVeryFast] } pokemonsChosenByGrowthRate = growthRateMap[growthRate]; selectPokemons(pokemonsChosenByGender, pokemonsChosenByHabitat, pokemonsChosenByGrowthRate) } const selectPokemons = ( pokemonsChosenByGender: IPokemonResponse[], pokemonsChosenByHabitat: IPokemonResponse[], pokemonsChosenByGrowthRate: IPokemonResponse[] ) => { const allChosenPokes: IPokemonResponse[] | undefined = storedPokemon?.allPokemons.filter(e => { const checkIfGenderExists = pokemonsChosenByGender.find(Element => e.name === Element.name); const checkIfHabitatExists = pokemonsChosenByHabitat.find(Element => e.name === Element.name); const checkIfGrowthRateExists = pokemonsChosenByGrowthRate.find(Element => e.name === Element.name); if (checkIfGenderExists && checkIfHabitatExists && checkIfGrowthRateExists) { return e; } }); const test:any = {allPokemons: allChosenPokes} setSelectedPokemons(test); }; return ( <PokemonContext.Provider value={{ storedPokemon, setStoredPokemon, selectedPokemons, setSelectedPokemons, selectedOptions, setSelectedOptions, manageSelectedOptions }}> {children} </PokemonContext.Provider> ); };
相关标签：
react node edge ssl ai switch 键值对 宝可梦 red Object NULL 常量 运算符 三元运算符 if switch break operator map undefined 对象 低代码