什么是循環(huán)引用數(shù)組？

在JavaScript中，循環(huán)引用數(shù)組（Cyclical Array 或 Circular Reference Array）是指一個數(shù)組中包含對其自身的引用。這意味著數(shù)組的某個元素就是它本身，或者間接地通過其他對象引用回自身。這種結(jié)構(gòu)在特定場景下可能導(dǎo)致意外的行為，尤其是在進行遍歷或序列化操作時。

一個典型的循環(huán)引用數(shù)組創(chuàng)建示例如下：

const array = [1, 2, 3];
array.push(array); // 將數(shù)組自身作為元素添加到數(shù)組中
console.log(array); // 輸出: [1, 2, 3, [Circular]]

在此示例中，array 的最后一個元素就是 array 本身。

誤區(qū)：簡單的迭代不會立即導(dǎo)致無限循環(huán)

許多開發(fā)者可能誤認為，一旦數(shù)組中存在循環(huán)引用，任何形式的迭代都會立即陷入無限循環(huán)。然而，這并非總是如此。對于一個簡單的 for 循環(huán)，如果數(shù)組的長度在循環(huán)過程中沒有被修改，它并不會導(dǎo)致無限循環(huán)。

立即學習“Java免費學習筆記（深入）”；

考慮以下代碼：

const array = [1, 2, 3];
array.push(array); // 創(chuàng)建循環(huán)引用

// 簡單的 for 循環(huán)迭代
for (let i = 0; i < array.length; i++) {
  console.log(`Element at index ${i}:`, array[i]);
}
// 預(yù)期輸出：
// Element at index 0: 1
// Element at index 1: 2
// Element at index 2: 3
// Element at index 3: [Circular]

在這個例子中，循環(huán)會正常結(jié)束。原因在于，array.length 在循環(huán)開始時被評估為 4，并且在循環(huán)體內(nèi)沒有被改變。因此，循環(huán)會從 i = 0 運行到 i = 3，然后終止。盡管 array[3] 是 array 本身，但 console.log 能夠正確處理這種循環(huán)引用，通常會顯示 [Circular] 或類似標記，而不會無限遞歸。

真正導(dǎo)致問題的場景一：循環(huán)內(nèi)修改數(shù)組長度

循環(huán)引用數(shù)組在迭代過程中真正引發(fā)問題的一個常見場景是：在循環(huán)體內(nèi)不斷修改數(shù)組的長度，尤其是通過添加自身引用。

const array = [1, 2, 3];

for (let i = 0; i < array.length; i++) {
  array.push(array); // 在循環(huán)內(nèi)不斷添加數(shù)組自身
  console.log(`Current length: ${array.length}`);
}

執(zhí)行上述代碼，你將不會看到一個無限的 console.log 輸出，而是很可能遇到JavaScript引擎的致命錯誤，例如Node.js中可能出現(xiàn)的 Fatal JavaScript invalid size error。這是因為每次迭代都會增加數(shù)組的長度，導(dǎo)致 array.length 不斷增長，循環(huán)條件 i < array.length 永遠無法滿足。JavaScript引擎會嘗試為這個無限增長的數(shù)組分配內(nèi)存，最終耗盡可用內(nèi)存，從而引發(fā)致命錯誤。

真正導(dǎo)致問題的場景二：深度遍歷與遞歸操作

循環(huán)引用數(shù)組更常見的陷阱出現(xiàn)在需要深度遍歷或扁平化數(shù)組的場景中，尤其當這些操作依賴于遞歸算法時。例如，使用 Array.prototype.flat() 方法并設(shè)置 Infinity 深度，或者編寫自定義的遞歸函數(shù)來展平數(shù)組。

const array = [1, 2, 3];
array.push(array); // 創(chuàng)建循環(huán)引用

// 嘗試使用 flat() 方法展平數(shù)組
try {
  array.flat(Infinity);
} catch (e) {
  console.error("Error during flattening:", e);
}

執(zhí)行 array.flat(Infinity) 會導(dǎo)致一個 RangeError: Maximum call stack size exceeded 錯誤，即堆棧溢出。這是因為 flat(Infinity) 會嘗試無限深入地展平數(shù)組中的每個嵌套數(shù)組。當它遇到對自身的引用時，會不斷地嘗試展平這個引用，形成一個無限遞歸的調(diào)用鏈，最終耗盡調(diào)用堆棧。

AppMall應(yīng)用商店

AI應(yīng)用商店，提供即時交付、按需付費的人工智能應(yīng)用服務(wù)

56

查看詳情

同樣，任何基于遞歸的深度遍歷算法，如深度優(yōu)先搜索（DFS）或自定義的 deepClone 函數(shù)，如果不對循環(huán)引用進行特殊處理，都會遇到相同的堆棧溢出問題。

安全實踐與替代方案

理解循環(huán)引用數(shù)組的行為至關(guān)重要。在某些特定場景下，循環(huán)引用可能是有意為之，例如在構(gòu)建圖結(jié)構(gòu)或某些復(fù)雜數(shù)據(jù)模型時。在這種情況下，只要你清楚地知道哪些操作會導(dǎo)致問題（如深度遞歸遍歷），并加以避免，那么使用循環(huán)引用并非絕對的“壞事”。

然而，在大多數(shù)情況下，如果你的目的是添加數(shù)組的副本而不是引用自身，你應(yīng)該明確避免創(chuàng)建循環(huán)引用。

1. 避免意外的循環(huán)引用：使用副本

如果你只是想將數(shù)組的當前內(nèi)容作為一個新元素添加到數(shù)組中，而不是創(chuàng)建循環(huán)引用，那么應(yīng)該創(chuàng)建數(shù)組的淺拷貝。

const array = [1, 2, 3];
array.push(array.slice()); // 將 array 的一個淺拷貝添加到數(shù)組中
console.log(array); // 輸出: [1, 2, 3, [1, 2, 3]]
console.log(array.flat(Infinity)); // 輸出: [1, 2, 3, 1, 2, 3] (正常展平)

使用 array.slice() 會創(chuàng)建一個新的數(shù)組，其中包含原始數(shù)組的元素副本（對于基本類型是值副本，對于引用類型是引用副本）。這樣，array 的最后一個元素是一個獨立的數(shù)組 [1, 2, 3]，而不是對 array 本身的引用，從而避免了循環(huán)引用問題。

2. 處理已有的循環(huán)引用：檢測與跳過

如果你確實需要處理包含循環(huán)引用的數(shù)據(jù)結(jié)構(gòu)（例如，在序列化或深度克隆時），你需要實現(xiàn)機制來檢測并跳過已訪問過的引用，以防止無限遞歸。常見的技術(shù)是使用一個 Set 或 Map 來存儲已訪問過的對象，并在每次遞歸調(diào)用前檢查當前對象是否已在其中。

總結(jié)

JavaScript中的循環(huán)引用數(shù)組是一個需要謹慎處理的特性。雖然簡單的迭代在不修改數(shù)組長度的情況下不會導(dǎo)致無限循環(huán)，但在循環(huán)內(nèi)部修改數(shù)組長度或進行深度遞歸操作（如 flat(Infinity)）時，則會分別導(dǎo)致致命錯誤或堆棧溢出。理解這些潛在風險，并在需要時通過創(chuàng)建副本（array.slice()）來避免循環(huán)引用，是編寫健壯和高效JavaScript代碼的關(guān)鍵。在必須處理循環(huán)引用的場景下，應(yīng)采用適當?shù)臋z測機制來防止無限遞歸。

以上就是探討JavaScript中的循環(huán)引用數(shù)組及其潛在風險與應(yīng)對的詳細內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！