前言

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

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

方法一：forEach 和 push

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

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

近年來(lái)，ES6新增了Array.prototype.flat方法，旨在簡(jiǎn)化扁平化操作。對(duì)于該方法，理解其工作原理意義重大。它默認(rèn)只會(huì)拆解一層嵌套數(shù)組。通過循環(huán)調(diào)用直到無(wú)法展開為止，我們可以得到完全扁平化的數(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ù)組中第一個(gè)還未展開的數(shù)組元素，然后使用splice將其展開。這種方法會(huì)更改原數(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ù)入棧; 若不是則入另一個(gè)棧存儲(chǔ)結(jié)果。這種方法本質(zhì)上與遞歸相同，但使用?？梢越档筒僮鲝?fù)雜度。

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方法，該方法會(huì)將數(shù)組轉(zhuǎn)換為由逗號(hào)分隔的字符串，然后使用split方法得到結(jié)果數(shù)組。

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

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

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

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

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

方法六: JSON.stringify

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

其核心思想是：首先使用JSON.stringify將多維數(shù)組轉(zhuǎn)換為字符串形式，同時(shí)保持了數(shù)組元素之間的逗號(hào)分隔。這時(shí)，嵌套數(shù)組被轉(zhuǎn)換成了括號(hào)和逗號(hào)的組合。接下來(lái)，通過正則表達(dá)式.replace(/$|$/g, "")移除字符串中所有的中括號(hào)[]，剩下的就只有逗號(hào)以及數(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對(duì)象的序列化和解析能力，從而簡(jiǎn)化了扁平化操作。需要注意的是，由于JSON.stringify會(huì)將數(shù)組中的所有內(nèi)容（包括數(shù)字、字符串、布爾值及null）序列化為字符串，所以在使用這種方法時(shí)，應(yīng)保證數(shù)組內(nèi)部不含有除上述類型之外的元素（比如函數(shù)或循環(huán)引用），因?yàn)檫@些無(wú)法通過JSON.stringify正確序列化。

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

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

最新評(píng)論