Javascript 将indexOf（）与API数据一起使用会受到变量中字符串顺序的影响

我正在使用一个API制作Pokedex，该API包含每个口袋妖怪的信息。一些口袋妖怪有两种类型，但现在我只展示它们的第一种（主要）类型。因此，如果它们是草/毒药类型，我只是展示草。每个口袋妖怪卡片的背景颜色也与它们的主要类型有关

例如：

const colors = {
    grass: '#63BB5B',
    fire: '#FF9C54',
    water: '#4E90D5',
    electric: '#F3D23B',
    ice: '#74CEC0', //etc.
};
const main_types = Object.keys(colors);

但是，我注意到，如果在我的colors变量中，它们的主类型位于次类型之后，它会将它们的次类型与颜色一起列出。例如，毒药列在bug之前，因此所有bug/毒药类型都将毒药显示为其主要类型

这是我的函数（主要类型在上面的代码中）：

函数createPokemonCard（pokemon）{
const pokemonEl=document.createElement（'div'）；
pokemonEl.classList.add（'pokemon'）；
const poke_types=pokemon.types.map（el=>el.type.name）；
const type=main\u types.find（mt=>poke\u types.indexOf（mt）>-1）；
const name=pokemon.name[0].toUpperCase（）+pokemon.name.slice（1）；
const card_color=颜色[类型]；
pokemonEl.style.backgroundColor=卡片颜色；
pokeInnerHTML常数=`
#${pokemon.id.toString（）.padStart（3，'0'）}
${name}
类型：${Type.charAt（0.toUpperCase（）+Type.slice（1）}
`;
pokemonEl.innerHTML=pokeInnerHTML；
poke_container.appendChild（口袋妖怪）；
}

如何让函数在不考虑colors变量顺序的情况下选择它们的第一个类型？

数组#find

在其元素中搜索满足谓词的第一个值。因此，与其在主类型中搜索项目类型，不如在项目类型中查找第一个主类型

constmyarr=[1,6,2,7]；
有序常数=[2,1]；
myArr.find（x=>ordered.includes（x））//1
ordered.find（x=>myArr.includes（x））//2

这样就可以了，您只需切换订单即可

---

const type=poke\u types.find（mt=>main\u types.indexOf（mt）>-1）
啊，这很管用，现在看起来很明显。是的，有时候你需要的只是一双新眼睛
function createPokemonCard(pokemon) {
    const pokemonEl = document.createElement('div');
    pokemonEl.classList.add('pokemon');
    const poke_types = pokemon.types.map(el => el.type.name);
    const type = main_types.find(mt => poke_types.indexOf(mt) > -1);
    const name = pokemon.name[0].toUpperCase() + pokemon.name.slice(1);
    const card_color = colors[type];

    pokemonEl.style.backgroundColor = card_color;

    const pokeInnerHTML = `
    <div class="img-container">
    <img src="https://pokeres.bastionbot.org/images/pokemon/${pokemon.id}.png" />
    </div>
    <div class ="info">
      <span class="number">#${pokemon.id.toString().padStart(3, '0')}</span>
      <h3 class="name">${name}</h3>
      <small class="type">Type: <span>${type.charAt(0).toUpperCase() + type.slice(1)}</span></small>
    </div>
    `;

    pokemonEl.innerHTML = pokeInnerHTML;

    poke_container.appendChild(pokemonEl);
  }