如何在JavaScript中按员工姓名排序嵌套结构的员工数据？

问题概述 #

现有一个JavaScript对象，键为员工ID（数字类型），值为对应员工的任务信息数组。需求是按员工姓名的字母顺序重新排列对象的键值对顺序，保持原有数据结构，但现有代码无法实现预期效果。

原始数据结构：

data={
1200: [
       {
            employeeName: 'Harish',
            task: 'task1',
            employeeId: '1200'
        },
        {
            employeeName: 'Harish',
            task: 'task2',
            employeeId: '1200'
        },
        {
            employeeName: 'Harish',
            task: 'task3',
            employeeId: '1200'
        }
 ],
1205: [
       {
            employeeName: 'Akshay',
            task: 'task1',
            employeeId: '1205'
        },
        {
            employeeName: 'Akshay',
            task: 'task2',
            employeeId: '1205'
        },
],
1210: [
       {
            employeeName: 'Abhay',
            task: 'task1',
            employeeId: '1210'
        },
        {
            employeeName: 'Abhay',
            task: 'task2',
            employeeId: '1210'
        },
]
}

预期输出（按姓名A-Z排序）：

data={
1210: [
       {
            employeeName: 'Abhay',
            task: 'task1',
            employeeId: '1210'
        },
        {
            employeeName: 'Abhay',
            task: 'task2',
            employeeId: '1210'
        },
],
1205: [
       {
            employeeName: 'Akshay',
            task: 'task1',
            employeeId: '1205'
        },
        {
            employeeName: 'Akshay',
            task: 'task2',
            employeeId: '1205'
        },
],
1200: [
       {
            employeeName: 'Harish',
            task: 'task1',
            employeeId: '1200'
        },
        {
            employeeName: 'Harish',
            task: 'task2',
            employeeId: '1200'
        },
        {
            employeeName: 'Harish',
            task: 'task3',
            employeeId: '1200'
        }
 ]
 }

尝试的代码 #

以下代码执行后输出仍与原始数据顺序一致：

function sort() {
const data = {
1200: [
  {
    employeeName: 'Harish',
    task: 'task1',
    employeeId: '1200'
  },
  {
    employeeName: 'Harish',
    task: 'task2',
    employeeId: '1200'
  },
  {
    employeeName: 'Harish',
    task: 'task3',
    employeeId: '1200'
  },
],
1205: [
  {
    employeeName: 'Akshay',
    task: 'task1',
    employeeId: '1205'
  },
  {
    employeeName: 'Akshay',
    task: 'task2',
    employeeId: '1205'
  },
],
1210: [
  {
    employeeName: 'Abhay',
    task: 'task1',
    employeeId: '1210'
  },
  {
    employeeName: 'Abhay',
    task: 'task2',
    employeeId: '1210'
  },
 ],
};
  const sortedObj = {};
  Object.keys(data)
    .sort((a, b) => {
      const nameA = data[a][0].employeeName.toUpperCase();
      const nameB = data[b][0].employeeName.toUpperCase();
      if (nameA < nameB) return -1;
      if (nameA > nameB) return 1;
      return 0;
    })
    .forEach((key) => {
      sortedObj[key] = [...data[key]];
    });
  return sortedObj;
}
console.log(sort());

问题原因 #

JavaScript中，数字类型的对象键会被自动按升序排序。你的代码虽然对键数组做了姓名排序，但构建新对象时，JS会自动将数字键重新排列为升序，导致手动排序的结果被覆盖。

解决方法 #

方案1：将对象键改为字符串类型 #

把数字键改为带引号的字符串，JS就不会自动排序这类键，会保留手动插入的顺序：

function sortEmployees() {
  const data = {
    '1200': [
      {
        employeeName: 'Harish',
        task: 'task1',
        employeeId: '1200'
      },
      {
        employeeName: 'Harish',
        task: 'task2',
        employeeId: '1200'
      },
      {
        employeeName: 'Harish',
        task: 'task3',
        employeeId: '1200'
      },
    ],
    '1205': [
      {
        employeeName: 'Akshay',
        task: 'task1',
        employeeId: '1205'
      },
      {
        employeeName: 'Akshay',
        task: 'task2',
        employeeId: '1205'
      },
    ],
    '1210': [
      {
        employeeName: 'Abhay',
        task: 'task1',
        employeeId: '1210'
      },
      {
        employeeName: 'Abhay',
        task: 'task2',
        employeeId: '1210'
      },
    ],
  };

  const sortedObj = {};
  Object.keys(data)
    .sort((a, b) => {
      const nameA = data[a][0].employeeName.toUpperCase();
      const nameB = data[b][0].employeeName.toUpperCase();
      return nameA.localeCompare(nameB);
    })
    .forEach((key) => {
      sortedObj[key] = [...data[key]];
    });

  return sortedObj;
}

console.log(sortEmployees());

方案2：使用Map存储（严格保持插入顺序） #

Map会严格保留键的插入顺序，适合需要精准控制顺序的场景：

function sortEmployeesWithMap() {
  const data = {
    1200: [
      { employeeName: 'Harish', task: 'task1', employeeId: '1200' },
      { employeeName: 'Harish', task: 'task2', employeeId: '1200' },
      { employeeName: 'Harish', task: 'task3', employeeId: '1200' },
    ],
    1205: [
      { employeeName: 'Akshay', task: 'task1', employeeId: '1205' },
      { employeeName: 'Akshay', task: 'task2', employeeId: '1205' },
    ],
    1210: [
      { employeeName: 'Abhay', task: 'task1', employeeId: '1210' },
      { employeeName: 'Abhay', task: 'task2', employeeId: '1210' },
    ],
  };

  const sortedMap = new Map(
    Object.entries(data).sort(([, tasksA], [, tasksB]) => {
      const nameA = tasksA[0].employeeName.toUpperCase();
      const nameB = tasksB[0].employeeName.toUpperCase();
      return nameA.localeCompare(nameB);
    })
  );

  return sortedMap;
}

console.log(sortEmployeesWithMap());

最终输出 #

方案1的输出结果：

{
  '1210': [
    { employeeName: 'Abhay', task: 'task1', employeeId: '1210' },
    { employeeName: 'Abhay', task: 'task2', employeeId: '1210' }
  ],
  '1205': [
    { employeeName: 'Akshay', task: 'task1', employeeId: '1205' },
    { employeeName: 'Akshay', task: 'task2', employeeId: '1205' }
  ],
  '1200': [
    { employeeName: 'Harish', task: 'task1', employeeId: '1200' },
    { employeeName: 'Harish', task: 'task2', employeeId: '1200' },
    { employeeName: 'Harish', task: 'task3', employeeId: '1200' }
  ]
}

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