快捷導(dǎo)航

5種 JavaScript 方式實(shí)現(xiàn)數(shù)組扁平化

更新時(shí)間：2021年09月30日 16:56:00 作者：張雨凡

這篇文章主要介紹5種 JavaScript 方式實(shí)現(xiàn)數(shù)組扁平化，雖說只有5種方法，但是核心只有一個(gè)就是遍歷數(shù)組arr，若arr[i]為數(shù)組則遞歸遍歷，直至arr[i]不為數(shù)組然后與之前的結(jié)果concat。想具體了解的小伙伴那請(qǐng)看下面文章內(nèi)容吧

一、數(shù)組扁平化概念

數(shù)組扁平化是指將一個(gè)多維數(shù)組變?yōu)橐痪S數(shù)組

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

二、實(shí)現(xiàn)

1. reduce

遍歷數(shù)組每一項(xiàng)，若值為數(shù)組則遞歸遍歷，否則concat。

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

reduce是數(shù)組的一種方法，它接收一個(gè)函數(shù)作為累加器，數(shù)組中的每個(gè)值（從左到右）開始縮減，最終計(jì)算為一個(gè)值。
reduce包含兩個(gè)參數(shù)：回調(diào)函數(shù)，傳給total的初始值

// 求數(shù)組的各項(xiàng)值相加的和： 
arr.reduce((total, item)=> {  // total為之前的計(jì)算結(jié)果，item為數(shù)組的各項(xiàng)值
    return total + item;
}, 0);

2. toString & split

調(diào)用數(shù)組的toString方法，將數(shù)組變?yōu)樽址缓笤儆胹plit分割還原為數(shù)組

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

因?yàn)閟plit分割后形成的數(shù)組的每一項(xiàng)值為字符串，所以需要用一個(gè)map方法遍歷數(shù)組將其每一項(xiàng)轉(zhuǎn)換為數(shù)值型

3. join & split

和上面的toString一樣，join也可以將數(shù)組轉(zhuǎn)換為字符串

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

4. 遞歸

遞歸的遍歷每一項(xiàng)，若為數(shù)組則繼續(xù)遍歷，否則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. 擴(kuò)展運(yùn)算符

es6的擴(kuò)展運(yùn)算符能將二維數(shù)組變?yōu)橐痪S

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

根據(jù)這個(gè)結(jié)果我們可以做一個(gè)遍歷，若arr中含有數(shù)組則使用一次擴(kuò)展運(yùn)算符，直至沒有為止。

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

總結(jié)：

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

您可能感興趣的文章: