javascript - 根据引用数组重新排序数组

Question

const ids = ["first", "second", "third", "fourth", "fifth", "sixth"];

const items = [
  {id: "third", value: ".."},
  {id: "fifth", value: ".."},
  {id: "first", value: ".."},
  {id: "fourth", value: ".."}
];

如您所见，顺序不同，并且缺少 ID 为 second 和 sixth 的项目。

• items 中的项目必须与 ids 中的项目顺序相同
• 必须有 null 而不是缺少项目(second 和 sixth)

---

最终结果是这样的:

const items = [
  {id: "first", value: ".."},
  null, // <-- important
  {id: "third", value: ".."},
  {id: "fourth", value: ".."},
  {id: "fifth", value: ".."},
  null  // <-- important
];

---

这是一个性能关键函数，我需要它尽可能地执行。

有什么我可以做的吗？下面性能统计中的那些计数都是可能的情况。

---

我的功能:

console.time('generate');
const arrays = generateArrays(100); // num of items, check perf stats below snippet

console.time('reorder');
reOrder(arrays.ids, arrays.items);


// THIS function is the purpose of this question
function reOrder(ids, items) {
  let result = [];

  ids.forEach((id, i) => {
    const match = items.find((item) => {
      return item.id === id;
    });

    // Missing, insert null instead
    if (match === undefined) {
       return result[i] = null;
    }
    // Has match, insert to proper index
    return result[i] = match;
  });

  console.timeEnd('reorder');
  console.log('final result:', result);
}


// Generate huge random arrays ([ids], [items])
// * Random items are missing 
// * Items are randomly shuffled
function generateArrays(count) {
  let ids = [];
  let items = [];
  let itemsIndex = 0;

  for(let i = 0; i < count; i++) {
    const randomID = Math.random().toString(36).substr(7);
    // Ids have beautiful full array without shenanigans
    ids[i] = randomID;

    // Randomly add items (a.k.a random items are missing)
    if (Math.random() < 0.7) {
      items[itemsIndex] = {
        id: randomID,
        idIndex: i, // to check if final result is correct
        itemIndex: itemsIndex, // to check if shuffled properly
        value: Math.random().toString(36).substr(7)
      };

      itemsIndex++;
    }
  }
  
  shuffleArray(items);
  
  //console.log('generated ids:', ids);
  //console.log('generated items:', items);
  console.timeEnd('generate');

  return {ids: ids, items: items};
}


// Shuffle items in array
function shuffleArray(array) {
  var currentIndex = array.length, temporaryValue, randomIndex;
  while (0 !== currentIndex) {
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;
    temporaryValue = array[currentIndex];
    array[currentIndex] = array[randomIndex];
    array[randomIndex] = temporaryValue;
  }
  return array;
}

// Performance stats with my okay PC
--------------------------------------
       Count     |       Time
--------------------------------------
       100             0.3 - 1ms
       500              5 - 10ms
        1K             10 - 25ms

// WARNING, gets messy for weak rigs!

        5K            around 300ms
       10K              1 - 1.5s

Answer 1

为了提高速度，您可以只使用可怜人的 javascript 内置 map 选项。可以非常快速地查找对象的属性名称，使所有对象成为一个 Map。映射可排序项，然后按排序顺序将它们添加到数组中。使您不必调用 indexOf 或查找。认为搜索仍然完成，它将比数组方法快得多。

const ids = ["first", "second", "third", "fourth", "fifth", "sixth"];

const items = [
  {id: "third", value: ".."},
  {id: "fifth", value: ".."},
  {id: "first", value: ".."},
  {id: "fourth", value: ".."}
];
const itemsSort = {};
items.forEach(item => itemsSort[item.id] = item);
items.length = 0;
ids.forEach(id=>items.push(itemsSort[id]));

或者使用 Map 对象来做同样的事情。不确定速度是否符合上述，您将不得不尝试。

// from first snippets data set
const map = new Map();
items.forEach(item => map.set(item.id,item));
items.length = 0;
ids.forEach(id=>items.push(map.get(id)));