數(shù)組扁平化

通俗的來講就是將一個(gè)N維的數(shù)組轉(zhuǎn)化成一維的數(shù)組，為什么要將數(shù)組扁平化，因?yàn)楫?dāng)數(shù)組嵌套層次較深時(shí)，處理起來會(huì)比較復(fù)雜，例如遍歷、搜索、過濾或排序等，扁平化數(shù)組可以使這些操作更加簡(jiǎn)單和直觀。在前端開發(fā)中，經(jīng)常需要處理嵌套的數(shù)組結(jié)構(gòu)，將多維數(shù)組扁平化可以更方便地進(jìn)行遍歷、渲染或與其他組件進(jìn)行交互。

數(shù)組扁平化方法

第一種 arr.flat() 方法

這個(gè)方法是官方封裝的方法，直接調(diào)用即可，參數(shù)是扁平化的次數(shù)，一般我們直接填 Infinity 無窮大

const arr = [1, 2, 3, [4, [5]]]

const newArr = arr.flat(Infinity);

console.log(newArr);

第二種 遞歸

我們通過遍歷這個(gè)數(shù)組，如果遍歷到的還是數(shù)組就繼續(xù)調(diào)用此方法flatten，也就是遞歸調(diào)用，如果不是就將值push到新數(shù)組中，由于每次遞歸調(diào)用push的數(shù)組都不一樣，所以我們需要返回這個(gè)數(shù)組并通過concat方法拼接。

const arr = [1, 2, 3, [4, [5]]]

function flatten(arr) {

    let res = []

    for (let i = 0; i < arr.length; i++) {

        if (Array.isArray(arr[i])) {

            res = res.concat(flatten(arr[i]));

        } else {

            res.push(arr[i]);

        }

    }

    return res;

}

const newArr = flatten(arr);

console.log(newArr);

第三種 toString方法 （全數(shù)字才能用）

我們知道，數(shù)組調(diào)用ToString方法會(huì)將數(shù)組的內(nèi)容轉(zhuǎn)換為字符串并通過逗號(hào)拼接，我們只需要處理這個(gè)字符串就行，將這個(gè)字符串通過逗號(hào)分割，并且使用map遍歷這個(gè)字符數(shù)組，將每次分割得到的字符數(shù)字轉(zhuǎn)換成數(shù)值類型返回到一個(gè)新數(shù)組中即可。

const arr = [1, 2, 3, [4, [5]]]

let str = arr.toString();

let newArr = str.split(',').map((item)=>{

    return Number(item);

})

console.log(newArr);

第四種 reduce方法

先簡(jiǎn)單介紹一下reduce方法，reduce() 方法接收一個(gè)函數(shù)作為累加器，數(shù)組中的每個(gè)值（從左到右）開始縮減，最終計(jì)算為一個(gè)值。

let arr = [1,2,3,4,5]

let res = arr.reduce(function(pre,item,index,arr){//pre 累加值，item 當(dāng)前遍歷到的元素，index 下標(biāo)

    console.log(pre,item,index);

    return pre + item; //返回這個(gè)值到pre身上, return 出去就能實(shí)現(xiàn)一個(gè)累加的效果

},1)//1 表示一開始 pre 的值

console.log(res);//16

知道這些之后，我們可以通過這個(gè)方法來扁平化一個(gè)數(shù)組，我們調(diào)用數(shù)組身上的reduce方法，遍歷需要扁平化的數(shù)組，判斷此時(shí)遍歷的是不是數(shù)組，如果是就遞歸調(diào)用 flatten ，如果不是就將值拼接到新數(shù)組中，是不是感覺和第二種遞歸調(diào)用一樣，這是第二種遞歸調(diào)用的另一種實(shí)現(xiàn)方法。區(qū)別就是第二種我們是通過 new 一個(gè)空數(shù)組來存放值，通過push將值存放，通過concat將上一次的值和這次拼接，并且返回出去，reduce 直接 return 到 pre 身上并通過concat拼接上一次的pre，然后再返回出去。

const arr = [1, 2, 3, [4, [5]]]

function flatten(arr){

    return arr.reduce((pre,item)=>{

        return pre.concat(Array.isArray(item)? flatten(item):item);

    },[])

}

const newArr = flatten(arr);

console.log(newArr);

第五種 解構(gòu)

我們簡(jiǎn)單介紹一下some方法，該方法用于檢測(cè)數(shù)組中的元素是否滿足指定條件（函數(shù)提供）。它會(huì)依次執(zhí)行數(shù)組的每個(gè)元素，如果有一個(gè)元素滿足條件，則表達(dá)式返回true , 剩余的元素不會(huì)再執(zhí)行檢測(cè)。 如果沒有滿足條件的元素，則返回false。

let arr = [1,2,3,4,5,6]

let res = arr.some((item)=>{

    return item >5;

})

console.log(res);//true

通過解構(gòu)的語法特性我們知道，... arr 得到的是里面的元素的值

let arr = [1,2,3]

console.log(...arr);//1 2 3

也就意味著我們通過解構(gòu)這個(gè)方法可以去除掉一層數(shù)組外殼，那么我只要判斷這個(gè)數(shù)字里面存不存在數(shù)組，如果存在，我就使用一次解構(gòu)語法，我們需要用一個(gè)空數(shù)組來存放每次解構(gòu)得到的值。

javascript復(fù)制代碼function flatten(arr) {

    while (arr.some(item => Array.isArray(item))) {

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

    }

    return arr

  }

const newArr = flatten(arr);

console.log(newArr);

作者：蘑菇頭愛平底鍋

鏈接：https://juejin.cn/post/7372572344248631323

來源：稀土掘金

著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。