[前端攻坚]：数组拍平的几种方法

theme: smartblue
highlight: foundation

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第12天，点击查看活动详情

总结一些日常需要用到的一些api，也是在一些面试中会经常出现的题目，今天分享的是数组拍平的几个不同的方法， 同时文章也被收录到我的《JS基础》专栏中，欢迎大家点击收藏加关注。

使用原生flat函数

flat()  方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回

[1,2,[3]].flat() // 
[1, 2, 3] [1,2,[3,[4]]].flat(2) // [1, 2, 3, 4]

使用原生的flat函数可以对函数进行拍平,但是需要传入需要拍平的层级，如果只传了1就只展开一层，该方法只针对固定的层级做展开，如果是展开层级不确定的情况下，该方法不适合

while循环+concat方法

concat()  方法用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组

同时concat也可以作为展开一层进行使用

let a = [].concat(...[1, 2, 3, [4, 5, [6, 7]]])
console.log(a) //[ 1, 2, 3, 4, 5, [ 6, 7 ] ]

利用这个特性可以来实现多层展开

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

while循环的退出条件是数组中的元素都不是数组，如果遇到一个数组，就让数组去掉一层，直到数组中不存在数组元素为止。

for循环递归+展开语法

虽然都是循环+concat，但是两个之间的写法不一样，写出来的思路也是不一样的，而且用到了递归的思路，遇到数组元素进行递归，递归把数组元素每一层进行解开，如果不是数组元素就进行push即可

function toarr(arr){
    let a = []
    for(let item of arr){
        if(Array.isArray(item)){
            a= a.push(...toarr(item))
        }else{
            a.push(item)
        }
    }
    return a
}

reduce方法

也是类似于循环的方法，只是reduce的循环是前后两个元素循环出一个新的元素

function toarr(arr){
    let a = arr.reduce((pre,cur)=>{
        return pre.concat(Array.isArray(cur)?toarr(cur):cur)
    },[])
    return a
}