扎实基础篇-----js中数组扁平化

这是我参与8月更文挑战的第20天，活动详情查看：8月更文挑战；

写在前面

数组扁平化的含义，就是将一个多维数组转化为一个一维数组。emm，解释有点苍白，看一个例子🌰

const arr = [1, [2, 3], 4];
const flatArr = [1, 2, 3, 4];

上面例子中arr就是一个多维数组，而flatArr就是一个扁平化后的数组了~

扁平化实现

面试官：请你实现一个数组扁平化

const flatArr = arr.flat(Infinity); // [1, 2, 3, 4]

该flat() 方法创建一个新数组，其中所有子数组元素以递归方式连接到指定深度。

这里我们使用es6中的数组方法flat，传入一个Infinity表示不论多深的数组都能够拍平。

面试官：还有别的办法吗？

哈哈，面试官的惯用问法，当然不使用数组的扁平化方法，我们也能够通过其他方式实现，一起来看。

利用正则匹配

const jsonArr = JSON.stringify(arr);
const flatArr = jsonArr.replace(/\[|\]/g,'').split(',');

这样我们先将arr进行序列化，然后再去全局匹配字符串中的中括号，将中括号替换为空字符串，这就去掉了多维数组中的所有括号，然后将这个字符串直接split分割为数组即可。

toString截掉中括号

const flatArr= String(arr).split(',');

其实和利用正则匹配的整体思路是一致的，只是写法上更为简单，我们只需要无脑（巧妙）的将数组换换为组付出，再进行分割即可。

递归

function flatten(arr) {  
    return arr.reduce((result, item)=> {
        return result.concat(Array.isArray(item) ? flatten(item) : item);
    }, []);
}
const flatArr = flatten(arr);

嗯，这就有点水平了，我们使用到了递归，定义一个控诉组，然后循环每一项，判断当前项是数字的话，我们就继续调用递归函数，否则代表他不是一个数组，我们concat到数组中即可。

总结

扁平化最简单且效率最高的其实就是使用数组的原生方法flat，当项目中能够使用的话我们直接使用即可。但是当你去面试就需要掌握不同的方法了。

这里解释的几种方式，其实就两大类，一个是转换成字符串，然后再分割为数组；还有一个就是直接递归，然后以此判断是否为数组，再决定是否递归，还是放到新数组中即可。

前端漫漫长途，我们都在路上，希望可以和小伙伴们一起交流，一起进步。持续更新ing.....