快捷導(dǎo)航

JavaScript樹形數(shù)據(jù)扁平化的三種實(shí)現(xiàn)方法(遞歸/迭代/flatMap)

更新時(shí)間：2025年08月18日 09:57:31 作者：編程隨想_Code

樹形數(shù)據(jù)結(jié)構(gòu)在前端應(yīng)用中被廣泛用于表示層級(jí)關(guān)系的數(shù)據(jù),如菜單、部門結(jié)構(gòu)、文件目錄等,扁平化操作通常是指將具有層級(jí)關(guān)系的樹形數(shù)據(jù)轉(zhuǎn)換為單一維度的數(shù)據(jù)結(jié)構(gòu),即數(shù)組,本文給大家介紹了JavaScript樹形數(shù)據(jù)扁平化的三種實(shí)現(xiàn)方法,需要的朋友可以參考下

一、樹形結(jié)構(gòu)的特點(diǎn)

一個(gè)典型的樹形結(jié)構(gòu)數(shù)據(jù)可能是這樣的：

const treeData = [
  {
    id: 1,
    name: "A",
    children: [
      {
        id: 2,
        name: "A-1",
        children: [
          { id: 3, name: "A-1-1" },
          { id: 4, name: "A-1-2" }
        ]
      },
      {
        id: 5,
        name: "A-2"
      }
    ]
  },
  {
    id: 6,
    name: "B"
  }
];

特點(diǎn)：

每個(gè)節(jié)點(diǎn)可能有 children 屬性存放子節(jié)點(diǎn)。
層級(jí)關(guān)系不固定，可能有很多層。
數(shù)據(jù)訪問需要遞歸或迭代遍歷。

二、為什么要轉(zhuǎn)換成普通數(shù)組？

樹形結(jié)構(gòu)雖然表達(dá)了層級(jí)關(guān)系，但在以下場景下并不方便：

全局搜索：需要遍歷所有節(jié)點(diǎn)匹配關(guān)鍵字。
批量操作：需要一次性拿到所有節(jié)點(diǎn)的 ID 或名稱。
統(tǒng)計(jì)：統(tǒng)計(jì)節(jié)點(diǎn)數(shù)量、節(jié)點(diǎn)類型等。

將樹形數(shù)據(jù)拍平成數(shù)組后，數(shù)據(jù)會(huì)變成這樣：

[
  { id: 1, name: "A" },
  { id: 2, name: "A-1" },
  { id: 3, name: "A-1-1" },
  { id: 4, name: "A-1-2" },
  { id: 5, name: "A-2" },
  { id: 6, name: "B" }
]

這樣處理起來就非常方便。

三、實(shí)現(xiàn)方法

方法一：遞歸實(shí)現(xiàn)

遞歸是處理樹形結(jié)構(gòu)的經(jīng)典方式。

function treeToArray(tree) {
  let result = [];

  function traverse(nodeList) {
    for (const node of nodeList) {
      // 拷貝當(dāng)前節(jié)點(diǎn)（防止修改原數(shù)據(jù)）
      const { children, ...rest } = node;
      result.push(rest);

      // 如果有子節(jié)點(diǎn)，遞歸處理
      if (children && children.length) {
        traverse(children);
      }
    }
  }

  traverse(tree);
  return result;
}

const flatArray = treeToArray(treeData);
console.log(flatArray);

運(yùn)行結(jié)果：

[
  { id: 1, name: 'A' },
  { id: 2, name: 'A-1' },
  { id: 3, name: 'A-1-1' },
  { id: 4, name: 'A-1-2' },
  { id: 5, name: 'A-2' },
  { id: 6, name: 'B' }
]

方法二：迭代（棧）實(shí)現(xiàn)

如果不想用遞歸，可以用棧來實(shí)現(xiàn)。

function treeToArrayIterative(tree) {
  let result = [];
  let stack = [...tree]; // 先把根節(jié)點(diǎn)放進(jìn)棧

  while (stack.length) {
    const node = stack.pop();
    const { children, ...rest } = node;
    result.push(rest);

    // 注意：這里用棧，所以先放子節(jié)點(diǎn)才能保證順序
    if (children && children.length) {
      stack.push(...children);
    }
  }

  return result;
}

const flatArray2 = treeToArrayIterative(treeData);
console.log(flatArray2);

方法三：使用 Array.flatMap（ES2019+）

如果層級(jí)不深，可以用 flatMap + 遞歸的方式更簡潔：

function treeToArrayFlatMap(tree) {
  return tree.flatMap(({ children, ...rest }) =>
    children ? [rest, ...treeToArrayFlatMap(children)] : [rest]
  );
}

console.log(treeToArrayFlatMap(treeData));

四、性能對比

遞歸：代碼簡潔、可讀性好，適合絕大多數(shù)場景。
迭代：避免遞歸棧溢出，適合極深層級(jí)的樹。
flatMap：語法簡潔，但瀏覽器兼容性略差（需 ES2019+）。

五、總結(jié)

樹形結(jié)構(gòu)轉(zhuǎn)換為普通數(shù)組的關(guān)鍵點(diǎn)在于：

遍歷：無論遞歸還是迭代，都需要訪問每一個(gè)節(jié)點(diǎn)。
數(shù)據(jù)處理：在 push 到結(jié)果數(shù)組時(shí)，去掉 children，避免冗余。
順序：遞歸天然保證順序，迭代需要注意入棧順序。

在實(shí)際項(xiàng)目中，可以根據(jù)數(shù)據(jù)規(guī)模和瀏覽器兼容性選擇合適的方式。

建議

在處理樹形結(jié)構(gòu)時(shí)，可以先封裝一個(gè)通用的遍歷方法，這樣后續(xù)不僅能拍平數(shù)組，還可以做任意數(shù)據(jù)加工，比如篩選、映射等。

到此這篇關(guān)于JavaScript樹形數(shù)據(jù)扁平化的三種實(shí)現(xiàn)方法(遞歸/迭代/flatMap)的文章就介紹到這了,更多相關(guān)JavaScript樹形數(shù)據(jù)扁平化內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: