动态属性排序对象数组时qty字段排序错误的问题排查

问题原因 #

你的qty字段存储的是字符串类型，而当前排序函数统一使用字符串比较逻辑：字符串是按字符的Unicode值逐个对比的，比如"132345"和"23222"，第一个字符'1'的Unicode值小于'2'，因此会被判定为更小，导致排序结果不符合数字大小的预期。

另外需要注意：Array.sort()是原地修改原数组的操作，多次调用排序函数会污染原始数据，导致后续排序结果异常。

解决方案 #

我们需要针对数字类型的字段（如qty）做类型转换，同时先复制原数组再排序，避免修改原始数据。以下提供两种实现方案：

方案1：针对特定字段处理 #

明确指定qty字段按数字排序，其他字段保持字符串排序逻辑：

const fruitDetails = [
  {item: "Berry", qty: "651042446", stockDate: "2021-09-20"},
  {item: "Apple", qty: "23222", stockDate: "2023-08-10"},
  {item: "Kiwi", qty: "132345", stockDate: "2022-10-23"}
];

function sortedData(column) {
  // 复制原数组，避免原地修改原始数据
  return [...fruitDetails].sort((a, b) => {
    let valA = a[column];
    let valB = b[column];

    // 针对qty字段转换为数字比较
    if (column === 'qty') {
      valA = Number(valA);
      valB = Number(valB);
      return valA - valB;
    }

    // 字符串类型字段的排序逻辑
    const lowerA = valA.toLowerCase();
    const lowerB = valB.toLowerCase();
    if (lowerA > lowerB) return 1;
    if (lowerA < lowerB) return -1;
    return 0;
  });
}

console.log(sortedData("item"));
console.log(sortedData("qty")); // 现在会输出正确的数字排序结果
console.log(sortedData("stockDate"));

方案2：自动判断数字字符串（通用方案） #

通过判断字段值是否为数字字符串，自动切换排序逻辑，适配更多数字类型字段的场景：

const fruitDetails = [
  {item: "Berry", qty: "651042446", stockDate: "2021-09-20"},
  {item: "Apple", qty: "23222", stockDate: "2023-08-10"},
  {item: "Kiwi", qty: "132345", stockDate: "2022-10-23"}
];

function sortedData(column) {
  // 判断是否为数字字符串的辅助函数
  const isNumeric = str => !isNaN(str) && !isNaN(parseFloat(str));

  return [...fruitDetails].sort((a, b) => {
    let valA = a[column];
    let valB = b[column];

    // 数字字符串按数字大小排序
    if (isNumeric(valA) && isNumeric(valB)) {
      return Number(valA) - Number(valB);
    }

    // 字符串字段用localeCompare简化排序逻辑
    return valA.toLowerCase().localeCompare(valB.toLowerCase());
  });
}

console.log(sortedData("item"));
console.log(sortedData("qty"));
console.log(sortedData("stockDate"));

效果验证 #

修改后qty字段的排序结果会符合数字大小预期：

[
  {item: "Apple", qty: "23222", stockDate: "2023-08-10"},
  {item: "Kiwi", qty: "132345", stockDate: "2022-10-23"},
  {item: "Berry", qty: "651042446", stockDate: "2021-09-20"}
]

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