JS-数组扁平化方法合集（递归，while循环，flat）

前言

数组扁平化也是面试常考题之一，今天就和大家简单分享一下常见的数组扁平方法。这题其实主要考察的是递归思想，因为当数组里面嵌套非常多层数组的时候只能通过循环递归来进行扁平。本次分享主要也是分享本题的递归思想。话不多说，开始分享！

flat() 方法

第一个方法那必须是js自带的方法，flat 是 JavaScript 中 Array 对象的一个方法，它用于将多维数组扁平化，即把一个嵌套多层的数组转换为只有一层的数组。这个方法是在 ECMAScript 2019 (ES10) 中引入的。

flat 方法可以接受一个可选的参数 depth，用来指定扁平化的深度。

• 不传参数或传 1 时，默认扁平化第一层嵌套数组。
• 传入数字 n 表示将数组扁平化到第 n 层深度。
• 如果传入 Infinity 作为参数，那么不管嵌套多深，都会被扁平化为一维数组。

下面是一些示例

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()方法

一个冷知识，数组的toString方法会把元素以逗号分隔，意思是无论你嵌套多少层，toString方法都能给你变成逗号分隔，刚好满足我们的要求扁平数组。

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;
})

递归

这里简单介绍一下思路，当你遇到一个并不知到范围的数据（不知道嵌套了多少层的数组），只能使用循环或者是递归来进行所有范围的遍历，其中虽然递归相对循环性能较差因为要不断创建上下文入执行栈。但是不得不说递归真是太酷啦！

纯手写递归

let arr = [1,[2,[3,[4,5]]]];
function flatten(arr) {
    //创建一个数组，接受扁平化的数组
    let result = [];
    for(let i=0,len=arr.length;i<len;i++){
    // 如果子元素是数组
        if(Array.isArray(arr[i])){
        // 将 子元素扁平之后加入到结果数组里面
            result = result.concat(flatten(arr[i]));
        }else{
        // 子元素不是数组就直接添加
            result.push(arr[i]);
        }
    }
    return result;
}
console.log(flatten(arr));//[1,2,3,4,5]

reduce方法进行递归（代码较少）

这里怕有些小伙伴不知道reduce的用法这里简单介绍一下。
reduce函数会遍历每一个元素，每次遍历都会执行一个回调函数，该函数有两个参数，一个是上一次回调函数返回的值，还有一个参数就是当前元素的值。可以给初始值，不给的话就默认初始值为第一个元素，然后从第二个元素开始遍历。最后返回最后一次回调函数返回的值。下面是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之后我们就来开始递归扁平数组

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循环

虽然递归真的很好用，但是还是要介绍一下循环。本文运用到了数组的结构方法，JavaScript中的解构是一种允许您从数组或对象中提取数据并将其分配给变量的表达式。这种特性是ES6（ECMAScript 2015）引入的，极大地提高了代码的简洁性和可读性。
这里也是简单举个例子：

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

那么接下来就是数组扁平啦！

let arr = [1,[2,[3,[4,5]]]];
function flatten(arr){
    let result = [];
    while(arr.length!=0){
        // 将arr的第一个元素取出，剩下的存入rest数组中
        let [first,...rest] = arr;
        if(Array.isArray(first)){
        //如果是数组，那么就将first进行解构将里面的元素逐一添加到arr中，
        //相当于将first里面的元素降了一个层级，rest必须进行解构添加
        // 否则将会将rest里面的元素层级提升
        arr = [...first,...rest];
        }else{
        //如果第一个元素不是数组，就添加到结果数组中
        result.push(first);
        //这里相当与将第一个元素剔除，下次遍历取rest数组第一个元素
        arr =[...rest];
        }
    }
    return result;
}
console.log(flatten(arr));// [1,2,3,4,5]

结语

讲实话这里面除了js自带的方法flat，其他的我最喜欢的就是纯递归解决方案了。其他的都多余了（其实就是简化一些代码）好啦，本次分享就到这里了。喜欢的话就点个关注或者是赞吧。谢谢您啦- ̗̀(๑ᵔ⌔ᵔ๑)。