傳統(tǒng)的 for 循環(huán)往往在處理多層數(shù)組時，代碼變得冗長且難以維護。隨著函數(shù)式編程思想的普及，JavaScript 提供了一系列強大而優(yōu)雅的數(shù)組方法，可以讓我們徹底告別嵌套循環(huán)的混亂，使代碼更加簡潔、可讀且易于維護。

一、嵌套循環(huán)的痛點

先看一個典型的嵌套 for 循環(huán)示例，假設我們需要從二維數(shù)組中篩選出所有偶數(shù)并將它們翻倍：

const matrix = [[1, 2, 3], [4, 5, 6], [7, 8, 9]];
const result = [];

for (let i = 0; i < matrix.length; i++) {
for (let j = 0; j < matrix[i].length; j++) {
if (matrix[i][j] % 2 === 0) {
      result.push(matrix[i][j] * 2);
    }
  }
}

console.log(result); // [4, 8, 12, 16]

這段代碼存在幾個問題：

• 代碼冗長，可讀性較差
• 使用中間變量存儲狀態(tài)
• 循環(huán)嵌套越多，代碼復雜度指數(shù)增長
• 調試困難，容易出錯

二、函數(shù)式方法的優(yōu)雅替代

1. 扁平化嵌套數(shù)組：flat()

flat()方法可以將嵌套數(shù)組扁平化，這樣我們就可以對扁平化后的數(shù)組進行操作：

2. 映射與過濾：map()和filter()

結合map()和filter()方法，可以輕松實現(xiàn)篩選和轉換：

3. 一步到位：flatMap()

對于先扁平化再映射的常見操作，flatMap()提供了更高效的解決方案：

4. 深層嵌套數(shù)組處理

對于更深層次的嵌套，可以指定flat()的深度參數(shù)，或使用Infinity完全展開：

5. 遞歸與reduce()的強大組合

對于更復雜的嵌套結構處理，可以結合reduce()和遞歸實現(xiàn)靈活的解決方案：

functionprocessNestedArrays(arr, processFn) {
return arr.reduce((result, item) => {
if (Array.isArray(item)) {
return [...result, ...processNestedArrays(item, processFn)];
    }

const processed = processFn(item);
return processed ? [...result, processed] : result;
  }, []);
}

const nestedNumbers = [1, [2, 3], [4, [5, 6, [7, 8]]]];
const doubledEvens = processNestedArrays(
  nestedNumbers,
num => num % 2 === 0 ? num * 2 : null
);

console.log(doubledEvens); // [4, 8, 12, 16]

盡管函數(shù)式方法在可讀性和維護性上有明顯優(yōu)勢，但在極端性能要求的場景下，傳統(tǒng)循環(huán)可能略微高效。然而，現(xiàn)代 JavaScript 引擎對這些高階函數(shù)的優(yōu)化已經相當出色，對于大多數(shù)應用場景，性能差異微乎其微，而代碼質量的提升則是顯著的。