关于javascript:大厂面试题手写数组的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 传递的参数，为如下四个：

在 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. 应用生成器函数实现多层数组的提取

待续……