一个系列带你搞定前端面试的手写代码环节(6) --- 数组扁平化

这期的内容是数组扁平化，这也是很考察基本功的一道题，解决的办法也比较多。

在这里插入图片描述

什么是数组扁平化

常规的解释就是把一个多维数组转成一维数组，比如形如[1, [2, [3, [4, [5]]]]]的数组转为[1,2,3,4,5]。

javascript">// 来个示例数组
let arr = [1, [2, [3, [4, [5]]]]];

flat()方法 + Infinity

JS是有提供原生处理数组扁平化的方法的，就是flat()方法，但是flat()默认是拉平一层的嵌套数组，传入数字几就拉平几层。但是在很多情况下，我们并不能直接知道要拉平的数组长度，所以我们可以传一个Infinity进去，Infinity代表无穷大，所以无论你数组长度是多少，都可以给你拉平。

javascript">let brr1 = arr.flat(Infinity);
console.log(brr1);

JSON对象

JSON.stringify可以把数组或对象转为字符串，JSON,parse可以把字符串转为对应的数组和对象，我们可以先将数组转为字符串，然后通过replace方法把多余的]或[去掉，就可以实现数组的扁平化。

javascript">let brr2 = JSON.parse("[" + JSON.stringify(arr).replace(/\[|\]/g, "") + "]");
console.log(brr2);

递归

最常规最原始的办法就是通过递归来完成，在每一次递归的过程中，如果碰到当前的项不是数组的值，就push到一个新数组里面，如果是数组，就遍历这个数组。

javascript">let brr3 = arr => {
    /**
     * 用递归, 用for循环加递归也可以, 这里用reduce
     * reduce 累加器, 本质上也是循环
     * cur 是循环的当前一个值, 相当于for循环里的arr[i], pre是前一个值, 
     * 相当于for循环里的 arr[i - 1]
     */
    let crr = arr.reduce((pre, cur) => {
        return pre.concat(Array.isArray(cur) ? brr3(cur) : cur);
    }, [])
    return crr;
}
console.log(brr3(arr));  // [1, 2, 3, 4, 5]