扁平化

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));
toString
toString() 方法返回一个表示该对象的字符串。 ---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.5
toString.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;
}

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

閱讀更多 IT實戰聯盟 的文章

關鍵字: 跳槽那些事儿 JavaScript 递归