快捷導(dǎo)航

JS數(shù)組扁平化的方法合集(遞歸，while循環(huán)，flat)

更新時間：2024年06月25日 08:24:47 作者：星辰中的維納斯

數(shù)組扁平化也是面試常考題之一,今天就和大家簡單分享一下常見的數(shù)組扁平方法,這題其實(shí)主要考察的是遞歸思想,因?yàn)楫?dāng)數(shù)組里面嵌套非常多層數(shù)組的時候只能通過循環(huán)遞歸來進(jìn)行扁平,本次分享主要也是分享本題的遞歸思想,需要的朋友可以參考下

前言

數(shù)組扁平化也是面試?？碱}之一，今天就和大家簡單分享一下常見的數(shù)組扁平方法。這題其實(shí)主要考察的是遞歸思想，因?yàn)楫?dāng)數(shù)組里面嵌套非常多層數(shù)組的時候只能通過循環(huán)遞歸來進(jìn)行扁平。本次分享主要也是分享本題的遞歸思想。話不多說，開始分享！

flat() 方法

第一個方法那必須是js自帶的方法，flat 是 JavaScript 中 Array 對象的一個方法，它用于將多維數(shù)組扁平化，即把一個嵌套多層的數(shù)組轉(zhuǎn)換為只有一層的數(shù)組。這個方法是在 ECMAScript 2019 (ES10) 中引入的。
flat 方法可以接受一個可選的參數(shù) depth，用來指定扁平化的深度。

不傳參數(shù)或傳 1 時，默認(rèn)扁平化第一層嵌套數(shù)組。
傳入數(shù)字 n 表示將數(shù)組扁平化到第 n 層深度。
如果傳入 Infinity 作為參數(shù)，那么不管嵌套多深，都會被扁平化為一維數(shù)組。

下面是一些示例

let arr = [1,[2,[3,[4,5]]]];
// 只會扁平化一層
console.log(arr.flat(1));//[1,2,[3,[4,5]]]
// 扁平化兩層
console.log(arr.flat(2));//[1,2,3,[4,5]]
// 全部扁平化
console.log(arr.flat(Infinity));//[1,2,3,4,5]

toString()方法

一個冷知識，數(shù)組的toString方法會把元素以逗號分隔，意思是無論你嵌套多少層，toString方法都能給你變成逗號分隔，剛好滿足我們的要求扁平數(shù)組。

let arr = [1,[2,[3,[4,5]]]];
//toString方法變成字符串
console.log(arr.toString());//'1,2,3,4,5'
arr = arr.toString().split(",").map(function (item){
    return +item;
})

遞歸

這里簡單介紹一下思路，當(dāng)你遇到一個并不知到范圍的數(shù)據(jù)（不知道嵌套了多少層的數(shù)組），只能使用循環(huán)或者是遞歸來進(jìn)行所有范圍的遍歷，其中雖然遞歸相對循環(huán)性能較差因?yàn)橐粩?strong>創(chuàng)建上下文入執(zhí)行棧。但是不得不說遞歸真是太酷啦！

純手寫遞歸

let arr = [1,[2,[3,[4,5]]]];
function flatten(arr) {
    //創(chuàng)建一個數(shù)組，接受扁平化的數(shù)組
    let result = [];
    for(let i=0,len=arr.length;i<len;i++){
    // 如果子元素是數(shù)組
        if(Array.isArray(arr[i])){
        // 將 子元素扁平之后加入到結(jié)果數(shù)組里面
            result = result.concat(flatten(arr[i]));
        }else{
        // 子元素不是數(shù)組就直接添加
            result.push(arr[i]);
        }
    }
    return result;
}
console.log(flatten(arr));//[1,2,3,4,5]

reduce方法進(jìn)行遞歸（代碼較少）

這里怕有些小伙伴不知道reduce的用法這里簡單介紹一下。 reduce函數(shù)會遍歷每一個元素，每次遍歷都會執(zhí)行一個回調(diào)函數(shù)，該函數(shù)有兩個參數(shù)，一個是上一次回調(diào)函數(shù)返回的值，還有一個參數(shù)就是當(dāng)前元素的值。可以給初始值，不給的話就默認(rèn)初始值為第一個元素，然后從第二個元素開始遍歷。最后返回最后一次回調(diào)函數(shù)返回的值。下面是reduce的簡單案例

let arr = [1,2];
console.log(arr.reduce((sum,nowVal)=>sum+nowVal))//    3
console.log(arr.reduce((sum,nowVal)=>sum+nowVal,4))//  4

簡單了解reduce之后我們就來開始遞歸扁平數(shù)組

let arr = [1,[2,[3,[4,5]]]];
function flatten(arr){
    // 和普通遞歸相同，這里只不過是縮減了代碼，思想一致
    return arr.reduce((result,nowValue)=>
    Array.isArray(nowValue)?result.concat(flatten(nowValue)):result.concat(nowValue),[]);
}
console.log(flatten(arr));// [1,2,3,4,5]

while循環(huán)

雖然遞歸真的很好用，但是還是要介紹一下循環(huán)。本文運(yùn)用到了數(shù)組的結(jié)構(gòu)方法，JavaScript中的解構(gòu)是一種允許您從數(shù)組或?qū)ο笾刑崛?shù)據(jù)并將其分配給變量的表達(dá)式。這種特性是ES6（ECMAScript 2015）引入的，極大地提高了代碼的簡潔性和可讀性。這里也是簡單舉個例子：

let arr = [1,2,3,[4,5]];
let [first,...rest]=arr;//first就是1,這里的rest就會存儲剩下的元素[2,3,[4,5]]

那么接下來就是數(shù)組扁平啦！

let arr = [1,[2,[3,[4,5]]]];
function flatten(arr){
    let result = [];
    while(arr.length!=0){
        // 將arr的第一個元素取出，剩下的存入rest數(shù)組中
        let [first,...rest] = arr;
        if(Array.isArray(first)){
        //如果是數(shù)組，那么就將first進(jìn)行解構(gòu)將里面的元素逐一添加到arr中，
        //相當(dāng)于將first里面的元素降了一個層級，rest必須進(jìn)行解構(gòu)添加
        // 否則將會將rest里面的元素層級提升
        arr = [...first,...rest];
        }else{
        //如果第一個元素不是數(shù)組，就添加到結(jié)果數(shù)組中
        result.push(first);
        //這里相當(dāng)與將第一個元素剔除，下次遍歷取rest數(shù)組第一個元素
        arr =[...rest];
        }
    }
    return result;
}
console.log(flatten(arr));// [1,2,3,4,5]