JavaScript数组按前缀排序技巧

本文深入探讨了JavaScript中字符串数组排序的常见问题与解决方案，重点关注按特定前缀优先排列的需求。针对传统排序方法在处理此类需求时可能出现的错误，文章首先分析了问题的根源，即不准确的字符串比较和不完整的排序逻辑。随后，详细介绍了如何利用`localeCompare`方法进行更稳定、准确的字符串比较，并提供了一种高级的分区与合并策略，将数组按前缀匹配情况分组排序，最终合并，从而优雅地实现复杂的多条件排序。本文旨在帮助开发者掌握更高效、更易维护的JavaScript数组排序技巧，提升Web应用的用户体验和数据处理能力。

本文探讨了如何在JavaScript中对字符串数组进行排序，特别是当需要根据特定字符串前缀进行优先排序时遇到的常见问题。文章详细介绍了使用 localeCompare 进行正确字符串比较的方法，并提供了一种高级策略，通过数组分区和合并来优雅地实现复杂的多条件排序需求，确保结果的准确性和可维护性。

在Web开发中，经常需要根据用户输入对数据进行动态排序和过滤。一个常见的场景是，用户输入一个字符串，然后需要将一个字符串数组中以该字符串开头的所有项优先显示，并在各自的组内保持字母顺序。然而，在实现这种复杂排序逻辑时，开发者可能会遇到一些挑战，导致排序结果不符合预期。

初始排序问题分析

考虑以下场景：我们有一个包含公司名称的字符串数组 data，以及一个用户输入的筛选值 inputValue。我们的目标是：

1. 将所有以 inputValue 开头的字符串优先排列。
2. 在这些优先项内部，以及在剩余项内部，都保持字母顺序。

一个常见的错误尝试可能如下所示：

const data = [
  "DALIAN YI DA PRECISION RUBBER PRODUCTS CO., LTD.",
  "DALIAN TOSHIBA TELECISION CO.,LTD",
  "DALIAN SHENGFU BUSINESS FORM PRINTING CO.,LTD",
  "DALIAN SHENGFENG INTERNET OF THINGS TECHNOLOGY INC",
  "DALIAN OKEN SEIKO CO., LTD.",
  "DALIAN MATSUMOTOSHO TRADING CO.,LTD.",
  "DALIAN JINGSHIHENG ELECTRONIC TECH. CO., LTD.",
  "DHDC",
  "DALIAN HENGFENG ELECTRONIC TECH. CO., LTD.",
  "DALIAN GEETON ELECTRONICS CO.,LTD ",
  "DALIAN AUPAC CO.,LTD.",
  "DALIAN ALPS TEDA LOGISTICS CO.,LTD.",
  "CHIYODA INTEGRE (DALIAN) CO LTD",
  "HUICHANG LOGISTICS (BONDED LOGISTICZONE DALIAN CO",
  "MATSUYA R&D (DALIAN) CO., LTD.",
  "MIKURO SPRING (DALIAN) CO.,LTD",
];

const inputValue = "DALIAN";

data.sort((a, b) => {
  // 错误：toUpperCase 未作为函数调用，导致比较失败
  // 错误：直接使用 a > b 或 a < b 进行字符串比较不准确，且逻辑不完整
  if (a.startsWith(inputValue.toUpperCase) && a > b) {
    return 1;
  } else if (a.startsWith(inputValue.toUpperCase) && a < b) {
    return -1;
  } else {
    return 0;
  }
});

console.log(data);

上述代码存在几个关键问题：

1. inputValue.toUpperCase 缺少括号，导致 toUpperCase 方法未被调用，startsWith 实际上会尝试与一个函数对象进行比较，这通常会导致意外行为或错误。
2. 直接使用 a > b 或 a < b 进行字符串比较在某些情况下可能有效，但在处理不同语言环境或包含特殊字符的字符串时，其行为不如 localeCompare 稳定和准确。
3. 排序逻辑不完整：当 a 不以 inputValue 开头时，else 分支直接返回 0，这表示 a 和 b 相等，从而破坏了整体的字母排序。它只尝试对符合条件的项进行部分排序，而对不符合条件的项则保持原位，或者在混合情况下产生混乱。

