JS中按名称+指定扩展名排序的简洁可扩展实现方案求助

针对你的需求，我们可以把排序逻辑拆解为提取核心标识和优先级映射两个独立部分，彻底避免嵌套if的复杂度，新增扩展名时只需修改配置而非排序逻辑。

实现步骤 #

1. 定义扩展名优先级配置 #

用对象映射扩展名到排序权重，数字越小越靠前，新增扩展名直接在这里追加即可：

// 扩展名优先级：数字越小排序越靠前
const EXT_PRIORITY = {
  '.js': 0,
  '.js.map': 1,
  '.esm.js': 2,
  '.esm.js.map': 3,
  '.css': 4,
  '.css.map': 5
};

2. 工具函数：提取文件的核心信息 #

编写两个工具函数，分别提取基础名称（去掉哈希和扩展名）和完整扩展名：

// 获取文件的完整扩展名（匹配最长的已知扩展名）
function getFullExt(filename) {
  // 按扩展名长度从长到短排序，确保优先匹配长扩展名（比如先匹配.js.map而非.map）
  const sortedExts = Object.keys(EXT_PRIORITY).sort((a, b) => b.length - a.length);
  for (const ext of sortedExts) {
    if (filename.endsWith(ext)) {
      return ext;
    }
  }
  // 处理未定义的扩展名，默认放到最后
  return '';
}

// 获取基础名称（去掉哈希和扩展名）
function getBaseName(filename) {
  const fullExt = getFullExt(filename);
  // 先去掉扩展名，得到 "bundle.abcde" 这样的结构
  const withoutExt = filename.slice(0, -fullExt.length);
  // 分割最后一个点，前面的部分就是基础名称（假设哈希是最后一个点后的内容）
  const parts = withoutExt.split('.');
  parts.pop(); // 移除哈希部分
  return parts.join('.');
}

3. 简化的排序函数 #

利用上面的工具函数，排序逻辑变得清晰直观：

files.sort((a, b) => {
  const baseA = getBaseName(a.name);
  const baseB = getBaseName(b.name);

  // 第一步：按基础名称排序
  if (baseA !== baseB) {
    return baseA.localeCompare(baseB);
  }

  // 第二步：基础名称相同时，按扩展名优先级排序
  const extA = getFullExt(a.name);
  const extB = getFullExt(b.name);
  return (EXT_PRIORITY[extA] || Infinity) - (EXT_PRIORITY[extB] || Infinity);
});

方案优势 #

• 可扩展性极强：新增扩展名只需在EXT_PRIORITY中添加键值对，无需修改排序逻辑
• 可读性高：逻辑拆分明确，每个函数只做一件事，维护成本低
• 鲁棒性好：自动处理未定义的扩展名（默认排到最后），无需额外判断

测试验证 #

用你的示例数据测试，排序结果完全符合预期：

bundle.abcde.js
bundle.abcde.js.map
bundle.12345.esm.js
bundle.12345.esm.js.map
bundle.abc12.css
bundle.abc12.css.map

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