一文搞定数组扁平化（超全面数组拉平方案及实现）

前言

面试手写代码在大厂面试中很是常见，秋招中面试小米就手写了一道flat实现的代码题，当时经过简单遍历+递归方式实现了数组扁平化逻辑，但没有考虑多种实现方案及其边界条件(主要是对所涉及到高阶函数的知识点不够熟练，也没有考虑空位处理)，如今从头梳理一下，并尽量全面地总结数组扁平化的实现方案。前端

数组扁平化

数组扁平化即将一个嵌套多层的数组array(嵌套能够是任意层数)转换为只有一层的数组，如将数组[1,[2,[3,[4,5]]]]转换为[1,2,3,4,5]。面试

最直接的数组扁平化方案是使用Array.prototype.flat()方法(兼容性差)，其次是经过遍历数组元素递归实现每一层的数组拉平。编程

00x1 Array.prototype.flat()

按照一个可指定的深度递归遍历数组，并将全部元素与遍历到的子数组中的元素合并为一个新数组返回，对原数据没有影响。数组

语法：var newArray = arr.flat([depth])

说明：

depth为指定要提取嵌套数组的结构深度，默认值为1。
参数depth值 <=0 时返回原数组；
参数depth为Infinity 关键字时，不管多少层嵌套，都会转为一维数组，
flat()方法会移除数组中的空项，即原数组有空位，会跳过这个空位。

代码示例：

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

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

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

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

var arr5 = [1, 2, 3, 4, [1, 2, 3, [1, 2, 3, [1, 2, 3]]], 5, ["string", { type: "对象" }]];
arr5.flat(Infinity);
// [1, 2, 3, 4, 1, 2, 3, 1, 2, 3, 1, 2, 3, 5, "string", { type: "对象" }];

// 移除数组中的空项
var arr6 = [1, 2, , 4, 5];
arr6.flat();
// [1, 2, 4, 5]

复制代码

数组扁平化flat函数封装实现方案

实现思路

首先遍历获取数组的每个元素，其次判断该元素类型是否为数组，最后将数组类型的元素展开一层。同时递归遍历获取该数组的每一个元素进行拉平处理。markdown

遍历数组方案

for循环
for...of
for...in
entries()
keys()
values()
forEach()
map()
reduce()

const arr = [1, 2, 3, 4, [1, 2, 3, [1, 2, 3, [1, 2, 3]]], 5, ["string", { type: "对象" }]];
// 本文只枚举经常使用的几种数组遍历方法
// for 循环
for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}
// for...of
for (let value of arr) {
  console.log(value);
}
// for...in
for (let i in arr) {
  console.log(arr[i]);
}
// forEach 循环
arr.forEach(value => {
  console.log(value);
});
// entries（）
for (let [index, value] of arr.entries()) {
  console.log(value);
}
// keys()
for (let index of arr.keys()) {
  console.log(arr[index]);
}
// values()
for (let value of arr.values()) {
  console.log(value);
}
// reduce()
arr.reduce((pre, cur) => {
  console.log(cur);
}, []);
// map()
arr.map(value => console.log(value));
复制代码

判断数组元素是否为数组

instanceof
constructor
Object.prototype.toString
isArray

const arr = [1, 2, 3, 4, [1, 2, 3, [1, 2, 3, [1, 2, 3]]], 5, ["string", { type: "对象" }]];
arr instanceof Array
// true
arr.constructor === Array
// true
Object.prototype.toString.call(arr) === '[object Array]'
// true
Array.isArray(arr)
// true
复制代码

注：

instanceof 操做符是假定只有一种全局环境，若是网页中包含多个框架，多个全局环境，若是你从一个框架向另外一个框架传入一个数组，那么传入的数组与在第二个框架中原生建立的数组分别具备各自不一样的构造函数。(因此在这种状况下会不许确)
typeof 操做符对数组取类型将返回 object
constructor能够被重写，不能确保必定是数组

const str = 'abc';
str.constructor = Array;
str.constructor === Array 
// true
复制代码

数组元素展开一层方案

扩展运算符 + concat
concat +apply
toString + split

不推荐使用toString+split方法，操做字符串是很危险的，数组中元素都是数字时可行。app

