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

Question

我正在使用 API 制作图鉴，其中包含每个宝可梦的信息。有些口袋妖怪有两种类型，但现在我只展示它们的第一种（主要）类型。所以如果他们是 grass/poison 类型，我只是展示草。每个口袋妖怪卡片的背景颜色也与其主要类型相关。

示例：

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

但是，我注意到如果在我的颜色变量中它们的主要类型出现在它们的次要类型之后，它会列出它们的次要类型而不是颜色。例如，毒药列在错误之前，因此所有 bug/poison 类型都将毒药作为其主要类型。

这是我的函数（main_types 在上面的代码中）：

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);
  }

如何让我的函数 select 成为第一个类型而不考虑颜色变量中的顺序？

Answer 1

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

const myArr = [1, 6, 2, 7];
const ordered = [2, 1];

myArr.find(x => ordered.includes(x)) // 1
ordered.find(x => myArr.includes(x)) // 2

Answer 2

这就可以了，你只需要改变顺序 const type = poke_types.find(mt => main_types.indexOf(mt) > -1);

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

Using indexOf() with API data is affected by the order of strings in my variable

javascript

api

indexof