JavaScript中如何将元素插入数组匹配项对应的相同索引位置

你的核心需求是按照预设的categoryOrder顺序，将同分类的组件归集到结果数组的对应索引位置，以下是最优实现思路：

最优实现（时间复杂度O(n)） #

思路是先建立分类名到数组索引的映射，避免每次查找索引的额外开销，直接按映射位置归集组件：

const categoryOrder = [
  "Headings",
  "Text",
  "Lists & Menus",
  "Quotes",
  "Banners",
  "Images",
  "Videos",
  "Galleries",
  "Logos",
  "Clickthrough Images",
  "Buttons & CTAs",
  "Lines & Dividers",
  "Actions",
  "Social Media & Integrations",
  "Blog, Events & Podcast",
  "Ecommerce",
  "Navigation",
  "Footers",
  "Premium",
  "Misc",
];
// 初始化结果数组，长度和分类顺序一致，每一项是空数组用来存对应分类的组件
const categorizedComponents = Array.from({length: categoryOrder.length}, () => []);
// 建立分类名到索引的映射，一次生成后续直接用
const categoryIndexMap = new Map(categoryOrder.map((name, idx) => [name, idx]));

if (defaultComponents) {
  defaultComponents.forEach(component => {
    const idx = categoryIndexMap.get(component.category);
    // 只处理在预设分类里的组件，如果要收集未知分类可以额外加逻辑
    if (idx !== undefined) {
      categorizedComponents[idx].push(component);
    }
  });
}

如果你需要过滤掉没有组件的空分类，只保留有内容的分类按原顺序排列，再加一行过滤即可：

const validCategorizedComponents = categorizedComponents.filter(arr => arr.length > 0);

方案优势 #

• 执行效率高：仅需2次线性遍历，分类查找时间复杂度为O(1)，组件数量大的时候远优于每次用indexOf查找索引的实现
• 顺序严格匹配：结果数组的索引和你预设的categoryOrder完全对应，不需要额外排序
• 可扩展性强：如果后续需要调整分类顺序，仅修改categoryOrder即可，不需要改动其他逻辑

和你之前考虑的对象存储思路对比 #

如果用键为分类名、值为组件数组的对象存储，最终你还是需要按照categoryOrder的顺序遍历对象取值才能得到符合要求的顺序，多了一步遍历操作，不如直接用数组按索引存储更直接，取数时也不需要额外通过分类名查找，直接用索引即可定位到对应分类的组件列表。

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