首頁 > web前端 > js教程 > 如何根據鍵值嵌套物件數組以優化渲染?

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

DDD
發布: 2024-12-04 11:29:10
原創
1140 人瀏覽過

How to Nest an Array of Objects Based on Key Values for Optimized Rendering?

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

問題:

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

範例:

輸入陣列:

[
  {
    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中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板