const arr = [1, 2, 3, 4, [1, 2, 3, [1, 2, 3, [1, 2, 3]]], 5, ["string", { type: "对象" }]];
// 扩展运算符 + concat
[].concat(...arr)
// [1, 2, 3, 4, 1, 2, 3, [1, 2, 3, [1, 2, 3]], 5, "string", { type: "对象" }];

// concat + apply
[].concat.apply([], arr);
// [1, 2, 3, 4, 1, 2, 3, [1, 2, 3, [1, 2, 3]], 5, "string", { name: "对象" }];

// toString  + split
const arr2 =[1, 2, 3, 4, [1, 2, 3, [1, 2, 3, [1, 2, 3]]]]
arr2.toString().split(',').map(v=>parseInt(v))
// arr2.toString().split(',').map(v => +v)
// [1, 2, 3, 4, 1, 2, 3, 1, 2, 3, 1, 2, 3]
复制代码

00x1 手写一个最简单的flat函数实现

这里使用ES6语法中的箭头函数定义函数，注意箭头函数没有arguments，caller，callee，同时要区分于ES5使用function的两种函数声明定义方式。框架

const arr = [1, 2, 3, 4, [1, 2, 3, [1, 2, 3, [1, 2, 3]]], 5, ["string", { type: "对象" }]];
const flat = (arr) => {
  let arrResult = []
  for(let i=0, len=arr.length; i<len; i++){
    if(Array.isArray(arr[i])){
      arrResult.push(...flat(arr[i]))
      // arrResult = arrResult.concat(flat(arr[i]))
    }else{
      arrResult.push(arr[i])
    }
  }
  return arrResult;
}
flat(arr)
// [1, 2, 3, 4, 1, 2, 3, 1, 2, 3, 1, 2, 3, 5, "string", { type: "对象" }]
复制代码

循环部分同理可用for...of / for...in 来实现。 OK，如今你已经具有了基本的手撕代码能力，但面试官经常但愿你能掌握各类高阶函数方法的应用。接下来继续列举实现flat的几种方案。函数

00x2 用map/forEach实现flat函数

仍然是遍历+循环的原理，这里循环用map/forEach实现。优化

const arr = [1, 2, 3, 4, [1, 2, 3, [1, 2, 3, [1, 2, 3]]], 5, ["string", { type: "对象" }]];
const flat = (arr) => {
  let arrResult = []
  arr.map(item => {
    if(Array.isArray(item)){
      arrResult.push(...flat(item))
      // arrResult = arrResult.concat(flat(item))
    }else{
      arrResult.push(item)
    }
  })
  return arrResult;
}
flat(arr)
// [1, 2, 3, 4, 1, 2, 3, 1, 2, 3, 1, 2, 3, 5, "string", { type: "对象" }]
复制代码

00x3 归并方法：用reduce实现flat函数

咱们用reduce函数进行遍历，把prev的初值赋值为[]，若是当前的值是数组的话，那么咱们就递归遍历它的孩子，若是当前的值不是数组，那么咱们就把它拼接进数组里。this

const arr = [1, 2, 3, 4, [1, 2, 3, [1, 2, 3, [1, 2, 3]]], 5, ["string", { type: "对象" }]];
function flat(arr) {
  return arr.reduce((prev, cur)=>{
    return prev.concat(Array.isArray(cur)?flat(cur):cur);
  }, [])
}
flat(arr)
// [1, 2, 3, 4, 1, 2, 3, 1, 2, 3, 1, 2, 3, 5, "string", { type: "对象" }]
复制代码

00x4 用Generator实现flat函数

function* flat(arr, num) {
  if (num === undefined) num = 1;
  for (const item of arr) {
    if (Array.isArray(item) && num > 0) {   // num > 0
      yield* flat(item, num - 1);
    } else {
      yield item;
    }
  }
}
const arr = [1, 2, 3, 4, [1, 2, 3, [1, 2, 3, [1, 2, 3]]], 5, ["string", { type: "对象" }]]
// 调用 Generator 函数后，该函数并不执行，返回的也不是函数运行结果，而是一个指向内部状态的指针对象。
// 也就是遍历器对象（Iterator Object）。因此咱们要用一次扩展运算符获得结果
[...flat(arr, Infinity)]    
// [1, 2, 3, 4, 1, 2, 3, 1, 2, 3, 1, 2, 3, 5, "string", { type: "对象" }]
复制代码

00x5 在原型链上重写 flat 函数

