面试官连环追问：数组拍平（扁平化） flat 方法实现

前言

前段时间秋招面哔哩哔哩的时候，面试官问：如何实现 flat 方法？当时手写的并不完美，后来回盘复习，发现面试要求手写数组拍平（扁平化） flat 方法的面试官不在少数。其中包括：拼多多、小米、美团、滴滴、shopee、有赞等。手写 flat 方法是一道很是基础的面试题，一般出如今笔试或者第一轮面试当中，主要考察基本的手写代码的能力。今天就从了解 flat 特性到实现 flat 再到接住面试官的连环追问从新学习一遍数组拍平（扁平化） flat 方法吧。

Github 戳我

一段代码总结 Array.prototype.flat() 特性

注：数组拍平方法 Array.prototype.flat() 也叫数组扁平化、数组拉平、数组降维。 本文统一叫：数组拍平

const animals = ["🐷", ["🐶", "🐂"], ["🐎", ["🐑", ["🐲"]], "🐛"]];

// 不传参数时，默认“拉平”一层
animals.flat();
// ["🐷", "🐶", "🐂", "🐎", ["🐑", ["🐲"]], "🐛"]

// 传入一个整数参数，整数即“拉平”的层数
animals.flat(2);
// ["🐷", "🐶", "🐂", "🐎", "🐑", ["🐲"], "🐛"]

// Infinity 关键字做为参数时，不管多少层嵌套，都会转为一维数组
animals.flat(Infinity);
// ["🐷", "🐶", "🐂", "🐎", "🐑", "🐲", "🐛"]

// 传入 <=0 的整数将返回原数组，不“拉平”
animals.flat(0);
animals.flat(-10);
// ["🐷", ["🐶", "🐂"], ["🐎", ["🐑", ["🐲"]], "🐛"]];

// 若是原数组有空位，flat()方法会跳过空位。
["🐷", "🐶", "🐂", "🐎",,].flat();
// ["🐷", "🐶", "🐂", "🐎"]

Array.prototype.flat() 特性总结

• Array.prototype.flat() 用于将嵌套的数组“拉平”，变成一维的数组。该方法返回一个新数组，对原数据没有影响。
• 不传参数时，默认“拉平”一层，能够传入一个整数，表示想要“拉平”的层数。
• 传入 <=0 的整数将返回原数组，不“拉平”
• Infinity 关键字做为参数时，不管多少层嵌套，都会转为一维数组
• 若是原数组有空位，Array.prototype.flat() 会跳过空位。

面试官 N 连问

第一问：实现一个简单的数组拍平 flat 函数

首先，咱们将花一点篇幅来探讨如何实现一个简单的数组拍平 flat 函数，详细介绍多种实现的方案，而后再尝试接住面试官的连环追问。

实现思路

如何实现呢，思路很是简单：实现一个有数组拍平功能的 flat 函数，咱们要作的就是在数组中找到是数组类型的元素，而后将他们展开。这就是实现数组拍平 flat 方法的关键思路。

有了思路，咱们就须要解决实现这个思路须要克服的困难：

• 第一个要解决的就是遍历数组的每个元素；
• 第二个要解决的就是判断元素是不是数组；
• 第三个要解决的就是将数组的元素展开一层；

遍历数组的方案

遍历数组并取得数组元素的方法很是之多，包括且不限于下面几种：

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

const arr = [1, 2, 3, 4, [1, 2, 3, [1, 2, 3, [1, 2, 3]]], 5, "string", { name: "弹铁蛋同窗" }];
// 遍历数组的方法有太多，本文只枚举经常使用的几种
// 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", { name: "弹铁蛋同窗" }];
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() 方法用于合并两个或多个数组，在拼接的过程当中加上扩展运算符会展开一层数组。详细见下面的代码。

• concat + apply

主要是利用 apply 在绑定做用域时，传入的第二个参数是一个数组或者类数组对象，其中的数组元素将做为单独的参数传给 func 函数。也就是在调用 apply 函数的过程当中，会将传入的数组一个一个的传入到要执行的函数中，也就是至关对数组进行了一层的展开。

• toString + split

不推荐使用 toString + split 方法，由于操做字符串是和危险的事情，在上一文章中我作了一个操做字符串的案例还被许多小伙伴们批评了。若是数组中的元素全部都是数字的话，toString + split 是可行的，而且是一步搞定。

const arr = [1, 2, 3, 4, [1, 2, 3, [1, 2, 3, [1, 2, 3]]], 5, "string", { name: "弹铁蛋同窗" }];
// 扩展运算符 + concat
[].concat(...arr)
// [1, 2, 3, 4, 1, 2, 3, [1, 2, 3, [1, 2, 3]], 5, "string", { name: "弹铁蛋同窗" }];

// 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))
// [1, 2, 3, 4, 1, 2, 3, 1, 2, 3, 1, 2, 3]

总结完要解决的三大困难，那咱们就能够很是轻松的实现一版数组拍平 flat 函数了。

const arr = [1, 2, 3, 4, [1, 2, 3, [1, 2, 3, [1, 2, 3]]], 5, "string", { name: "弹铁蛋同窗" }];
// concat + 递归
function flat(arr) {
  let arrResult = [];
  arr.forEach(item => {
    if (Array.isArray(item)) {
      arrResult = arrResult.concat(arguments.callee(item));   // 递归
      // 或者用扩展运算符
      // arrResult.push(...arguments.callee(item));
    } else {
      arrResult.push(item);
    }
  });
  return arrResult;
}
flat(arr)
// [1, 2, 3, 4, 1, 2, 3, 1, 2, 3, 1, 2, 3, 5, "string", { name: "弹铁蛋同窗" }];

