扁平數組與JSON樹結構互轉

silvertheo 發布于2019-05-22 18:00 / 2648人閱讀

摘要：前言在工作中我們往往可能會遇到無限級別的分類等等的需求，往往后端返回的數據結構可能不是我們想要的數據結構，所以我們來看怎么進行處理扁平數據結構轉換為樹型結構解憂雜貨鋪解憂雜貨鋪解憂雜貨鋪解憂雜貨鋪解憂雜貨鋪解憂雜貨鋪

前言

在工作中我們往往可能會遇到無限級別的分類等等的需求，往往后端返回的數據結構可能不是我們想要的數據結構，所以我們來看怎么進行處理

扁平數據結構轉換為JSON樹型結構

[
  {id: 1, title: "解憂雜貨鋪1", parent_id: 0},
  {id: 2, title: "解憂雜貨鋪2", parent_id: 0},
  {id: 3, title: "解憂雜貨鋪2-1", parent_id: 2},
  {id: 4, title: "解憂雜貨鋪3-1", parent_id: 3},
  {id: 5, title: "解憂雜貨鋪4-1", parent_id: 4},
  {id: 6, title: "解憂雜貨鋪2-2", parent_id: 2},
]

代碼

function fn(data, pid) {
  let result = [], temp;
  for (let i = 0; i < data.length; i++) {
    if (data[i].pid === pid) {
      let obj = {"title": data[i].title,"pid": data[i].pid,"id": data[i].id};
      temp = fn(data, data[i].id);
      if (temp.length > 0) {
        obj.children = temp;
      }
      result.push(obj);
    }
  }
  return result;
}
let returnTree = fn(flatArr,0);
console.log(returnTree);

輸出結果

[
{id: 1, title: "解憂雜貨鋪1", pid: 0},
  {
    id: 2, title: "解憂雜貨鋪2", pid: 0, children: [
      {id: 6, title: "解憂雜貨鋪4-2", pid: 2},
      {
        id: 3, title: "解憂雜貨鋪2-1", pid: 2, children: [
          {
            id: 4, title: "解憂雜貨鋪3-1", pid: 3, children: [
              {id: 5, title: "解憂雜貨鋪4-1", pid: 4},
            ]
          },
        ]
      },
    ]
  }
];

JSON樹型結構轉換扁平結構

我們看到上面已經有轉換好了的JSON樹形結構，那么我們如何把上面的結構反推回來呢

代碼

function flatten(data) {
  return data.reduce((arr, {id, title, pid, children = []}) =>
    arr.concat([{id, title, pid}], flatten(children)), []);
}
let flatArr = flatten(JsonTree);
console.log(flatArr)

輸出結果

[
  {id: 1, title: "解憂雜貨鋪1", pid: 0},
  {id: 2, title: "解憂雜貨鋪2", pid: 0},
  {id: 3, title: "解憂雜貨鋪2-1", pid: 2},
  {id: 4, title: "解憂雜貨鋪3-1", pid: 3},
  {id: 5, title: "解憂雜貨鋪4-1", pid: 4},
  {id: 6, title: "解憂雜貨鋪4-2", pid: 2},
]

結語

利用上面的代碼，我們就可以輕松的轉換這兩種數據結構~ 如果大佬們有更好的方法，希望可以發出來一起探討~

云服務器 GPU云服務器 JSON樹結構 json目錄樹結構 php樹結構數組 js解析json樹數據結構

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/6804.html

JS專題之數組展開

摘要：根據需求的特點，數組展開需要進行迭代和遞歸。回答文章開頭的問題將多重數組轉化成單層數組的過程就是數組展開，也叫作數組扁平化一循環加遞歸最簡單的思路循環中判斷，如果子元素是數組則遞歸。前言首先什么是數組展開？假如現在有這樣一個需求：將后臺的一個多重 List 數據，展開成一個 List 后，并去重后排序； [a, b, [c, d], [[d],e], f] => [a, b, ...

boredream 2019-08-23 15:07 評論0 收藏0
前端數據扁平化與持久化

摘要：與持久化工程師花了年時間打造，與同期出現。有持久化數據結構，如等，并發安全。總結篇幅有限，時間也比較晚了，關于前端數據的扁平化與持久化處理先講這么多了，有興趣的同學可以關注下，后面有時間會多整理分享。 (PS: 時間就像海綿里的水，擠到沒法擠，只能擠擠睡眠時間了~ 知識點還是需要整理的，付出總會有收獲，tired but fulfilled~) 前言最近業務開發，從零搭建網頁生成器，...

dreamtecher 2019-08-23 11:41 評論0 收藏0
【前端芝士樹】如何完成數組的扁平化 Array flattern？

摘要：前端芝士樹如何完成數組的扁平化問題描述輸入一個嵌套型數組輸出扁平化后的數組如果只是兩層的數據如果是多層嵌套的數組【前端芝士樹】如何完成數組的扁平化 Array flattern？問題描述輸入：一個嵌套型數組輸出：扁平化后的數組 let array = [1, [2, 3, 4]]; let arrayDeeper = [1, [2, [3, 4]]]; 如果只是兩層的數據 fun...

2shou 2019-08-23 12:57 評論0 收藏0
laravel-nestedset：多級無限分類正確姿勢

摘要：通過自定義的查詢加載和大多數情況下，你需要按層級排序祖先集合可以被預加載視圖模板中面包屑將祖先的全部取出后轉換為數組，在用拼接為字符串輸出。原文鏈接：http://www.pilishen.com/posts...; 歡迎作客我們的php&Laravel學習群：109256050 laravel-nestedset是一個關系型數據庫遍歷樹的larvel4-5的插件包目錄： Nes...

pf_miles 2019-06-28 18:20 評論0 收藏0