Array.prototype.fakeFlat = function(num = 1) {
  if (!Number(num) || Number(num) < 0) {
    return this;
  }
  let arr = this.concat();    // 得到调用 fakeFlat 函数的数组
  while (num > 0) {           
    if (arr.some(x => Array.isArray(x))) {
      arr = [].concat.apply([], arr);	// 数组中还有数组元素的话而且 num > 0，继续展开一层数组 
    } else {
      break; // 数组中没有数组元素而且无论 num 是否依旧大于 0，中止循环。
    }
    num--;
  }
  return arr;
};
const arr = [1, 2, 3, 4, [1, 2, 3, [1, 2, 3, [1, 2, 3]]], 5, ["type", { name: "对象" }]]
arr.fakeFlat(Infinity)
// [1, 2, 3, 4, 1, 2, 3, 1, 2, 3, 1, 2, 3, 5, "string", { type: "对象" }]
复制代码

00x6 使用栈的思想实现 flat 函数

// 栈思想
function flat(arr) {
  const result = []; 
  const stack = [].concat(arr);  // 将数组元素拷贝至栈，直接赋值会改变原数组
  //若是栈不为空，则循环遍历
  while (stack.length !== 0) {
    const val = stack.pop(); 
    if (Array.isArray(val)) {
      stack.push(...val); //若是是数组再次入栈，而且展开了一层
    } else {
      result.unshift(val); //若是不是数组就将其取出来放入结果数组中
    }
  }
  return result;
}
const arr = [1, 2, 3, 4, [1, 2, 3, [1, 2, 3, [1, 2, 3]]], 5, ["string", { type: "对象" }]]
flat(arr)
// [1, 2, 3, 4, 1, 2, 3, 1, 2, 3, 1, 2, 3, 5, "string", { type: "对象" }]
复制代码

00x7 经过传入整数参数控制“拉平”层数

// reduce + 递归
function flat(arr, num = 1) {
  return num > 0
    ? arr.reduce(
        (pre, cur) =>
          pre.concat(Array.isArray(cur) ? flat(cur, num - 1) : cur),
        []
      )
    : arr.slice();
}
const arr = [1, 2, 3, 4, [1, 2, 3, [1, 2, 3, [1, 2, 3]]], 5, ["string", { type: "对象" }]]
flat(arr, Infinity);
// [1, 2, 3, 4, 1, 2, 3, 1, 2, 3, 1, 2, 3, 5, "string", { type: "对象" }]
复制代码

00x8 数组空位的处理

flat 函数执行是会跳过空位的。

ES5 对空位的处理，大多数状况下会忽略空位。

forEach(), filter(), reduce(), every() 和 some() 都会跳过空位。
map() 会跳过空位，但会保留这个值。
join() 和 toString() 会将空位视为 undefined，而 undefined 和 null 会被处理成空字符串。

ES6 明确将空位转为 undefined。

entries()、keys()、values()、find()和 findIndex() 会将空位处理成 undefined。
for...of 循环会遍历空位。
fill() 会将空位视为正常的数组位置。
copyWithin() 会连空位一块儿拷贝。
扩展运算符（...）也会将空位转为 undefined。
Array.from 方法会将数组的空位，转为 undefined。

00x1 for...of 循环遍历实现flat函数

const arr1 = [1, 2, 3, , , 4, [1, 2, 3, [1, 2, 3, [1, 2, 3]]], 5, ["string", { type: "对象" }]];
const flat = (arr) => {
  let arrResult = []
  for(let item of arr){
    if(Array.isArray(item)){
      arrResult.push(...flat(item))
      // arrResult = arrResult.concat(flat(arr[i]))
    }else{
      arrResult.push(item)
    }
  } return arrResult;
}
flat(arr1)
// [1, 2, 3, undefined, undefined, 4, 1, 2, 3, 1, 2, 3, 1, 2, 3, 5, "string", { type: "对象" }]
复制代码

总结

如今的前端面试中，大厂面试官基本都会考察手撕代码的能力，不只要能答得上来实现数组扁平化的几种方案，也不只是要能手写实现，还要能理解，能讲清楚其中包涵的详细知识点及代码的边界状况，能在基础版本上再写出一个更完美的版本。

而咱们在写代码的过程当中，也要养成这样的习惯，多问问本身还有没有别的替代实现方案，还能不能进一步优化，才能写出优美漂亮的代码，编程能力天然而然也就提升啦！