5種 JavaScript 方式實現陣列扁平化

2021-09-30 22:00:24

一、陣列扁平化概念

陣列扁平化是指將一個多維陣列變為一維陣列

[1, [2, 3, [4, 5]]]  ------>    [1, 2, 3, 4, 5]

二、實現

1. reduce

遍歷陣列每一項，若值為陣列則遞迴遍歷，否則concat。

function flatten(arr) {  
    return arr.reduce((result, item)=> {
        return result.concat(Array.isArray(item) ? flatten(item) : item);
    }, []);
}

reduce是陣列的一種方法，它接收一個函數作為累加器，陣列中的每個值（從左到右）開始縮減，最終計算為一個值。
reduce包含兩個引數：回撥函數，傳給total的初始值

// 求陣列的各項值相加的和： 
arr.reduce((total, item)=> {  // total為之前的計算結果，item為陣列的各項值
    return total + item;
}, 0);

2. toString & split

呼叫陣列的toString方法，將陣列變為字串然後再用split分割還原為陣列

function flatten(arr) {
    return arr.toString().split(',').map(function(item) {
        return Number(item);
    })
}

因為split分割後形成的陣列的每一項值為字串，所以需要用一個map方法遍歷陣列將其每一項轉換為數值型

3. join & split

和上面的toString一樣，join也可以將陣列轉換為字串

function flatten(arr) {
    return arr.join(',').split(',').map(function(item) {
        return parseInt(item);
    })
}

4. 遞迴

遞迴的遍歷每一項，若為陣列則繼續遍歷，否則concat

function flatten(arr) {
    var res = [];
    arr.map(item => {
        if(Array.isArray(item)) {
            res = res.concat(flatten(item));
        } else {
            res.push(item);
        }
    });
    return res;
}

5. 擴充套件運運算元

es6的擴充套件運運算元能將二維陣列變為一維

[].concat(...[1, 2, 3, [4, 5]]);  // [1, 2, 3, 4, 5]

根據這個結果我們可以做一個遍歷，若arr中含有陣列則使用一次擴充套件運運算元，直至沒有為止。

function flatten(arr) {
    while(arr.some(item=>Array.isArray(item))) {
        arr = [].concat(...arr);
    }
    return arr;
}

總結：

到此這篇關於5種 JavaScript 方式實現陣列扁平化的文章就介紹到這了,更多相關JavaScript 實現陣列扁平化內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！