如何基于含数字的字符串属性对JavaScript对象数组排序？

你的原代码失效的核心原因是：value是字符串类型，直接做减法运算b.value - a.value会返回NaN，导致排序逻辑完全失效。

针对这类场景，除了“按空格分割取首位数字”的方案，还有以下更通用或高效的实现方式：

1. 正则提取数值（适配更多格式） #

如果value中的数字位置不固定（比如偶尔出现"oranges 10"），或者需要支持小数，用正则匹配数字是更稳妥的选择：

const sortedData = [...data].sort((a, b) => {
  // 匹配字符串中的整数或小数
  const extractNum = str => parseFloat(str.match(/\d+\.?\d*/)[0]);
  return extractNum(a.value) - extractNum(b.value);
});

正则/\d+\.?\d*/可以覆盖整数、带小数的数字场景，比分割方案的适用性更强。

2. 优化版分割方案（简洁高效） #

如果能确定数字一定在字符串开头且紧跟空格，分割方案可以简化，同时注意避免原地修改原数组：

// 先复制数组再排序，避免修改原数据
const sortedData = [...data].sort((a, b) => {
  const numA = Number(a.value.split(' ')[0]);
  const numB = Number(b.value.split(' ')[0]);
  return numA - numB; // 升序，降序则改为 numB - numA
});

这里用Number()显式转换类型，比隐式转换更清晰，同时[...data]复制数组的操作很重要——因为Array.sort()是原地排序，会直接修改原数组。

3. 预提取数值（大数据量首选） #

如果处理的数组规模较大，排序时反复提取数字会产生不必要的性能开销。建议先预提取数值到对象属性中，再排序：

// 第一步：给每个对象添加预提取的数值属性
const dataWithNumericValue = data.map(item => ({
  ...item,
  numericValue: parseFloat(item.value.match(/\d+\.?\d*/)[0])
}));

// 第二步：基于预提取的数值排序
const sortedData = dataWithNumericValue.sort((a, b) => a.numericValue - b.numericValue);

// 可选：移除临时添加的属性，还原原结构
const finalResult = sortedData.map(({ numericValue, ...rest }) => rest);

这种方式将数值提取的O(n)操作与排序的O(n log n)操作分离，避免了排序过程中重复执行正则/分割逻辑，大数据量下性能提升显著。

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