根據關鍵位置對數組中的項目進行分組

Question

給定以下數組：

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]

基於找到的索引，我如何將數組中的項目分組到它們找到的索引，直到下一次發生？

Answer 1

由於輸入和 output 項目不是一對一的， .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);