如何将指定元素移至数组前端？求JavaScript更优实现方案

原始数据 #

const persons = [
  {
    label: "jhon",
    value: 1
  },
  {
    label: "Mary",
    value: 2
  },
  {
    label: "Michelle",
    value: 3
  },
  {
    label: "David",
    value: 4
  },
  {
    label: "Kerry",
    value: 5
  },
  {
    label: "Tom",
    value: 6
  }
];
const testPassedPersons = [3, 5, 6];

需求说明 #

需要把persons数组中value存在于testPassedPersons的元素移到数组头部，且头部元素必须严格按照testPassedPersons的顺序排列，剩余元素保持原数组顺序放在后面，最终结果如下：

const sortedPersons = [
  { label: "Michelle", value: 3 },
  { label: "Kerry", value: 5 },
  { label: "Tom", value: 6 },
  { label: "jhon", value: 1 },
  { label: "Mary", value: 2 },
  { label: "David", value: 4 }
];

已实现方案 #

你当前的实现代码如下：

const sortedPersons = [
  ...persons.filter((person) => testPassedPersons.includes(person.value)),
  ...persons.filter((person) => !testPassedPersons.includes(person.value))
];

这个方案逻辑简单，但存在两个潜在问题：

1. 性能：两次遍历persons数组，且Array.includes()是O(n)操作，数据量大时性能会下降
2. 顺序风险：如果testPassedPersons的顺序和persons中元素出现的顺序不一致，头部元素的顺序就不符合要求（比如testPassedPersons是[6,5,3]，当前方案会输出[3,5,6]而非预期的[6,5,3]）

优化方案 #

方案1：用Map+Set提升性能，严格保证顺序 #

通过构建映射表把查找操作从O(n)降到O(1)，同时直接按testPassedPersons的顺序生成头部元素，性能最优：

// 构建passed值的集合，O(1)查找
const passedSet = new Set(testPassedPersons);
// 构建value到person的映射，快速获取对应元素
const personMap = new Map(persons.map(p => [p.value, p]));

// 先按testPassedPersons顺序取元素，再拼接未通过的元素
const sortedPersons = [
  ...testPassedPersons.map(v => personMap.get(v)),
  ...persons.filter(p => !passedSet.has(p.value))
];

优势：

• 查找效率大幅提升，大数据量场景下性能明显优于原方案
• 头部元素严格遵循testPassedPersons的顺序，不受原数组影响
• 代码简洁，逻辑清晰

方案2：一次遍历分组，按需排序 #

如果不想额外构建映射表，可以通过一次遍历把元素分成两组，再对通过组按指定顺序排序：

// 构建value到排序优先级的映射
const passedPriority = new Map(testPassedPersons.map((v, idx) => [v, idx]));
const passed = [];
const nonPassed = [];

// 一次遍历完成分组
persons.forEach(p => {
  passedPriority.has(p.value) ? passed.push(p) : nonPassed.push(p);
});

// 对通过组按指定顺序排序
passed.sort((a, b) => passedPriority.get(a.value) - passedPriority.get(b.value));

const sortedPersons = [...passed, ...nonPassed];

优势：

• 仅遍历原数组一次，内存占用更低
• 适合中等数据量场景，代码可读性强

方案3：极简写法（兼顾性能与简洁） #

如果追求极致简洁，也可以用下面的写法，本质和方案1类似：

const passedSet = new Set(testPassedPersons);
const sortedPersons = [
  ...testPassedPersons.map(v => persons.find(p => p.value === v)),
  ...persons.filter(p => !passedSet.has(p.value))
];

注意：Array.find()是O(n)操作，所以这个写法的性能比方案1略差，但在数据量不大的场景下可以接受，胜在代码更短。

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