前言

事情是這樣的，前幾個月我寫了一篇文章每日前端手寫題--day4，在其中討論了如何在js中對數(shù)組進行扁平化處理。然后就有個大佬提供了兩種巧妙的解決方案（見方法五和方法六）。我大為震撼，因此將目前我推薦的數(shù)組扁平化方法整理出來，供各位大佬參考。

在JavaScript的日常使用中，處理多層嵌套數(shù)組是一項常見任務。閱讀下文，探究幾種將多維數(shù)組轉(zhuǎn)換為一維數(shù)組的方法，每種方法都有其獨特之處。

方法一：forEach 和 push

數(shù)組扁平化的根本思路是將多維數(shù)組展開為一維數(shù)組。第一種方法采用經(jīng)典的遞歸思想：遍歷數(shù)組中的每個元素，判斷是否為數(shù)組。如果不是數(shù)組，則將元素push到結(jié)果數(shù)組中; 如果是數(shù)組，則對該數(shù)組元素進行遞歸處理。代碼示例如下：

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方法，旨在簡化扁平化操作。對于該方法，理解其工作原理意義重大。它默認只會拆解一層嵌套數(shù)組。通過循環(huán)調(diào)用直到無法展開為止，我們可以得到完全扁平化的數(shù)組。

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。首先找到數(shù)組中第一個還未展開的數(shù)組元素，然后使用splice將其展開。這種方法會更改原數(shù)組。

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

使用棧的數(shù)據(jù)結(jié)構(gòu)可以仿佛過程中的遍歷。具體操作是：將源數(shù)組整體入棧，然后逐一出棧，檢查是否為數(shù)組。若是數(shù)組則展開后繼續(xù)入棧; 若不是則入另一個棧存儲結(jié)果。這種方法本質(zhì)上與遞歸相同，但使用?？梢越档筒僮鲝碗s度。

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

這種思路利用了數(shù)組的toString方法，該方法會將數(shù)組轉(zhuǎn)換為由逗號分隔的字符串，然后使用split方法得到結(jié)果數(shù)組。

const arr = [1, [2, 3], 4, [[5]]];
const rst = arr.toString().split(',').map(item => +item);

toString()方法的一個有趣特性是，它可以將多層嵌套的數(shù)組轉(zhuǎn)換成一個由逗號分隔的扁平化字符串。在字符串形態(tài)下，數(shù)組中各元素之間的嵌套結(jié)構(gòu)信息丟失，僅保留了元素值。例如，一個像[1, [2, [3, [4]]]]的數(shù)組，通過toString()方法處理后，就會變成"1,2,3,4"。這正是我們期望的一維形態(tài)，只不過是以字符串的形式存在。

但這還不是完整的解決辦法。字符串雖然扁平化了，但數(shù)組還未形成。這時split(',')方法派上了用場。它根據(jù)逗號分隔符將字符串再次轉(zhuǎn)換為數(shù)組，由于原始的嵌套結(jié)構(gòu)已經(jīng)被toString()方法抹除，結(jié)果數(shù)組就是一個完全扁平的數(shù)組。最后，為了確保數(shù)組中的元素類型正確（因為split()會將每個元素當作字符串），可以使用map()方法將每個字符串元素轉(zhuǎn)換成其原始類型。

const arr = [1, [2, 3], 4, [[5]]];
const rst = arr.toString().split(',').map(item => +item);

在上面的代碼中，+item是一個快速的技巧，用于將字符串轉(zhuǎn)換為數(shù)字。

方法六: JSON.stringify

JSON.stringify和JSON.parse是一對強大的方法，可以用來序列化和解析數(shù)據(jù)。在JavaScript中，這對方法經(jīng)常被用來進行深拷貝操作，但它們同樣可以用來進行數(shù)組的扁平化。

其核心思想是：首先使用JSON.stringify將多維數(shù)組轉(zhuǎn)換為字符串形式，同時保持了數(shù)組元素之間的逗號分隔。這時，嵌套數(shù)組被轉(zhuǎn)換成了括號和逗號的組合。接下來，通過正則表達式.replace(/$|$/g, "")移除字符串中所有的中括號[]，剩下的就只有逗號以及數(shù)字。最后，通過JSON.parse將處理后的字符串重新構(gòu)造成JavaScript數(shù)組。

const arr = [1, [2, 3], 4, [[5]]];
const res = JSON.stringify(arr).replace(/$|$/g, "");
const _a = JSON.parse("[" + res + "]");

這種方法的妙處在于使用了JSON對象的序列化和解析能力，從而簡化了扁平化操作。需要注意的是，由于JSON.stringify會將數(shù)組中的所有內(nèi)容（包括數(shù)字、字符串、布爾值及null）序列化為字符串，所以在使用這種方法時，應保證數(shù)組內(nèi)部不含有除上述類型之外的元素（比如函數(shù)或循環(huán)引用），因為這些無法通過JSON.stringify正確序列化。

在掌握了這些方法后，便可以根據(jù)具體情況選擇合適的扁平化方法。每種方法都有其適用場景和性能考量。掌握這些技巧，你就可以更加自如地處理JavaScript中的數(shù)組扁平化問題。

到此這篇關于javascript實現(xiàn)數(shù)組扁平化六種技巧總結(jié)的文章就介紹到這了,更多相關javascript數(shù)組扁平化內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論