JavaScript實現(xiàn)計算多維嵌套數(shù)組深度

更新時間：2023年06月04日 08:20:56 作者：??????????????????

在前端開發(fā)中，經(jīng)常會遇到需要處理多維嵌套的數(shù)據(jù)結構，并需要計算出它們的深度，本文就來講講如何使用JavaScript實現(xiàn)計算多維嵌套數(shù)組深度吧

前言

在前端開發(fā)中，經(jīng)常會遇到需要處理多維嵌套的數(shù)據(jù)結構。而對于這些多維嵌套的數(shù)據(jù)結構，往往需要計算出它們的深度，用于方便后續(xù)處理。本文將介紹使用JavaScript實現(xiàn)計算多維嵌套數(shù)組深度的方法。

理論知識

在了解具體實現(xiàn)前，先來了解一下相關的理論知識：多維數(shù)組的深度。所謂數(shù)組的深度，就是指這個數(shù)組里面嵌套了多少層子數(shù)組。如下圖所示：

[1, 2, 3, 4]        // 深度為 1
[[1, 2], [3, 4]]    // 深度為 2
[[[1, 2], [3, 4]], [[5, 6], [7, 8]]]  // 深度為 3

可以看出，第一種情況只有一層，第二種情況有兩層，第三種情況有三層。

實現(xiàn)思路

根據(jù)上述定義，計算一個數(shù)組的深度其實就是遞歸遍歷每一層子數(shù)組，并不斷加一的過程。因此，我們可以采用遞歸的思想，實現(xiàn)如下：

function getDepth(arr) {
  if (!Array.isArray(arr)) {   // 判斷是否為數(shù)組
    return 0;
  }
  let depth = 1;               // 初始化深度為 1
  for (let i = 0; i < arr.length; i++) {
    const cur = arr[i];
    if (Array.isArray(cur)) {  // 如果當前元素仍為數(shù)組，遞歸遍歷
      const curDepth = getDepth(cur) + 1;
      depth = Math.max(depth, curDepth);
    }
  }
  return depth;
}

上述代碼中，首先進行了類型判斷，如果不是數(shù)組，則直接返回“0”；否則，逐層遍歷每一層子數(shù)組，通過遞歸調(diào)用函數(shù)計算出每個子數(shù)組的深度，并記錄最大深度。

實例演示

我們可以利用上述方法對以下多維嵌套數(shù)組進行深度計算：

const arr1 = [1, 2, 3, 4];                  // 深度為 1
const arr2 = [[1, 2], [3, 4]];             // 深度為 2
const arr3 = [[[1, 2], [3, 4]], [[5, 6], [7, 8]]];  // 深度為 3
console.log(getDepth(arr1));                // 輸出 1
console.log(getDepth(arr2));                // 輸出 2
console.log(getDepth(arr3));                // 輸出 3

在控制臺輸出結果如下：

1
2
3

此外，我們還可以對一些嵌套層數(shù)較深的數(shù)組進行計算：

const arr4 = [[[[1, 2], [3, 4]], [[5, 6], [7, 8]]],
              [[[1, 2], [3, 4]], [[5, 6], [7, 8]]]]; // 深度為 4
console.log(getDepth(arr4));                // 輸出 4

性能優(yōu)化

在實際開發(fā)中，如果處理的數(shù)據(jù)量很大，單純使用遞歸的方法可能會耗費大量時間和內(nèi)存資源。因此，在設計算法時應該盡可能地減少時間復雜度和空間復雜度。

以下是一些可能比較好的優(yōu)化方案:

方案一：隊列迭代

隊列迭代法同樣可以獲取多維嵌套數(shù)組的深度，而且有時候運行速度更快。我們可以使用一個隊列來存儲每一層子數(shù)組，并不斷出隊并將其所有元素壓入隊列中，直到隊列為空為止。我們可以通過記錄隊列的大小來控制深度的增加，具體實現(xiàn)如下：

function getDepthByQueue(arr) {
  if (!Array.isArray(arr)) {  // 判斷是否為數(shù)組
    return 0;
  }
  let depth = 1;              // 初始化深度為 1
  const queue = [arr];        // 將初始數(shù)組放入隊列中
  while (queue.length) {      // 如果隊列不為空
    const curLevelSize = queue.length;
    for (let i = 0; i < curLevelSize; i++) {
      const cur = queue.shift();     // 出隊一個子數(shù)組
      if (Array.isArray(cur)) {
        queue.push(...cur);          // 將其中所有元素入隊
      }
    }  
    depth++;                        // 深度加一
  }
  return depth - 1;                 // 最后在隊列為空時，depth 多增加了一次，故需要減一
}

方案二：reduce計數(shù)

通過使用reduce方法，可以實現(xiàn)對多維嵌套數(shù)組的深度進行計數(shù)。在這種方法里，我們只需要遍歷每一個元素，并讓其值等于當前遞歸所得到的深度加一即可。

function getDepthByReduce(arr) {
  if (!Array.isArray(arr)) {   // 判斷是否為數(shù)組
    return 0;
  }
  return arr.reduce(function(pre, cur) {
    const curDepth = getDepthByReduce(cur) + 1;
    return Math.max(pre, curDepth);
  }, 1)
}

異常處理

在正常情況下，多維嵌套數(shù)組的深度是可以被正常計算的。但是在某些邊界條件下，我們需要對計算過程進行異常處理：

邊界條件一：空數(shù)組

對于空數(shù)組，其深度為0。

console.log(getDepth([]));   // 輸出 0

邊界條件二：不是數(shù)組

如果傳入的值不是數(shù)組類型，返回0即可。

console.log(getDepth("test"));    // 輸出 0
console.log(getDepth({ a: 1 }));  // 輸出 0
console.log(getDepth(123));      // 輸出 0

邊界條件三：無限遞歸

在某些特殊情況下，可能會出現(xiàn)無限遞歸的錯誤。例如一個由自己本身構成的數(shù)組，此時就會導致函數(shù)陷入死循環(huán)。因此，在編寫代碼時需要避免這種惡性遞歸行為。

const test = [];
test.push(test);
console.log(getDepth(test));    // 此處會出現(xiàn)無限遞歸的錯誤

為了避免無限遞歸的問題，可以設置一個計數(shù)器。當函數(shù)調(diào)用次數(shù)超過一定值時，拋出異常并阻止遞歸的繼續(xù)進行。

function getDepthWithLimit(arr, limit = 10000) {
  let count = 0;
  function calculateDepth(cur) {
    if (!Array.isArray(cur)) {
      return 0;
    }
    if (count++ > limit) {        // 超過極限次數(shù)則返回 Infinity
      throw new Error("too much recursive");
    }
    const curDepth = Math.max(...cur.map(calculateDepth)) + 1;
    return curDepth;
  }
  try {
    return calculateDepth(arr);
  } catch (e) {
    console.warn(e.message);
    return Infinity;
  }
}

在函數(shù)中增加計數(shù)器，每經(jīng)過一次遞歸就自增，如果達到某個條件（limit）就拋出異常，并阻止遞歸的執(zhí)行。最后用try...catch來捕獲異常。