5種方式實現數組扁平化

數組扁平化概念

數組扁平化是指將一個多維數組變爲一維數組

[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種方法，可是核心也只有一個：

遍歷數組arr，若arr[i]爲數組則遞歸遍歷，直至arr[i]不爲數組而後與以前的結果concat。