【前端】面試八股文——數(shù)組扁平化的實(shí)現(xiàn)

數(shù)組扁平化是指將一個(gè)多維數(shù)組轉(zhuǎn)換為一維數(shù)組。在前端開發(fā)中，處理這樣的數(shù)組結(jié)構(gòu)是很常見的需求。本文將詳細(xì)介紹幾種實(shí)現(xiàn)數(shù)組扁平化的方法，以幫助讀者更好地理解和應(yīng)用這些技術(shù)。

1. 使用 Array.prototype.flat()

這是 ES6 中新增的一個(gè)方法， flat() 可以按指定深度遞歸地扁平化數(shù)組。參數(shù) depth 是扁平化的層級深度，默認(rèn)值為 1。當(dāng)需要扁平化所有層級時(shí)，可以傳入 Infinity。

const arr = [1, [2, [3, [4]], 5]];
const flatArr = arr.flat(Infinity); // Infinity 確保扁平到最深一級
console.log(flatArr); // [1, 2, 3, 4, 5]

優(yōu)點(diǎn)：

• 語法簡潔，易于理解和使用。
• 原生方法性能較好。

缺點(diǎn)：

• 僅適用于支持 ES6 的環(huán)境。

2. 使用遞歸

遞歸是一種經(jīng)典的算法思想，可以通過遞歸調(diào)用函數(shù)來手動(dòng)實(shí)現(xiàn)數(shù)組的扁平化。

function flatten(arr) {let result = [];arr.forEach((item) => {if (Array.isArray(item)) {result = result.concat(flatten(item));} else {result.push(item);}});return result;
}const arr = [1, [2, [3, [4]], 5]];
const flatArr = flatten(arr);
console.log(flatArr); // [1, 2, 3, 4, 5]

優(yōu)點(diǎn)：

• 理解遞歸函數(shù)后，代碼邏輯清晰。

缺點(diǎn)：

• 對于非常深的嵌套數(shù)組，可能會(huì)導(dǎo)致棧溢出。

3. 使用棧

可以利用棧結(jié)構(gòu)來實(shí)現(xiàn)非遞歸的數(shù)組扁平化，從而避免遞歸的缺點(diǎn)。

function flatten(arr) {let result = [];let stack = [...arr];while (stack.length) {let next = stack.pop();if (Array.isArray(next)) {stack.push(...next);} else {result.unshift(next); // 使用 unshift 維持順序}}return result;
}const arr = [1, [2, [3, [4]], 5]];
const flatArr = flatten(arr);
console.log(flatArr); // [1, 2, 3, 4, 5]

優(yōu)點(diǎn)：

• 避免遞歸的棧溢出問題。

缺點(diǎn)：

• 可能在用于特別深的數(shù)組時(shí)，性能不如遞歸。

4. 使用 reduce

Array.prototype.reduce() 方法可以逐個(gè)元素地處理數(shù)組，簡化數(shù)組的扁平化過程。

function flatten(arr) {return arr.reduce((acc, val) => Array.isArray(val) ? acc.concat(flatten(val)) : acc.concat(val), []);
}const arr = [1, [2, [3, [4]], 5]];
const flatArr = flatten(arr);
console.log(flatArr); // [1, 2, 3, 4, 5]

優(yōu)點(diǎn)：

• 代碼簡潔，支持遞歸扁平化。

缺點(diǎn)：

• 仍然存在遞歸調(diào)用的問題，可能在深度很深時(shí)導(dǎo)致棧溢出。

5. 使用生成器 (Generators)

生成器是 ES6 中引入的一種新特性，可以用于實(shí)現(xiàn)懶加載（即在需要時(shí)才生成元素），生成器函數(shù)能使數(shù)組扁平化邏輯更加直觀。

function* flattenGen(arr) {for (let item of arr) {if (Array.isArray(item)) {yield* flattenGen(item);} else {yield item;}}
}const arr = [1, [2, [3, [4]], 5]];
const flatArr = [...flattenGen(arr)];
console.log(flatArr); // [1, 2, 3, 4, 5]

優(yōu)點(diǎn)：

• 使用生成器的懶加載特性，處理大數(shù)組時(shí)效率更高。

缺點(diǎn)：

• 生成器的語法和概念可能對初學(xué)者不太友好。
• 并不是所有環(huán)境都支持生成器。

小結(jié)

以上五種方法各有優(yōu)劣，具體選擇哪種方法要依據(jù)開發(fā)需求、瀏覽器兼容性以及性能等因素來決定：

• Array.prototype.flat()：適用于現(xiàn)代瀏覽器，語法簡潔。
• 遞歸：邏輯清晰，但要注意棧溢出的問題。
• 棧：避免遞歸，適用于特別深的數(shù)組，但可能性能較差。
• reduce：簡潔優(yōu)雅，但亦存在遞歸問題。
• 生成器：適用于大數(shù)據(jù)處理，但相對復(fù)雜。

根據(jù)項(xiàng)目的實(shí)際需求，選擇最合適的方法來實(shí)現(xiàn)數(shù)組的扁平化，可以有效提升代碼效率和可維護(hù)性。