正文
在JAVAScript的日常使用中，處理多層嵌套數組是一項常見任務。閱讀下文，探究幾種將多維數組轉換為一維數組的方法，每種方法都有其獨特之處。
方法一：forEach 和 push
數組扁平化的根本思路是將多維數組展開為一維數組。第一種方法采用經典的遞歸思想：遍歷數組中的每個元素，判斷是否為數組。如果不是數組，則將元素push到結果數組中; 如果是數組，則對該數組元素進行遞歸處理。代碼示例如下：
function _flat(targetArray, contAIner = []) {
if (!Array.isArray(targetArray)) return container;
targetArray.forEach(item => {
if (!Array.isArray(item)) {
container.push(item);
} else {
_flat(item, container);
}
});
return container;
}
const rst = _flat([[[[[[1],2],3],4],5,6],7]);
console.log('rst: ', rst);
方法二: Array.prototype.flat
近年來，ES6新增了Array.prototype.flat方法，旨在簡化扁平化操作。對于該方法，理解其工作原理意義重大。它默認只會拆解一層嵌套數組。通過循環調用直到無法展開為止，我們可以得到完全扁平化的數組。
function _flat2(targetArray) {
if (!Array.isArray(targetArray)) return [];
let _loop = targetArray;
while (true) {
const beforeFlat = _loop.length;
const _Arr = _loop.flat();
const afterFlat = _Arr.length;
if (beforeFlat === afterFlat) return _Arr;
_loop = _Arr;
}
}
const rst2 = _flat2([[[[[[1],2],3],4],5,6],7]);
console.log('rst2: ', rst2);
方法三: findIndex 和 splice
第三種方法利用了Array.prototype.findIndex以及Array.prototype.splice。首先找到數組中第一個還未展開的數組元素，然后使用splice將其展開。這種方法會更改原數組。
function _flat3(targetArray) {
if (!Array.isArray(targetArray)) return [];
while (true) {
const arrItemIndex = targetArray.findIndex(item => Array.isArray(item));
if (arrItemIndex === -1) return targetArray;
targetArray.splice(arrItemIndex, 1, ...targetArray[arrItemIndex]);
}
}
const rst3 = _flat3([[[[[[1],2],3],4],5,6],7]);
console.log('rst3: ', rst3);
方法四: stack
使用棧的數據結構可以仿佛過程中的遍歷。具體操作是：將源數組整體入棧，然后逐一出棧，檢查是否為數組。若是數組則展開后繼續入棧; 若不是則入另一個棧存儲結果。這種方法本質上與遞歸相同，但使用棧可以降低操作復雜度。
function _flat4(targetArray) {
if (!Array.isArray(targetArray)) return [];
const a = [...targetArray];
const b = [];
while (a.length) {
const _tmp = a.pop();
if (Array.isArray(_tmp)) {
a.push(..._tmp);
} else {
b.push(_tmp);
}
}
return b;
}
const rst4 = _flat4([[[[[[1],2],3],4],5,6],7]);
console.log('rst4: ', rst4);
方法五: toString 和 split
這種思路利用了數組的toString方法，該方法會將數組轉換為由逗號分隔的字符串，然后使用split方法得到結果數組。
const arr = [1, [2, 3], 4, [[5]]];
const rst = arr.toString().split(',').map(item => +item);
toString()方法的一個有趣特性是，它可以將多層嵌套的數組轉換成一個由逗號分隔的扁平化字符串。在字符串形態下，數組中各元素之間的嵌套結構信息丟失，僅保留了元素值。例如，一個像[1, [2, [3, [4]]]]的數組，通過toString()方法處理后，就會變成"1,2,3,4"。這正是我們期望的一維形態，只不過是以字符串的形式存在。
但這還不是完整的解決辦法。字符串雖然扁平化了，但數組還未形成。這時split(',')方法派上了用場。它根據逗號分隔符將字符串再次轉換為數組，由于原始的嵌套結構已經被toString()方法抹除，結果數組就是一個完全扁平的數組。最后，為了確保數組中的元素類型正確（因為split()會將每個元素當作字符串），可以使用map()方法將每個字符串元素轉換成其原始類型。
const arr = [1, [2, 3], 4, [[5]]];
const rst = arr.toString().split(',').map(item => +item);
在上面的代碼中，+item是一個快速的技巧，用于將字符串轉換為數字。
方法六: JSON.stringify
JSON.stringify和JSON.parse是一對強大的方法，可以用來序列化和解析數據。在JavaScript中，這對方法經常被用來進行深拷貝操作，但它們同樣可以用來進行數組的扁平化。
其核心思想是：首先使用JSON.stringify將多維數組轉換為字符串形式，同時保持了數組元素之間的逗號分隔。這時，嵌套數組被轉換成了括號和逗號的組合。接下來，通過正則表達式.replace(/$|$/g, "")移除字符串中所有的中括號[]，剩下的就只有逗號以及數字。最后，通過JSON.parse將處理后的字符串重新構造成JavaScript數組。
const arr = [1, [2, 3], 4, [[5]]];
const res = JSON.stringify(arr).replace(/$|$/g, "");
const _a = JSON.parse("[" + res + "]");
這種方法的妙處在于使用了JSON對象的序列化和解析能力，從而簡化了扁平化操作。需要注意的是，由于JSON.stringify會將數組中的所有內容（包括數字、字符串、布爾值及null）序列化為字符串，所以在使用這種方法時，應保證數組內部不含有除上述類型之外的元素（比如函數或循環引用），因為這些無法通過JSON.stringify正確序列化。
在掌握了這些方法后，便可以根據具體情況選擇合適的扁平化方法。每種方法都有其適用場景和性能考量。掌握這些技巧，你就可以更加自如地處理JavaScript中的數組扁平化問題。
