數組扁平化

通俗的來講就是將一個N維的數組轉化成一維的數組，為什么要將數組扁平化，因為當數組嵌套層次較深時，處理起來會比較復雜，例如遍歷、搜索、過濾或排序等，扁平化數組可以使這些操作更加簡單和直觀。在前端開發中，經常需要處理嵌套的數組結構，將多維數組扁平化可以更方便地進行遍歷、渲染或與其他組件進行交互。

數組扁平化方法

第一種 arr.flat() 方法

這個方法是官方封裝的方法，直接調用即可，參數是扁平化的次數，一般我們直接填 Infinity 無窮大

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

const newArr = arr.flat(Infinity);

console.log(newArr);

第二種 遞歸

我們通過遍歷這個數組，如果遍歷到的還是數組就繼續調用此方法flatten，也就是遞歸調用，如果不是就將值push到新數組中，由于每次遞歸調用push的數組都不一樣，所以我們需要返回這個數組并通過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方法 （全數字才能用）

我們知道，數組調用ToString方法會將數組的內容轉換為字符串并通過逗號拼接，我們只需要處理這個字符串就行，將這個字符串通過逗號分割，并且使用map遍歷這個字符數組，將每次分割得到的字符數字轉換成數值類型返回到一個新數組中即可。

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

let str = arr.toString();

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

    return Number(item);

})

console.log(newArr);

第四種 reduce方法

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

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

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

    console.log(pre,item,index);

    return pre + item; //返回這個值到pre身上, return 出去就能實現一個累加的效果

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

console.log(res);//16

知道這些之后，我們可以通過這個方法來扁平化一個數組，我們調用數組身上的reduce方法，遍歷需要扁平化的數組，判斷此時遍歷的是不是數組，如果是就遞歸調用 flatten ，如果不是就將值拼接到新數組中，是不是感覺和第二種遞歸調用一樣，這是第二種遞歸調用的另一種實現方法。區別就是第二種我們是通過 new 一個空數組來存放值，通過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);

第五種 解構

我們簡單介紹一下some方法，該方法用于檢測數組中的元素是否滿足指定條件（函數提供）。它會依次執行數組的每個元素，如果有一個元素滿足條件，則表達式返回true , 剩余的元素不會再執行檢測。 如果沒有滿足條件的元素，則返回false。

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

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

    return item >5;

})

console.log(res);//true

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

let arr = [1,2,3]

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

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

javascript復制代碼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

來源：稀土掘金

著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。