在原生JavaScript中按值筛选JSON数据：星战API人类角色筛选

嘿，我来帮你搞定这个筛选人类角色的问题！核心逻辑其实很简单：SWAPI里每个角色的species字段是一个数组，存放了该角色所属物种的API地址，咱们要找的人类对应的地址就是https://swapi.co/api/species/1/，只要检查每个角色的species数组里是否包含这个地址就行。

下面给你两种可行的实现方案：

方法一：获取所有角色后前端筛选 #

假设你原来的代码是获取所有角色后直接展示名称，那只需要在遍历前加一层筛选逻辑即可：

// 定义人类物种的API地址常量，方便维护
const HUMAN_SPECIES_URL = 'https://swapi.co/api/species/1/';

fetch('https://swapi.co/api/people/?format=json')
  .then(res => res.json())
  .then(data => {
    const allCharacters = data.results;
    // 筛选出包含人类物种地址的角色
    const humanCharacters = allCharacters.filter(char => {
      // 先判断species字段是否存在，避免报错
      return char.species && char.species.includes(HUMAN_SPECIES_URL);
    });
    // 现在展示的就是纯人类角色了
    humanCharacters.forEach(human => {
      console.log(human.name);
      // 这里替换成你原来的展示逻辑，比如插入到DOM中
    });
  });

细节说明： #

• char.species &&：处理部分角色没有species字段或者字段为空的情况，避免运行时报错
• includes(HUMAN_SPECIES_URL)：直接检查数组中是否包含目标地址，简单高效

方法二：通过物种API反向获取人类角色（更高效） #

如果你不想先拉取所有角色再筛选，可以直接调用人类物种的API接口，它会直接返回所有人类角色的地址列表，再批量获取这些角色的数据：

fetch('https://swapi.co/api/species/1/?format=json')
  .then(res => res.json())
  .then(speciesData => {
    const humanCharacterUrls = speciesData.people;
    // 批量请求所有人类角色的数据
    return Promise.all(humanCharacterUrls.map(url => fetch(url).then(res => res.json())));
  })
  .then(humanCharacters => {
    // 展示人类角色名称
    humanCharacters.forEach(human => {
      console.log(human.name);
      // 替换成你的展示逻辑
    });
  });

这种方法的优势是不需要处理非人类角色的数据，请求更精准，角色数量较多时性能会更好。

额外提醒 #

• 注意SWAPI的分页机制：如果角色总数超过10个，results只返回当前页数据，你需要通过next字段递归获取全部角色（两种方法都需要处理这个情况）
• 部分角色可能属于多个物种，只要其species数组包含人类地址，就会被筛选出来，完全符合需求

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