大厂面试题：手写数组的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的元素开始执行回调方法。

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


function* flatten(arr){
  for (let item of arr){
    if(Array.isArray(item)){
      yield* flatten(item);
    }else{
      yield  item;
    }
  }
}

let result =[...flatten([1,2,3,[4,5],[6,7,[8,9]]])]

console.log(result)  //[1, 2, 3, 4, 5, 6, 7, 8, 9]

实现代码很短，仔细阅读的话就会发现实际上不难理解。代码的核心在于判断每一个遍历的元素是否为数组元素，如果是数组元素，则递归调用flatten方法，否则返回当前遍历的元素，这里需要读者弄清楚两个知识点：1、什么是生成器函数 2、yield是什么意思，yield*又是什么意思？

Generator 函数是 ES6 提供的一种异步编程解决方案，语法行为与传统函数完全不同。
形式上，Generator 函数是一个普通函数，但是有两个特征。一是，function关键字与函数名之间有一个星号；二是，函数体内部使用yield表达式，定义不同的内部状态（yield在英语里的意思就是“产出”）。
阮一峰 ES6入门

让我们来看一个基本的生成器函数：

function* MyGeneration(){
  yield 'first';
  yield 'second';
  return 'third';
}

let GF = MyGeneration()
GF.next();
//{value: "first", done: false}
GF.next();
//{value: "second", done: false}
GF.next();
//{value: "third", done: true}

我们可以清楚的看到Generator 函数是分段执行的，yield表达式是暂停执行的标记，而next方法可以恢复执行。另外一点需要记住的是生成器函数不会立刻执行，只有执行了next方法以后，才会真正的执行。
如果在 Generator 函数内部，调用另一个 Generator 函数。需要在前者的函数体内部，自己手动完成遍历。而yield*就是为了解决这个问题，他让我们可以在一个generator函数里面调用另外一个函数。这样如果另外一个generator函数里面有多个yield我们就不用逐个进行遍历了。

5.使用堆栈实现flat函数

var arr1 = [1,2,3,[1,2,3,4, [2,3,4]]];
function flatten(input) {
  const stack = [...input];
  const res = [];
  while (stack.length) {
     //出栈
    const next = stack.pop();
    if (Array.isArray(next)) {
    //解构后入栈
      stack.push(...next);
    } else {
     //非子数组入栈
      res.push(next);
    }
  }
  // 反转恢复原数组的顺序
  return res.reverse();
}
flatten(arr1);// [1, 2, 3, 1, 2, 3, 4, 2, 3, 4]

使用堆栈的思想也很精妙，建议盆友们把这段代码在编译器里面调试一下，更能理解其中思想的精髓。其核心思想是模拟栈，逐层剥皮，直至完成所有元素的去方括号操作，然后将结果返回，当然返回的结果是倒序的，因为执行完剥皮操作后是将元素从后往前推入结果数组，因此最后需要翻转后返回。

总结

实现JS的flat方法其实不止笔者所列上述方法，但是我们可以得出结论：JS是一门非常强大的语言，尤其是在ES6-ES10标准出推出以后。作为前端工程师我们在完成开发任务后，要多思考一下如何优化我们的算法，提高我们代码的执行效率，不断的让我们的代码趋于完美。后面笔者还将推出使用JS去重相关的文章，在即将到来的文章里，大家更能感受到JS这门编程语言的美妙。
参考资料：
1、MDN Array.prototype.flat()：Array.prototype.flat()
2、ES6 入门-Generator Generator