国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

扁平數(shù)組與JSON樹結(jié)構(gòu)互轉(zhuǎn)

silvertheo / 2645人閱讀

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

前言

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

扁平數(shù)據(jù)結(jié)構(gòu)轉(zhuǎn)換為JSON樹型結(jié)構(gòu) 
[
  {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);
輸出結(jié)果 
[
{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樹型結(jié)構(gòu)轉(zhuǎn)換扁平結(jié)構(gòu)

我們看到上面已經(jīng)有轉(zhuǎn)換好了的JSON樹形結(jié)構(gòu)，那么我們?nèi)绾伟焉厦娴慕Y(jié)構(gòu)反推回來呢

代碼 
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)
輸出結(jié)果 
[
  {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},
]
結(jié)語

利用上面的代碼，我們就可以輕松的轉(zhuǎn)換這兩種數(shù)據(jù)結(jié)構(gòu)~ 如果大佬們有更好的方法，希望可以發(fā)出來一起探討~

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/6804.html

相關(guān)文章

  • JS專題之數(shù)組展開

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

    boredream 評論0 收藏0

  • 前端數(shù)據(jù)扁平化與持久化

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

    dreamtecher 評論0 收藏0

  • 【前端芝士樹】如何完成數(shù)組的扁平化 Array flattern？

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

    2shou 評論0 收藏0

  • laravel-nestedset：多級無限分類正確姿勢

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

    pf_miles 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<