扁平化

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

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

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

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

递归

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

 let arr = [1, [2, [3, 4]]]; function flattern(arr) { let result = []; for(let i = 0; i < arr.length; i++) { if(Array.isArray(arr[i])) { flattern(arr[i]) } else { result.push(arr[i]) } } return result; }console.log(flattern(arr));toStringtoString() 方法返回一个表示该对象的字符串。 ---MDN

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

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

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

这里嵌套数组调用这个方法之后，直接是扁平化后的字符串，然后在调用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]

提到数组的方法，就会联想到非常常用的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))

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

/** * 数组扁平化 * @param {Array} input 要处理的数组 * @param {boolean} shallow 是否只扁平一层 * @param {boolean} strict 是否严格处理元素，下面有解释 * @param {Array} output 这是为了方便递归而传递的参数 * 源码地址： */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;}

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