如何在JavaScript中按姓氏字母排序列表并保留名在前格式

没问题，我来帮你搞定这个排序需求！从你的代码和描述来看，你用的是星战API（SWAPI）获取人类物种的人物列表，现在需要把这些名在前、姓在后的姓名按姓氏的字母顺序排序，同时展示时保留原格式对吧？下面是具体的实现步骤和修改后的代码：

核心思路 #

1. 先获取物种数据里的人物URL列表，批量拉取每个人物的详情
2. 编写排序函数：从姓名中提取姓氏（取最后一个单词），按字母顺序排序（不区分大小写）
3. 排序完成后再渲染表格，确保展示的列表是有序的

修改后的完整代码 #

const url = 'https://swapi.co/api/species/1/';

function fetchData(url) {
  return fetch(url).then((resp) => resp.json());
}

// 补全你未写完的constructElement函数
function constructElement(tag, text) {
  const element = document.createElement(tag);
  element.textContent = text;
  return element;
}

function constructTableRow(data) {
  const row = document.createElement('tr');
  const { name, height, mass, hair_color } = data;
  row.appendChild(constructElement('td', name));
  row.appendChild(constructElement('td', height));
  row.appendChild(constructElement('td', mass));
  row.appendChild(constructElement('td', hair_color));
  return row;
}

// 按姓氏排序的核心函数
function sortPeopleByLastName(peopleArray) {
  return peopleArray.sort((personA, personB) => {
    // 提取姓氏：拆分姓名取最后一个单词，转小写避免大小写影响排序
    const lastNameA = personA.name.split(' ').pop().toLowerCase();
    const lastNameB = personB.name.split(' ').pop().toLowerCase();
    
    // 按字母顺序比较
    if (lastNameA < lastNameB) return -1;
    if (lastNameA > lastNameB) return 1;
    return 0;
  });
}

// 主流程：获取数据 -> 排序 -> 渲染
fetchData(url)
  .then(speciesData => {
    // 批量获取所有人物的详情数据
    return Promise.all(speciesData.people.map(personUrl => fetchData(personUrl)));
  })
  .then(allPeopleData => {
    // 按姓氏排序
    const sortedPeople = sortPeopleByLastName(allPeopleData);
    // 获取表格元素（假设你的表格id是"people-table"）
    const table = document.getElementById('people-table');
    // 渲染每一行
    sortedPeople.forEach(person => {
      table.appendChild(constructTableRow(person));
    });
  })
  .catch(err => console.error('数据获取失败:', err));

关键细节说明 #

• 批量获取数据：用Promise.all同时请求所有人物的URL，比逐个请求效率更高
• 姓氏提取逻辑：对于像"Obi-Wan Kenobi"这类带中间名的姓名，split(' ').pop()能准确拿到最后一个单词作为姓氏；对于单字姓名（比如"Yoda"），这个逻辑也能正常工作
• 大小写不敏感排序：转成小写后再比较，避免"Skywalker"和"skywalker"被当成不同的姓氏排序

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