大厂面试题：手写数组的Flat方法

前一阵面试大厂的前端岗，让手撸数组的 Flat方法,很遗憾当时太菜没有什么思路，面试后仔细分析了一下，发现这道算法题彻底没有想象中的那么难，的确是一套纯基础题，使用数组的reduce结合递归能够很轻松的实现，这里简单介绍下实现思路，以飨读者！

前置知识

数组的flat方法：

Flat()俗称把数组拍平的方法。
使用flat方法时能够传递一个数字，表明拍平嵌套数组的层数，不传值的话则为默认值1。若是咱们传递的参数为Infinity，则会将全部嵌套数组拍平。若是数组中有空元素，则拍平后的数组也不包含空元素

let arr1 = [1, 2, [3, 4]];
arr1.flat();
// [1, 2, 3, 4]

let arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat();
// [1, 2, 3, 4, [5, 6]]

let arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2);
// [1, 2, 3, 4, 5, 6]


//使用 Infinity，可展开任意深度的嵌套数组
let arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
arr4.flat(Infinity);
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

//flat会移除数组中的空项
let arr5 =[1,2,3,,5,[6,7]]
console.log(arr5.flat())
//[1, 2, 3, 5, 6, 7]

数组的Reduce方法：

第一次接触到Reduce是在学习Hadoop的时候，那时候的理解是对Map后的数据各自执行Reduce处理，而后将处理结果汇总返回。JS中的Reduce与这个概念相似，就是经过一个方法对数组中的元素逐一处理，而后将结果逐一叠加，最后将结果返回出去。好比咱们想要对数组中的元素执行平方后求和，用Reduce就很容易实现，代码以下：

let arr6=[1,2,3];
console.log(arr6.reduce((prev,curr)=>prev+curr*curr,0));

猛一看的确让人有点费解，大可没必要。想要搞清楚reduce的使用方式第一步要搞清楚reduce传递的参数，为以下四个：

参数名	含义
previousValue	上一个元素（initialValue 或者数组第一项）
currentValue	当前元素
currentIndex	当前元素的index
array	执行reduce方法的数组对象（通常不用）
initialValue	执行reduce方法的初始值

在TS中，对Reduce方法定义的类型以下：

reduce(callbackfn: (previousValue: T, currentValue: T, currentIndex: number, array: T[]) => T): T;

reduce(callbackfn: (previousValue: T, currentValue: T, currentIndex: number, array: T[]) => T, initialValue: T): T;

咱们能够看到，这里TS定义的reduce数据类型有两种调用方式，一种为包含初始值的调用方式，一种是不提供初始值的调用方式，这两种有什么区别？这里咱们不卖关子，直接看例子：

let arr6=[2,2,3]
console.log(arr6.reduce((prev,curr,index)=>{
    console.log(index)
    return prev+curr*curr
}))
//输出为：1 2     15

let arr6=[2,2,3]
console.log(arr6.reduce((prev,curr,index)=>{
    console.log(index)
    return prev+curr*curr
},0))
//输出为: 0 1 2      17

能够清楚地看到，提供initialValue后，reduce会从index为0的元素开始执行回调方法，而不提供initialValue则会将跳过index为0的元素，直接从index为1的元素开始执行回调方法（即将index为0的元素设置为initialValue）。

算法实现

1.使用reduce方法实现提取深度为1的数组

function MyFlat(arr){
    return arr.reduce((prev,curr)=>prev.concat(curr),[]);
}

let arr=[1,2,3,4,5,6,[7,8,9]];
console.log(MyFlat(arr));
//[1, 2, 3, 4, 5, 6, 7, 8, 9]

2.使用数组的解构赋值实现提取深度为1的数组

function MyFlat(arr){
    return [].concat(...arr)
}

let arr=[1,2,3,4,5,6,[7,8,9]]
console.log(MyFlat(arr))

ps：这个方法有点炫^_^

3.使用reduce+递归实现多层数组的提取

前面两个实现的是不传参的flat方法，也便是对数组执行层级为1的提取。若是咱们想指定提取的层级，或者使用Infinity提取任意层数组怎么作呢？看代码：

function MyFlat(arr,deep=1){
    return deep>0 ? arr.reduce((prev,curr)=>prev.concat(Array.isArray(curr)?MyFlat(curr,deep-1):curr),[]):arr.slice()
}
console.log(MyFlat([1,2,3,[4,5,[6,7,8,[9,10]]]],Infinity))
//[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

代码很短，可是颇有嚼头。咱们在参数里增长了一个变量deep表明默认深度，给他一个默认值1。程序会首先判断deep的深度，若是深度大于零就执行后面的代码，不然返回数组的副本。
若是深度大于0，咱们会用initialValue也就是空数组去concat数组里面的元素，在concat的时候咱们会判断当前元素是否为数组，若是是数组则递归执行MyFlat方法对子元素进行提取。这里不要忘了，咱们提供了初始值"[]"，因此其会从index为0的元素开始执行回调方法。

3.使用生成器函数实现多层数组的提取

待续……