根据关键位置对数组中的项目进行分组答案

【问题标题】：Group items in array based on key positions根据关键位置对数组中的项目进行分组
【发布时间】：2022-01-12 02:51:13
【问题描述】：

给定以下数组：

const arr = [
  { id: 1, type: 'tab', content: 'Tab 1'},
  { id: 20, type: 'tabContent', content: 'Tab 1 content...' },
  { id: 2, type: 'tabContent', content: 'Tab 1 content...' },
  { id: 3, type: 'tabContent', content: 'Tab 1 content...' },
  { id: 5, type: 'tabContent', content: 'Tab 1 content...' },
  { id: 22, type: 'tab', content: 'Tab 2' },
  { id: 7, type: 'tabContent', content: 'Tab 2 content...' },
  { id: 8, type: 'tabContent', content: 'Tab 2 content...' },
  { id: 9, type: 'tabContent', content: 'Tab 2 content...' },
  { id: 10, type: 'tabContent', content: 'Tab 2 content...' },
  { id: 11, type: 'tabContent', content: 'Tab 2 content...' },
  { id: 12, type: 'tabContent', content: 'Tab 2 content...' },
  { id: 99, type: 'tab', content: 'Tab 3' },
  { id: 14, type: 'tabContent', content: 'Tab 3 content...' },
  { id: 15, type: 'tabContent', content: 'Tab 3 content...' },
  { id: 16, type: 'tabContent', content: 'Tab 3 content...' },
  { id: 17, type: 'tabContent', content: 'Tab 3 content...' },
];

我希望数组最终看起来像：

const arr = [
    { id: 1, type: 'tab', content: 'Tab 1', childContent: [
        { id: 20, type: 'tabContent', content: 'Tab 1 content...' },
        { id: 2, type: 'tabContent', content: 'Tab 1 content...' },
        { id: 3, type: 'tabContent', content: 'Tab 1 content...' },
        { id: 5, type: 'tabContent', content: 'Tab 1 content...' },
    ]},
    { id: 22, type: 'tab', content: 'Tab 2', childContent: [
        { id: 7, type: 'tabContent', content: 'Tab 2 content...' },
        { id: 8, type: 'tabContent', content: 'Tab 2 content...' },
        { id: 9, type: 'tabContent', content: 'Tab 2 content...' },
        { id: 10, type: 'tabContent', content: 'Tab 2 content...' },
        { id: 11, type: 'tabContent', content: 'Tab 2 content...' },
        { id: 12, type: 'tabContent', content: 'Tab 2 content...' },
    ] },
    { id: 99, type: 'tab', content: 'Tab 3', childContent: [
        { id: 14, type: 'tabContent', content: 'Tab 3 content...' },
        { id: 15, type: 'tabContent', content: 'Tab 3 content...' },
        { id: 16, type: 'tabContent', content: 'Tab 3 content...' },
        { id: 17, type: 'tabContent', content: 'Tab 3 content...' },
    ] },
];

得到键索引：

const keys = []
arr.map((item, index) => {
  if (item.type === 'tab') {
    keys.push(index)
  }
})

console.log('keys: ', keys)

"键：", [0, 5, 12]

根据找到的索引，如何将数组中的项目分组到找到的索引，直到下一次发生？

【问题讨论】：

标签： javascript arrays

【解决方案1】：

由于输入和输出项不是一对一的，.map 将不起作用。

不过，一个普通的循环会 - 在迭代时，只需检查它是 tab 还是 tabContent，如果是 tabContent，则推送到最后推送的数组的 childContent。

const arr=[{id:1,type:"tab",content:"Tab 1"},{id:20,type:"tabContent",content:"Tab 1 content..."},{id:2,type:"tabContent",content:"Tab 1 content..."},{id:3,type:"tabContent",content:"Tab 1 content..."},{id:5,type:"tabContent",content:"Tab 1 content..."},{id:22,type:"tab",content:"Tab 2"},{id:7,type:"tabContent",content:"Tab 2 content..."},{id:8,type:"tabContent",content:"Tab 2 content..."},{id:9,type:"tabContent",content:"Tab 2 content..."},{id:10,type:"tabContent",content:"Tab 2 content..."},{id:11,type:"tabContent",content:"Tab 2 content..."},{id:12,type:"tabContent",content:"Tab 2 content..."},{id:99,type:"tab",content:"Tab 3"},{id:14,type:"tabContent",content:"Tab 3 content..."},{id:15,type:"tabContent",content:"Tab 3 content..."},{id:16,type:"tabContent",content:"Tab 3 content..."},{id:17,type:"tabContent",content:"Tab 3 content..."}];

const result = [];
for (const obj of arr) {
  if (obj.type === 'tab') {
    result.push({ ...obj, childContent: [] });
  } else {
    result[result.length - 1].childContent.push(obj);
  }
}
console.log(result);

【讨论】：