理解循環(huán)引用數(shù)組

在JavaScript中，當(dāng)一個數(shù)組包含自身作為其元素時，就形成了循環(huán)引用（Cyclical Reference）。這種結(jié)構(gòu)可能在某些特定場景下被有意或無意地創(chuàng)建。一個常見的誤解是，一旦創(chuàng)建了循環(huán)引用數(shù)組，任何對其的迭代都會立即導(dǎo)致無限循環(huán)。然而，這并非總是如此。

考慮以下示例，我們創(chuàng)建了一個循環(huán)引用數(shù)組，并使用一個標(biāo)準(zhǔn)的for循環(huán)進(jìn)行迭代：

const array = [1, 2, 3];
array.push(array); // 創(chuàng)建一個循環(huán)引用，array 現(xiàn)在是 [1, 2, 3, [Circular]]

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

在這個例子中，array的最后一個元素是它自身。當(dāng)執(zhí)行for循環(huán)時，循環(huán)會按照array在循環(huán)開始時的length（即4）進(jìn)行迭代。由于循環(huán)內(nèi)部沒有改變array的長度，循環(huán)會正常結(jié)束，并不會出現(xiàn)無限循環(huán)。這里的關(guān)鍵在于，for循環(huán)的終止條件i < array.length是在每次迭代時評估的，但array.length在循環(huán)體內(nèi)部并未被改變，因此循環(huán)能夠正常終止。

循環(huán)引用數(shù)組的真正陷阱

盡管簡單的迭代不會造成無限循環(huán)，但在特定操作下，循環(huán)引用數(shù)組確實會引發(fā)嚴(yán)重問題。主要陷阱在于：

立即學(xué)習(xí)“Java免費學(xué)習(xí)筆記（深入）”；

陷阱一：循環(huán)中動態(tài)修改數(shù)組長度

如果在迭代過程中不斷向數(shù)組添加自身，那么數(shù)組的長度會持續(xù)增長，最終可能導(dǎo)致系統(tǒng)資源耗盡。

const array = [1, 2, 3];

// 在循環(huán)中不斷添加自身，導(dǎo)致數(shù)組長度無限增長
for (let i = 0; i < array.length; i++) {
  array.push(array);
  console.log(`Current array length: ${array.length}`); // 觀察長度持續(xù)增長
}

執(zhí)行上述代碼，在Node.js等JavaScript運行時環(huán)境中，會遇到類似以下的致命錯誤：

# Fatal error in , line 0
# Fatal JavaScript invalid size error 184071938
# ... (其他棧追蹤信息，表示內(nèi)存分配失敗)

這并非一個邏輯上的無限循環(huán)，而是由于數(shù)組長度的無限增長導(dǎo)致內(nèi)存耗盡或達(dá)到JavaScript引擎的內(nèi)部限制而崩潰。引擎試圖為不斷增長的數(shù)組分配更多空間，最終導(dǎo)致失敗。

陷阱二：遞歸遍歷與棧溢出

循環(huán)引用數(shù)組最常見且最危險的場景是與遞歸算法結(jié)合使用，例如深度遍歷或展平（flatten）操作。當(dāng)一個遞歸函數(shù)嘗試遍歷一個包含自身引用的數(shù)組時，它會陷入無限遞歸，最終導(dǎo)致調(diào)用棧溢出。

騰訊智影-AI數(shù)字人

基于AI數(shù)字人能力，實現(xiàn)7*24小時AI數(shù)字人直播帶貨，低成本實現(xiàn)直播業(yè)務(wù)快速增增，全天智能在線直播

73

查看詳情

考慮使用Array.prototype.flat()方法展平一個循環(huán)引用數(shù)組：

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

// 嘗試使用 flat 方法展平數(shù)組，深度設(shè)置為 Infinity
// 這將導(dǎo)致無限遞歸并最終棧溢出
try {
  array.flat(Infinity);
} catch (e) {
  console.error("Error flattening array:", e.message);
  // 預(yù)期輸出: Error flattening array: Maximum call stack size exceeded
}

在這種情況下，flat(Infinity)會嘗試無限深度地展平數(shù)組。當(dāng)它遇到array自身作為元素時，會再次嘗試展平該元素，從而形成一個永無止境的遞歸調(diào)用鏈，直至調(diào)用棧溢出（Maximum call stack size exceeded）。任何自定義的遞歸展平或深度遍歷算法，如果未處理循環(huán)引用，都將面臨同樣的問題。

安全實踐與注意事項

雖然循環(huán)引用數(shù)組存在潛在風(fēng)險，但它們并非完全不可用。在某些高級數(shù)據(jù)結(jié)構(gòu)或特定算法中，循環(huán)引用可能是有意為之的設(shè)計。關(guān)鍵在于：

1. 理解其行為： 明確循環(huán)引用數(shù)組在不同操作下的表現(xiàn)。
2. 避免未經(jīng)檢查的遞歸遍歷： 如果要對可能包含循環(huán)引用的數(shù)組執(zhí)行深度遍歷或展平操作，必須確保算法能夠檢測并處理循環(huán)引用，例如通過維護一個已訪問元素的集合來避免重復(fù)訪問，從而跳過已訪問的循環(huán)引用。
3. 使用副本而非直接引用： 如果你的目的是將數(shù)組的內(nèi)容（包括可能嵌套的子數(shù)組）放入另一個數(shù)組中，而不是創(chuàng)建循環(huán)引用，那么使用數(shù)組的副本是更安全的選擇。

例如，如果你想將數(shù)組自身的一個獨立副本作為元素添加，而不是引用自身，可以使用slice()方法：

const array = [1, 2, 3];
array.push(array.slice()); // 添加數(shù)組的一個副本，而非循環(huán)引用

console.log("Original array with a copy:", array);
// 輸出: Original array with a copy: [1, 2, 3, [1, 2, 3]]

console.log("Flattened array:", array.flat(Infinity));
// 輸出: Flattened array: [1, 2, 3, 1, 2, 3] (正常展平，不再有循環(huán)引用問題)

通過array.slice()，我們創(chuàng)建了一個array的淺拷貝并將其添加到自身。此時，array的最后一個元素是原始數(shù)組的一個獨立副本，而不是原始數(shù)組本身，因此不再構(gòu)成循環(huán)引用，可以安全地進(jìn)行遞歸操作。

總結(jié)

JavaScript中的循環(huán)引用數(shù)組是一個需要謹(jǐn)慎處理的特性。簡單的for循環(huán)迭代通常是安全的，但當(dāng)涉及到在循環(huán)中動態(tài)改變數(shù)組長度或進(jìn)行遞歸遍歷（如flat(Infinity)）時，則會引發(fā)嚴(yán)重的錯誤，包括資源耗盡和棧溢出。理解這些陷阱并采取預(yù)防措施，例如避免未經(jīng)檢查的遞歸操作或使用數(shù)組副本，是確保代碼健壯性和穩(wěn)定性的關(guān)鍵。在確實需要循環(huán)引用的場景下，務(wù)必仔細(xì)設(shè)計和測試，確保所有操作都能正確處理這種特殊的數(shù)據(jù)結(jié)構(gòu)。

以上就是JavaScript循環(huán)引用數(shù)組：概念、陷阱與安全實踐的詳細(xì)內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！