引言

我們經常會碰到樹形資料結構，比如組織層級、省市縣或者動植物分類等等資料。下面是一個樹形結構的例子：

在實際應用中，比較常見的做法是將這些資訊儲存為下面的結構，特別是當存在1對多的父/子節點關係時：

const data = [
  { id: 56, parentId: 62 },
  { id: 81, parentId: 80 },
  { id: 74, parentId: null },
  { id: 76, parentId: 80 },
  { id: 63, parentId: 62 },
  { id: 80, parentId: 86 },
  { id: 87, parentId: 86 },
  { id: 62, parentId: 74 },
  { id: 86, parentId: 74 },
];
 

那麼，如何將這種物件陣列格式轉換為層級樹的格式呢？其實，利用 JavaScript 物件引用的特性，實現起來會非常簡單。它可以不用遞迴，在O(n)時間內完成。

術語

為了表述方便，我們先來定義幾個術語。我們把陣列中的每個元素（也就樹形圖裡的每個圓圈）稱為“節點”。節點可以是多個節點的“父節點”，也可以是某個節點的“子節點”。上圖中，節點 86是節點 80 和節點 87的“父節點”，節點 86 是節點 74的子節點。樹的最頂部節點稱為“根節點”。

思路

為了構造樹形結構，我們需要：

1. 遍歷data陣列
2. 找到當前元素的父元素
3. 在父元素物件上新增一個對該子元素的引用
4. 元素如果沒有父元素，那我們就認為它是樹的根節點

我們可以看到到，引用被儲存在物件樹下，這就是為什麼我們可以在O(n)時間內完成這個任務！

建立 ID-陣列索引對映關係

雖然不是必需的，但是這個對映關係可以幫我們快速找到元素的位置，方便找到到父元素的引用。

const idMapping = data.reduce((acc, el, i) => {
  acc[el.id] = i;
  return acc;
}, {});

對映結果如下，後面你會看到它的用處有多大：

{
  56: 0,
  62: 7,
  63: 4,
  74: 2,
  76: 3,
  80: 5,
  81: 1,
  86: 8,
  87: 6,
};
 

構造樹形結構

現在我們開始構造這個樹形結構。遍歷這個物件陣列，找到每個元素的父元素物件，然後新增對這個元素的引用。現在你應該看到了，這個 idMapping用來定位元素的位置多麼方便（常數時間）。

let root;
data.forEach(el => {
  // 判斷根節點
  if (el.parentId === null) {
    root = el;
    return;
  }
  // 用對映表找到父元素
  const parentEl = data[idMapping[el.parentId]];
  // 把當前元素新增到父元素的`children`陣列中
  parentEl.children = [...(parentEl.children || []), el];
});

完事！用console.log 列印 root 看下：

console.log(root);

{
  id: 74,
  parentId: null,
  children: [
    {
      id: 62,
      parentId: 74,
      children: [{ id: 56, parentId: 62 }, { id: 63, parentId: 62 }],
    },
    {
      id: 86,
      parentId: 74,
      children: [
        {
          id: 80,
          parentId: 86,
          children: [{ id: 81, parentId: 80 }, { id: 76, parentId: 80 }],
        },
        { id: 87, parentId: 86 },
      ],
    },
  ],
};

原理

為什麼可以這麼做呢？這是因為，data 數組裡的每個元素都是記憶體裡的一個物件引用， forEach迴圈裡的el變數其實是指向記憶體裡的一個物件，parentEl也引用了一個物件。

如果記憶體中的一個物件引用了一個 children 陣列，這些子元素同樣可以引用自己的子元素陣列，這些關聯關係都是通過引用完成的。

總結

物件引用是 JavaScript 中最基本的概念之一，需要更多的學習和理解。真正理解這個概念後，既可以避免棘手的 bug，又可以為看似複雜的問題提供相對簡單的解決方案。

歡迎關注微信公眾號：1024譯站

相關推薦