解决方案一：使用 localeCompare 进行基础排序

JavaScript 提供了 String.prototype.localeCompare() 方法，它是进行字符串比较的推荐方式，因为它考虑了语言环境（locale）和 Unicode 字符的排序规则。

localeCompare() 方法返回一个数字，表示引用字符串是否在排序顺序中位于给定字符串的前面、后面或相同位置：

• 如果引用字符串在 compareString 之前，返回一个负数。
• 如果引用字符串在 compareString 之后，返回一个正数。
• 如果它们是等效的，返回 0。

这与 Array.prototype.sort() 方法的比较函数所期望的返回值完全一致。

以下代码展示了如何使用 localeCompare 来改进排序，实现优先匹配前缀的字符串：

let data = [
  "DALIAN YI DA PRECISION RUBBER PRODUCTS CO., LTD.",
  "DALIAN TOSHIBA TELECISION CO.,LTD",
  "DALIAN SHENGFU BUSINESS FORM PRINTING CO.,LTD",
  "DALIAN SHENGFENG INTERNET OF THINGS TECHNOLOGY INC",
  "DALIAN OKEN SEIKO CO., LTD.",
  "DALIAN MATSUMOTOSHO TRADING CO.,LTD.",
  "DALIAN JINGSHIHENG ELECTRONIC TECH. CO., LTD.",
  "DHDC",
  "DALIAN HENGFENG ELECTRONIC TECH. CO., LTD.",
  "DALIAN GEETON ELECTRONICS CO.,LTD ",
  "DALIAN AUPAC CO.,LTD.",
  "DALIAN ALPS TEDA LOGISTICS CO.,LTD.",
  "CHIYODA INTEGRE (DALIAN) CO LTD",
  "HUICHANG LOGISTICS (BONDED LOGISTICZONE DALIAN CO",
  "MATSUYA R&D (DALIAN) CO., LTD.",
  "MIKURO SPRING (DALIAN) CO.,LTD",
];
const inputValue = "DALIAN";

data.sort((a, b) => {
  const aStartsWithInput = a.split(' ')[0].toUpperCase() === inputValue.toUpperCase();
  const bStartsWithInput = b.split(' ')[0].toUpperCase() === inputValue.toUpperCase();

  // 如果a以inputValue开头，b不以inputValue开头，则a排在b前面
  if (aStartsWithInput && !bStartsWithInput) {
    return -1;
  }
  // 如果b以inputValue开头，a不以inputValue开头，则b排在a前面
  if (!aStartsWithInput && bStartsWithInput) {
    return 1;
  }
  // 如果两者都以inputValue开头，或两者都不以inputValue开头，则按字母顺序排序
  return a.localeCompare(b);
});

console.log(data);

在这个改进版本中：

• 我们首先检查 a 和 b 是否以 inputValue 开头（这里为了匹配原始意图，只比较第一个词）。
• 如果一个字符串匹配而另一个不匹配，则匹配的字符串优先。
• 如果两者都匹配或都不匹配，则使用 a.localeCompare(b) 进行标准的字母顺序排序。
• 注意 inputValue.toUpperCase() 已经被正确调用。

解决方案二：分组合并的复杂排序策略

当排序需求更复杂时，例如需要将匹配项和非匹配项完全分开，并在各自组内进行排序，然后将两个有序组合并时，简单的 sort 回调函数可能变得难以维护。此时，一种更清晰的策略是：

1. 分区 (Partitioning)：根据匹配条件将原始数组分成两个或多个子数组。
2. 子数组排序 (Sub-array Sorting)：分别对每个子数组进行排序。
3. 合并 (Merging)：将排序后的子数组按所需顺序合并。

我们可以使用 Array.prototype.reduce() 方法来有效地实现分区：

