如何根据指定数组对嵌套结构的array1按深层role字段排序？

核心思路 #

通过Array.sort()方法，结合参考数组的索引位置作为排序权重，提取目标深层字段后进行比较即可实现需求。

实现代码 #

首先修正原始数组的语法错误（最后一个对象末尾的多余逗号），然后执行排序：

const array1 = [
  {
    "id":12,
    "roles":[
      {
        "id":12,
        "role":"team_player",
        "sub_role":null,
        "team_meta":{
          "default_player_role":{
            "pos":null,
            "role":"LWB"
          }
        }
      }
    ],
    "user_email":"w@w.w"
  },
  {
    "id":1575,
    "roles":[
      {
        "id":1672,
        "role":"team_player",
        "sub_role":null,
        "team_meta":{
          "default_player_role":{
            "pos":null,
            "role":"LB"
          }
        }
      }
    ],
    "user_email":"j@j.s"
  },
  {
    "id":1576,
    "roles":[
      {
        "id":1673,
        "role":"team_player",
        "sub_role":null,
        "team_meta":{
          "default_player_role":{
            "pos":null,
            "role":"CAM"
          }
        }
      }
    ],
    "user_email":"E@E.E"
  }
];

const array2 = ["LWB", "LB", "CAM"];

// 基础排序逻辑
const sortedArray = array1.sort((a, b) => {
  // 提取每个元素的目标role字段
  const roleA = a.roles[0].team_meta.default_player_role.role;
  const roleB = b.roles[0].team_meta.default_player_role.role;
  // 比较两者在参考数组中的索引，实现按指定顺序排序
  return array2.indexOf(roleA) - array2.indexOf(roleB);
});

console.log(sortedArray);

容错优化（可选） #

如果存在字段缺失的风险（比如roles为空数组、深层字段不存在），可以添加可选链操作符进行兜底，避免报错：

// 封装字段提取逻辑，添加兜底
const getTargetRole = (item) => {
  return item?.roles?.[0]?.team_meta?.default_player_role?.role || '';
};

const sortedArray = array1.sort((a, b) => {
  const roleA = getTargetRole(a);
  const roleB = getTargetRole(b);
  // 缺失role的元素会排到最后（因为indexOf('')返回-1）
  return array2.indexOf(roleA) - array2.indexOf(roleB);
});

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