如何根據鍵值嵌套物件數組以優化渲染？

使用巢狀鍵將物件陣列分組

問題：

給定一個物件數組，任務為重新組織透過基於特定鍵創建嵌套結構，將它們轉換為針渲染而最佳化的格式

範例：

輸入陣列：

[
  {
    tab: 'Results',
    section: '2017',
    title: 'Full year Results',
    description: 'Something here',
  },
  {
    tab: 'Results',
    section: '2017',
    title: 'Half year Results',
    description: 'Something here',
  },
  {
    tab: 'Reports',
    section: 'Marketing',
    title: 'First Report',
    description: 'Something here',
  }
]

所需輸出：

[
  {
    tab: 'Results',
    sections: [
      {
        section: '2017',
        items: [
          { 'item that belongs here' },
          { ... }
        ]
      }
    ]
  },
  {
    tab: 'Reports',
    sections: [
      {
        section: 'Marketing',
        items: [
          { ... },
          { ... }
        ]
      }
    ]
  }
]

解:

這個轉變可以是使用lodash 函數 _.map 和 _.groupBy 的組合來實現。

function groupAndMap(items, itemKey, childKey, predic) {
  return _.map(_.groupBy(items, itemKey), (obj, key) => ({
    [itemKey]: key,
    [childKey]: (predic && predic(obj)) || obj
  }));
}

要根據需要嵌套數據，請遞歸地應用 groupAndMap。

const output = groupAndMap(items, "tab", "sections", arr =>
  groupAndMap(arr, "section", "items")
);

此解決方案實現了以下目標根據特定鍵值對物件數組進行分組和嵌套。

以上是如何根據鍵值嵌套物件數組以優化渲染？的詳細內容。更多資訊請關注PHP中文網其他相關文章！