到这里，恭喜你成功获得了面试官对你手撕代码能力的基本承认🎉。可是面试官每每会不止于此，将继续考察面试者的各类能力。

第二问：用 reduce 实现 flat 函数

我见过不少的面试官都很喜欢点名道姓的要面试者直接用 reduce 去实现 flat 函数。想知道为何？文章后半篇咱们考虑数组空位的状况的时候就知道为啥了。其实思路也是同样的。

const arr = [1, 2, 3, 4, [1, 2, 3, [1, 2, 3, [1, 2, 3]]], 5, "string", { name: "弹铁蛋同窗" }]

// 首先使用 reduce 展开一层
arr.reduce((pre, cur) => pre.concat(cur), []);
// [1, 2, 3, 4, 1, 2, 3, [1, 2, 3, [1, 2, 3]], 5, "string", { name: "弹铁蛋同窗" }];

// 用 reduce 展开一层 + 递归
const flat = arr => {
  return arr.reduce((pre, cur) => {
    return pre.concat(Array.isArray(cur) ? flat(cur) : cur);
  }, []);
};
// [1, 2, 3, 4, 1, 2, 3, 1, 2, 3, 1, 2, 3, 5, "string", { name: "弹铁蛋同窗" }];

第三问：使用栈的思想实现 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", { name: "弹铁蛋同窗" }]
flat(arr)
// [1, 2, 3, 4, 1, 2, 3, 1, 2, 3, 1, 2, 3, 5, "string", { name: "弹铁蛋同窗" }];

第四问：经过传入整数参数控制“拉平”层数

// 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", { name: "弹铁蛋同窗" }]
flat(arr, Infinity);
// [1, 2, 3, 4, 1, 2, 3, 1, 2, 3, 1, 2, 3, 5, "string", { name: "弹铁蛋同窗" }];

第五问：使用 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", { name: "弹铁蛋同窗" }]
// 调用 Generator 函数后，该函数并不执行，返回的也不是函数运行结果，而是一个指向内部状态的指针对象。
// 也就是遍历器对象（Iterator Object）。因此咱们要用一次扩展运算符获得结果
[...flat(arr, Infinity)]    
// [1, 2, 3, 4, 1, 2, 3, 1, 2, 3, 1, 2, 3, 5, "string", { name: "弹铁蛋同窗" }];

第六问：实如今原型链上重写 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, "string", { name: "弹铁蛋同窗" }]
arr.fakeFlat(Infinity)
// [1, 2, 3, 4, 1, 2, 3, 1, 2, 3, 1, 2, 3, 5, "string", { name: "弹铁蛋同窗" }];

第七问：考虑数组空位的状况

由最开始咱们总结的 flat 特性知道，flat 函数执行是会跳过空位的。ES5 大多数数组方法对空位的处理都会选择跳过空位包括：forEach(), filter(), reduce(), every() 和 some() 都会跳过空位。

因此咱们能够利用上面几种方法来实现 flat 跳过空位的特性

// reduce + 递归
Array.prototype.fakeFlat = function(num = 1) {
  if (!Number(num) || Number(num) < 0) {
    return this;
  }
  let arr = [].concat(this);
  return num > 0
    ? arr.reduce(
        (pre, cur) =>
          pre.concat(Array.isArray(cur) ? cur.fakeFlat(--num) : cur),
        []
      )
    : arr.slice();
};
const arr = [1, [3, 4], , ,];
arr.fakeFlat()
// [1, 3, 4]

// foEach + 递归
Array.prototype.fakeFlat = function(num = 1) {
  if (!Number(num) || Number(num) < 0) {
    return this;
  }
  let arr = [];
  this.forEach(item => {
    if (Array.isArray(item)) {
      arr = arr.concat(item.fakeFlat(--num));
    } else {
      arr.push(item);
    }
  });
  return arr;
};
const arr = [1, [3, 4], , ,];
arr.fakeFlat()
// [1, 3, 4]

扩展阅读：因为空位的处理规则很是不统一，因此建议避免出现空位。

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。

总结

面试官现场考察一道写代码的题目，其实不只仅是写代码，在写代码的过程当中会遇到各类各样的知识点和代码的边界状况。虽然大多数状况下，面试官不会那么变态，就 flat 实现去连续追问面试者，而且手撕好几个版本，但面试官会要求在你写的那版代码的基础上再写出一个更完美的版本是常有的事情。只有咱们沉下心来把基础打扎实，无论面试官如何追问，咱们都能自如的应对。flat 的实现绝对不会只有文中列出的这几个版本，敲出本身的代码是最好的进步，在评论区或者在 issue 中写出你本身的版本吧！

Today i learned.若是你学到了就点波关注点个赞👍吧

文末彩蛋

记得两个礼拜前的星期天，晚上十点左右，在掘金社区发了本身第一遍技术博文。周一下午就收到了 70 多个赞，很是受宠若惊，内心预期能有 70 个赞已经很是满意了。可万万没想到，5 天左右文章阅读量就上了 2w，点赞上了 1000+，掘金等级直接上升到 3 级，被你们承认真的很是开心。那篇文章在某个方案中代码写的很是的糟糕，很是感谢在评论区指出个人错误小伙伴们，也很是感谢给我点赞的小伙伴们，真心感谢每小伙伴给的赞。同时也很是但愿可以和各位小伙伴成为学习和生活上的朋友，一块儿交流技术和生活。弹铁蛋同窗很是欢迎你们加我微信和加群聊天～弹铁蛋同窗也随手开了个公众号，主要记录本身的技术文章和本身的生活感触，同时还在网上收集了不少前端学习的资料都放在了公众号里，你们也能够随手关注一波哦，也能够私聊我内推你哦～

推荐阅读

你不知道的 JSON.stringify() 的威力

加群交流

29 号二维码过时后能够加我好友拉你进群