JS扁平化（flatten）数组-蒲公英云

JS扁平化分类：
1.对象扁平化（深度很深的对象，经过扁平化编程深度为 1 的对象）、
2.数组扁平化（降维过程，多维数组经过扁平化变成一维数组）。

首先让我们思考一个这样的题目；假如有一个数组 var arr = [1, [2, 3, [4]]] ，我们怎么能把arr变成[1, 2, 3, 4]呢？即让多维数组降维，转换为只有一层的数组；如果用过lodash的话，我们知道 flatten 和 flattenDeep 方法都可以实现.

数组的扁平化，是将一个嵌套多层的数组 array (嵌套可以是任何层数)转换为只有一层的数组。

1.JS数组扁平化处理的几种方法

方法1：

递归实现，取出数组中的值然后递归判断，我的第一个想法。中间加了一些判断条件，限制输入内容只能是整数或数组，不想判断就改变下条件就行了，这个方法没撒意思。

function flatten(arr) {
    // 判断参数是否是数组,检测数组元素是否是整数或者数组
    var result = [];
    if (!Array.isArray(arr)) {
        // 不是数组， 判断是否是整数
        if (arr % 1 == 0) {
            result.push(arr);
        } else {
            throw Error('The parameter contains NaN or contains not Integer!');
        }
    } else {
        // 是数组，遍历
        for (let i = 0; i < arr.length; i++) {
             result = result.concat(flatten(arr[i]));
        }
    }
    return result;
 }

方法二：

方法一其实可以利用数组的一些方法做些改变，但是实现思路基本一致。

//利用reduce实现
function flatten(arr) {
    return arr.reduce(function (prev, next) {
        return prev.concat(Array.isArray(next) ? flatten(next) : next)
    }, [])
}

方法三：

递归确实存在性能消耗的问题，每次都要重新创建函数，如果不用递归是不是也可以实现呢？

扩展运算符，可以展开数组，每次扒开一层，通过循环可以实现数组扁平化。

//利用扩展运算符
function flatten(arr) {
    var arr;
    while (arr.some(v => Array.isArray(v))) {
        arr = [].concat(...arr);
    }
    return arr;
}

方法四：
通过扩展运算符确实可以避免递归，但是却要使用到循环，如果数组层级过高，循环的消耗也不小，如果连循环也不用呢？

使用字符串，利用正则去掉中括号，实现最简单，而且消耗也最小：

//扁平化数组(不使用循环，使用字符串)
function flatten(arr) {
    let str = JSON.stringify(arr).replace(/\[|\]/g, '');
    return JSON.parse(Array.of('[' + str + ']')[0]);
}

思考问题：考虑极端情况，数组里存在对象，对象里又有嵌套的数组，正则还能解决吗？

其实如果没有极端数据的话，使用toString()然后拆分组合也可以实现扁平化，但是不完美，比如以下数据：

let arr = [2, [3.2, [’s,d,w’],’a,b,c,d,e’]]; 
arr.toString() ==> “2,3.2,s,d,w,a,b,c,d,e”

这样的结果显然不是期望的，’s,d,w’ 和 ‘a,b,c,d,e’ 本应该是单独一项，但是转化后连成一片了，后续操作无法继续进行…

2.flat、reduce、toString、[].concat(…arr)、generator、字符串过滤、undercore or lodash库

flat：

flat(depth) 方法会递归到指定深度将所有子数组连接，并返回一个新数组, depth指定嵌套数组中的结构深度，默认值为1，不管多少层则可以用Infinity关键字作为参数。

[1, 2, [3]].flat(1) // [1, 2, 3]
[1, 2, [3, [4]]].flat(2) // [1, 2, 3, 4]
[1, 2, [3, [4, [5]]]].flat(Infinity) // [1, 2, 3, 4, 5]

flat()有兼容性问题，不建议使用.

reduce：

function flatten(arr) {
  return arr.reduce((a, b) => {
    // return Array.isArray(b) ? a.concat(flatten(b)) : a.concat(b);
    return a.concat(Array.isArray(b) ? flatten(b) : b);
  }, []);
};
// es6
const flatten = arr =>
  arr.reduce((a, b) => a.concat(Array.isArray(b) ? flatten(b) : b), []);
flatten([1,[2,3],4,[[5,6],7]])  // [1, 2, 3, 4, 5, 6, 7]

toString：

只适于数组的元素都是数字

function flatten(arr) {
  return arr.toString().split(",").map(item => +item);
};
flatten([1,[2,3],4,[[5,6],7]])  // [1, 2, 3, 4, 5, 6, 7]

[].concat(…arr)：

function flatten(arr) {
  return !Array.isArray(arr) ? arr : [].concat.apply([], arr.map(flatten));
}
flatten([1,[2,3],4,[[5,6],7]])  // [1, 2, 3, 4, 5, 6, 7]

generator:

function* flatten(arr) {
  if (!Array.isArray(arr)) yield arr;
  else for (let el of arr) yield* flatten(el);
}
let flattened = [...flatten([1,[2,[3,[4]]]])];  // [1, 2, 3, 4]

字符串过滤:

将输入数组转换为字符串并删除所有括号（[]）并将输出解析为数组

const flatten = arr => JSON.parse(`[${JSON.stringify(arr).replace(/\[|]/g,'')}]`);

undercore or lodash 库:

使用undercore库或者lodash的中_.flatten函数，具体用法查阅API文档

_.flatten([1, [2], [3, [[4]]]]);
=> [1, 2, 3, 4];

参考文章：
https://blog.csdn.net/MrGreenHand/article/details/78726940
https://www.jianshu.com/p/b1fb3434e1f5
https://blog.csdn.net/original_heart/article/details/78906911
https://juejin.im/post/5c6b63f6f265da2da53ec057

https://blog.csdn.net/orchid_djl/article/details/79953882
https://www.cnblogs.com/hahazexia/p/9737341.html#top