es6 嵌套数组循环_面试官：“请讲一讲数组扁平化”！

缺乏、安全感 2023-01-02 15:26 205阅读 0赞

# **扁平化** #

js当中涉及到扁平化这个概念的就是数组扁平化，第一次接触到这个知识点的时候是在秋招的时候参加快手的面试， 当时想到的唯一办法就是递归解决，如今再重新看这个问题又想到很多其他的解决方案，那么今天就正式介绍一下什么是数组扁平化。

![844ee0c25c00df07c4dd9e7102505911.png][]

数组的扁平化，就是将一个嵌套多层的数组 array (嵌套可以是任何层数)转换为只有一层的数组。举个例子，假设有个名为 flatten 的函数可以做到数组扁平化， 效果就会如下：

var arr = [1, [2, [3, 4]]];console.log(flatten(arr)) // [1, 2, 3, 4]

接下来我们来编写自己的flattern函数了。

# **递归** #

这也是我当时面试想到最简单的解决方案，思路很简单，通过遍历最外层数组的每一个元素，看看是否还是数组，如果是的话，继续递归执行，不是的话，放到最后的结果数组当中，代码如下:

这是mdn官方文档对这个方法的解释，讲到这里就不得不提到拆箱操作，在 JavaScript 标准中，规定了 ToPrimitive 函数，它是对象类型到基本类型的转换(即， 拆箱转换)。

对象到 String 和 Number 的转换都遵循“先拆箱再转换”的规则。通过拆箱转换，把对象变成基本类型，再从基本类型转换为对应的 String 或者 Number。

拆箱转换会尝试调用 valueOf 和 toString 来获得拆箱后的基本类型。如果 valueOf 和 toString 都不存在，或者没有返回基本类型，则会产生类型错误 TypeError。

![750af35652a6a5c90538969fbe56ac9e.png][]

这里嵌套数组调用这个方法之后，直接是扁平化后的字符串，然后在调用split方法转换成数组即可，代码如下：

let arr = [1, [2, [3, 4]]];function flatten(arr) { return arr.toString().split(',').map(function(item){ return +item //+可以快速获得Number类型 })}console.log(flatten(arr))

Tips:我们也可以通过toString() 来获取每个对象的类型。为了每个对象都能通过 Object.prototype.toString() 来检测，需要以 Function.prototype.call() 或者 Function.prototype.apply() 的形式来调用，传递要检查的对象作为第一个参数，称为thisArg。代码如下：

let toString = Object.prototype.toString;toString.call(new Date); // [object Date]toString.call(new String); // [object String]toString.call(Math); // [object Math]//Since JavaScript 1.8.5toString.call(undefined); // [object Undefined]toString.call(null); // [object Null]

# reduce #

提到数组的方法，就会联想到非常常用的2个高阶函数map和reduce，这里的扁平化操作我们也可以用reduce来实现，代码如下：

let arr = [1, [2, [3, 4]]];function flatten(arr) { return arr.reduce(function(prev, next){ return prev.concat(Array.isArray(next) ? flatten(next) : next) }, [])}console.log(flatten(arr))...

ES6 增加了扩展运算符，用于取出参数对象的所有可遍历属性，拷贝到当前对象之中，所以也可以递归扁平化数组，代码如下：

let arr = [1, [2, [3, 4]]];function flatten(arr) { while (arr.some(item => Array.isArray(item))) { arr = [].concat(...arr); } //ES6新方法 return arr;}console.log(flatten(arr))

# undercore #

那么如何写一个抽象的扁平函数，来方便我们的开发呢，所有又到了我们抄袭 underscore 的时候了~ 在这里直接给出源码和注释，但是要注意，这里的 flatten 函数并不是最终的 \_.flatten，为了方便多个 API 进行调用，这里对扁平进行了更多的配置，代码如下：

/** * 数组扁平化 * @param {Array} input 要处理的数组 * @param {boolean} shallow 是否只扁平一层 * @param {boolean} strict 是否严格处理元素，下面有解释 * @param {Array} output 这是为了方便递归而传递的参数 * 源码地址：https://github.com/jashkenas/underscore/blob/master/underscore.js#L528 */function flatten(input, shallow, strict, output) { // 递归使用的时候会用到output output = output || []; var idx = output.length; for (var i = 0, len = input.length; i < len; i++) { var value = input[i]; // 如果是数组，就进行处理 if (Array.isArray(value)) { // 如果是只扁平一层，遍历该数组，依此填入 output if (shallow) { var j = 0, len = value.length; while (j < len) output[idx++] = value[j++]; } // 如果是全部扁平就递归，传入已经处理的 output，递归中接着处理 output else { flatten(value, shallow, strict, output); idx = output.length; } } // 不是数组，根据 strict 的值判断是跳过不处理还是放入 output else if (!strict){ output[idx++] = value; } } return output;}

如果觉得本文对你有所帮助，不如点个在看再走。

![a809ef41ee915e800f309cf701bf7c1b.png][]

[844ee0c25c00df07c4dd9e7102505911.png]: /images/20221119/3f95ca7aab584f598adcc270b30a888c.png
[750af35652a6a5c90538969fbe56ac9e.png]: /images/20221119/cc5fe155f4d64424b9b3c1e414f74499.png
[a809ef41ee915e800f309cf701bf7c1b.png]: /images/20221119/a0e6e906feda4da7aa959b27fe044169.png