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

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

先看一個(gè)典型的嵌套 for 循環(huán)示例，假設(shè)我們需要從二維數(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]

這段代碼存在幾個(gè)問(wèn)題：

• 代碼冗長(zhǎng)，可讀性較差
• 使用中間變量存儲(chǔ)狀態(tài)
• 循環(huán)嵌套越多，代碼復(fù)雜度指數(shù)增長(zhǎng)
• 調(diào)試?yán)щy，容易出錯(cuò)

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

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

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

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

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

3. 一步到位：flatMap()

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

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

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

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

對(duì)于更復(fù)雜的嵌套結(jié)構(gòu)處理，可以結(jié)合reduce()和遞歸實(shí)現(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ù)式方法在可讀性和維護(hù)性上有明顯優(yōu)勢(shì)，但在極端性能要求的場(chǎng)景下，傳統(tǒng)循環(huán)可能略微高效。然而，現(xiàn)代 JavaScript 引擎對(duì)這些高階函數(shù)的優(yōu)化已經(jīng)相當(dāng)出色，對(duì)于大多數(shù)應(yīng)用場(chǎng)景，性能差異微乎其微，而代碼質(zhì)量的提升則是顯著的。