欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript數(shù)組實現(xiàn)扁平化四種方法詳解

 更新時間：2022年10月22日 11:33:14   作者：YinJie…  
扁平化，顧名思義就是減少復(fù)雜性裝飾，使其事物本身更簡潔、簡單，突出主題。數(shù)組扁平化，對著上面意思套也知道了，就是將一個復(fù)雜的嵌套多層的數(shù)組，一層一層的轉(zhuǎn)化為層級較少或者只有一層的數(shù)組

數(shù)組的扁平化就是將一個嵌套多層的數(shù)組 array（嵌套可以是任何層數(shù)）轉(zhuǎn)換為只有一層的數(shù)組。

var arr = [1, [2, [3, 4, 5]]];
console.log(flatten(arr)); // [1, 2, 3, 4，5]

本文就是要用多種方法實現(xiàn)這個 flatten 函數(shù)

1. 常規(guī)遞歸法

var a = [1, [2, [3, 4, 5]]];
function flatten(arr) {
    let newArray = []
    for (let i of arr) {
        if (i.constructor === Array) {
            newArray = newArray.concat(flatten(i))
        } else {
            newArray.push(i)
        }
    }
    return newArray
}
console.log(flatten(a)); // [1, 2, 3, 4，5]

這段代碼核心就是循環(huán)遍歷過程中的遞歸操作，就是在遍歷過程中發(fā)現(xiàn)數(shù)組元素還是數(shù)組的時候進行遞歸操作，把數(shù)組的結(jié)果通過數(shù)組的 concat 方法拼接到最后要返回的 result 數(shù)組上，那么最后輸出的結(jié)果就是扁平化后的數(shù)組。

2. reduce方法

var a = [1, [2, [3, 4, 5]]];
function flatten(arr) {
    return arr.reduce((pre,next) => {
        return pre.concat(next instanceof Array ? flatten(next) : next)
    },[])
}
console.log(flatten(a)); //[ 1, 2, 3, 4, 5 ]

我們可以看到 reduce 的第一個參數(shù)用來返回最后累加的結(jié)果，思路和第一種遞歸方法是一樣的，但是通過使用 reduce 之后代碼變得更簡潔了，也同樣解決了扁平化的問題。

3. 擴展運算符實現(xiàn)

// 方法3
var arr = [1, [2, [3, 4]]];
function flatten(arr) {
    while (arr.some(item => Array.isArray(item))) {
        arr = [].concat(...arr);
    }
    return arr;
}
console.log(flatten(arr)); //  [1, 2, 3, 4，5]

我們先用數(shù)組的 some 方法把數(shù)組中仍然是組數(shù)的項過濾出來，然后執(zhí)行 concat 操作，利用 ES6 的展開運算符，將其拼接到原數(shù)組中，最后返回原數(shù)組，達到了預(yù)期的效果。

4. split和toString共同處理

// 方法4
var arr = [1, [2, [3, 4]]];
function flatten(arr) {
    return arr.toString().split(',');
}
console.log(flatten(arr)); //  [1, 2, 3, 4]

數(shù)組會默認帶一個 toString 的方法，可以把數(shù)組直接轉(zhuǎn)換成逗號分隔的字符串，然后再用 split 方法把字符串重新轉(zhuǎn)換為數(shù)組

到此這篇關(guān)于JavaScript數(shù)組實現(xiàn)扁平化四種方法詳解的文章就介紹到這了,更多相關(guān)JavaScript數(shù)組扁平化內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論