如何在JavaScript中按数字子数组对二维数组同步排序？

问题描述 #

原二维数组：

const arr = [['Dog', 'Cat', 'Fish', 'Bird'],[1, 4, 2, 3]];

需要排序为指定顺序的数组：

const arr = [['Dog', 'Fish', 'Bird', 'Cat'],[1, 2, 3, 4]];

解决方案 #

核心思路是根据目标动物顺序，将两个子数组的对应元素绑定后排序，再拆分回二维数组，具体实现如下：

基础实现

const arr = [['Dog', 'Cat', 'Fish', 'Bird'], [1, 4, 2, 3]];
// 定义目标排序的动物序列
const targetOrder = ['Dog', 'Fish', 'Bird', 'Cat'];

// 配对动物与对应数值
const pairedItems = arr[0].map((animal, idx) => ({
  animal,
  value: arr[1][idx]
}));

// 按照目标顺序排序
pairedItems.sort((a, b) => {
  return targetOrder.indexOf(a.animal) - targetOrder.indexOf(b.animal);
});

// 拆分回二维数组
const sortedArr = [
  pairedItems.map(item => item.animal),
  pairedItems.map(item => item.value)
];

console.log(sortedArr);
// 输出：[ ['Dog', 'Fish', 'Bird', 'Cat'], [1, 2, 3, 4] ]

优化版（提升大数组排序效率）

如果数组元素较多，多次调用indexOf会影响性能，可以用Map预先存储顺序索引，实现O(1)时间复杂度的索引查找：

const arr = [['Dog', 'Cat', 'Fish', 'Bird'], [1, 4, 2, 3]];
const targetOrder = ['Dog', 'Fish', 'Bird', 'Cat'];
// 创建顺序映射表
const orderMap = new Map(targetOrder.map((animal, idx) => [animal, idx]));

const pairedItems = arr[0].map((animal, idx) => ({
  animal,
  value: arr[1][idx]
}));

// 基于映射表排序
pairedItems.sort((a, b) => orderMap.get(a.animal) - orderMap.get(b.animal));

const sortedArr = [
  pairedItems.map(item => item.animal),
  pairedItems.map(item => item.value)
];

console.log(sortedArr);

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