扁平化
我是昨天朋友问了我这个扁平化的问题，今天想起来总结一下。
js当中涉及到扁平化这个概念的就是数组扁平化。（以下是我对数组扁平化处理方法的理解while遍历有两种，分别是apply和ES6展开运算符操作，for循环结合递归一种，reduce()遍历一种，flat()一种，toString一种，undercore一种。）
数组的扁平化，就是将一个嵌套多层的数组 array (嵌套可以是任何层数)转换为只有一层的数组。假设有个名为 flatten 的函数可以做到数组扁平化， 效果就会如下：
var arr = [1,2,3,4,[5,6,[7,8]]]
console.log(flatten(arr)) // [1, 2, 3, 4, 5, 6, 7, 8]
接下来我们来编写自己的flattern函数了。
递归
一般首先想到的肯定是遍历数组，如果某一项是基本数据类型，直接push到新数组，如果某一项是数组，则直接将这一项concat到新的数组上，当然如果是多维数组，还得用上递归的方法，继续往下层寻找
通过遍历最外层数组的每一个元素，看看是否还是数组，如果是的话，继续递归执行，不是的话，放到最后的结果数组当中，代码如下:
let arr =[1,2,3,4,[5,6,[7,8]]]
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));
使用 数组的reduce(fn(), init, index, arr)+concat()方法
a.遍历每一项，并按fn()中规则处理每一项： 如果是基本类型，暴力concat到要返回的数组中，如果是数组则拼接到返回的数组上，如果是多维数组，递归调用；
b.init是要返回结果的初始值；
c第三和四参数可省略。
|
1
2
3
4
5
|
function flatten(arr) { return arr.reduce((result, item) => { return result.concat(Array.isArray(item) ? flatten(item) : item) }, [])} |
|
|
console.log(arr, flatten(arr)) // [1, 2, 3, 4, Array(3)] [1, 2, 3, 4, 5, 6, 7, 8] |
我们看看结果，也得到我们想要的结果了，且原数组没变化。
使用while循环some条件和apply特性，我们知道apply(obj, [ ])
a.第一个参数，是要调用已存在方法的对象，例如c.apply(d, []) ，d就继承了c的特性，这个参数和这篇文章没有太大关系，可以先不理解；
b.第二个参数是指的，要处理的数据，且一定是一个值，可以是数组或其他值，但必须是一个，如果是一个数组，那么会一次处理数组中的元素。好，这里就是利用这个特性，一次处理数组中的每一项，当然包括二级和多级数组：
|
1
2
3
4
5
6
|
function flatten(arr) { while (arr.some(item => Array.isArray(item))) { // 只要arr中某一项还是数组，则一直执行下去，直到全转成基本类型数据 arr = [].concat.apply([], arr) // 这里第二个新[]继承了concat方法，所以能对arr中的元素逐一concat到第二个新[]中。 } return arr} |
|
1
|
console.log(arr, flatten(arr)) // [1, 2, 3, 4, Array(3)] [1, 2, 3, 4, 5, 6, 7, 8]<br>// 第一遍执行返回： [1,2,3,4,[5,6,[7,8]]] => [1,2,3,4,5,6,[7,8]]，我们看到只处理了第二层数组[5,6,[7,8]],<br>// 把这个数组当成一项直接concat到新数组，第三层[7,8]没有处理，但第三层已经变成了第二层，再处理一次即可 |
|
1
|
// 第二遍执行返回： [1,2,3,4,5,6,[7,8]] => [1,2,3,4,5,6,7,8] 得到我们先要的结果<br><br><br>// 如果还有第四层或更多， |
toString
toString() 方法返回一个表示该对象的字符串。
这是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))
ES6方法：flat(depth) 方法会按照一个可指定的深度(depth可以为任意正整数，和Infinity - 任意深度，默认为1)递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。
var arr= [1,2,3,4,[5,6,[7,8]]] arr.flat() // [1, 2, 3, 4, 5, 6, Array(2)]
var arr= [1,2,3,4,[5,6,[7,8]]] arr.flat(Infinity) // [1, 2, 3, 4, 5, 6, 7, 8]
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;
}