const inputValue = "DALIAN";
let data = [
  "DALIAN YI DA PRECISION RUBBER PRODUCTS CO., LTD.",
  "DALIAN TOSHIBA TELECISION CO.,LTD",
  "DALIAN SHENGFU BUSINESS FORM PRINTING CO.,LTD",
  "DALIAN SHENGFENG INTERNET OF THINGS TECHNOLOGY INC",
  "DALIAN OKEN SEIKO CO., LTD.",
  "DALIAN MATSUMOTOSHO TRADING CO.,LTD.",
  "DALIAN JINGSHIHENG ELECTRONIC TECH. CO., LTD.",
  "DHDC",
  "DALIAN HENGFENG ELECTRONIC TECH. CO., LTD.",
  "DALIAN GEETON ELECTRONICS CO.,LTD ",
  "DALIAN AUPAC CO.,LTD.",
  "DALIAN ALPS TEDA LOGISTICS CO.,LTD.",
  "CHIYODA INTEGRE (DALIAN) CO LTD",
  "HUICHANG LOGISTICS (BONDED LOGISTICZONE DALIAN CO",
  "MATSUYA R&D (DALIAN) CO., LTD.",
  "MIKURO SPRING (DALIAN) CO.,LTD",
];

// 1. 分区：将数组分为两部分：以inputValue开头的和不以inputValue开头的
let partitionedArrs = data.reduce((accumulator, currentItem) => {
  // 检查currentItem的第一个词是否与inputValue匹配（忽略大小写）
  if (currentItem.split(' ')[0].toUpperCase() === inputValue.toUpperCase()) {
    accumulator[0].push(currentItem); // 匹配项放入第一个子数组
  } else {
    accumulator[1].push(currentItem); // 不匹配项放入第二个子数组
  }
  return accumulator;
}, [[], []]); // 初始accumulator是一个包含两个空数组的数组

// 2. 子数组排序：定义一个辅助函数来对数组进行字母排序
const sortAlphabetically = arr => arr.sort((a, b) => a.localeCompare(b));

// 分别对匹配项和不匹配项进行排序
let sortedMatchingItems = sortAlphabetically(partitionedArrs[0]);
let sortedNonMatchingItems = sortAlphabetically(partitionedArrs[1]);

// 3. 合并：将排序后的匹配项数组与排序后的不匹配项数组合并
let newData = sortedMatchingItems.concat(sortedNonMatchingItems);
console.log(newData);

这种分组合并的策略具有以下优点：

• 清晰的逻辑分离：匹配逻辑和排序逻辑被清晰地分离，提高了代码的可读性。
• 可维护性：当排序规则变得更加复杂时（例如，需要分成三个或更多组），这种结构更容易扩展和修改。
• 性能优化：对于非常大的数组，如果分区操作比在单个 sort 回调中进行复杂比较更高效，可能会带来性能优势（尽管对于大多数Web应用场景，差异可能不明显）。

注意事项与最佳实践

1. localeCompare() 的使用：始终优先使用 localeCompare() 进行字符串比较，以确保正确的语言环境和 Unicode 排序。
2. 大小写敏感性：在进行字符串匹配（如 startsWith 或 split(' ')[0] 比较）时，要明确是否需要区分大小写。通常，为了提供更友好的用户体验，会将所有字符串转换为相同的大小写（如 toUpperCase() 或 toLowerCase()）再进行比较。
3. 性能考虑：对于极大的数据集，频繁的 split() 和 toUpperCase() 操作可能会有性能开销。如果性能成为瓶颈，可以考虑在数据加载时预处理这些字段，或者寻找其他优化策略。
4. Array.prototype.sort() 的原地修改：sort() 方法会直接修改原数组。如果需要保留原始数组，应先创建数组的副本（例如使用 [...data] 或 data.slice()）。在上述示例中，data 数组被有意地修改了。
5. 多条件排序：当排序条件复杂时，考虑使用多阶段排序或分组合并的策略，可以使代码更易于理解和维护。

总结

对JavaScript数组中的字符串进行排序，尤其是涉及特定匹配条件和优先级时，需要精确的逻辑和对 Array.prototype.sort() 及 String.prototype.localeCompare() 的深入理解。通过使用 localeCompare() 进行可靠的字符串比较，并采用分组合并的策略来处理复杂的排序需求，可以构建出既准确又易于维护的排序功能。选择哪种方法取决于具体的业务逻辑和对代码可读性、可维护性的要求。

理论要掌握，实操不能落！以上关于《JavaScript数组按前缀排序技巧》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！