JavaScript数组原理3：实现数组扁平化的几种方式

JavaScript数组原理3：实现数组扁平化的几种方式

数组的扁平化其实就是将一个嵌套多层的数组array（嵌套可以是任意层数）转换为只有一层的数组
举一个代码的例子：

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

上述是一种简单的实现扁平化的操作，下面将讲述6种实现扁平化的操作：
方法一：递归实现：通过循环递归的方式一项一项的去遍历如果每一项又是一个数组就继续向深层遍历再利用递归程序将其连接在一起.
下面是具体的代码样例：

var a=[1,[2, [3,4, 5]]];
function flatten(arr){let result =[];
for(let i= 0; i<arr.length; i++){if(Array.isArray(arr[i])){
result = result.concat(flatten(arr[i]));} else {
result.push(arr[i]);}
}
return result;}
flatten(a);//[1,2,3,4,5]

方法二：利用reduce函数进行迭代操作
从上述的普通递归函数中可以看出其实就是对函数数组中的每一项进行处理我们可以用之前文章里的reduce来实现数组的拼接从而简化代码
代码如下：

//方法2
var arr= [1,[2,[3,4]]l;function flatten(arr) {
return arr.reduce(function(prev, next){
return prev.concat(Array.isArray (next) ? flatten(next) : next)},[D)
console.log(flatten(arr));//[1,2,3,4,5]

方法三：扩展运算符实现

//方法3
var arr=[1,[2, [3, 41]];
function flatten(arr) {
while (arr.some(item => Array.isArray(item)) {
arr = [].concat(..arr);
return arr;
console.log(flatten(ar));// [1,2,3, 4,5]

上述代码的涵义和用法是：先用some将数组中是数组的项过滤出来然后执行concat操作利用展开运算符拼接到原数组中最后再将原数组返回。
这三种实现方式是比较基本的都是通过最普通递归思路衍生的方法
方法四：split和toString共同处理

/方法4
var arr=[1, [2,[3, 4]]];
function flatten(arr) {
return arr.toString().split(",); 
console.log(flatten(arr));// [1,2,3, 4,5]

方法五：ES6中的flat方法
这个方法也是可以直接实现数组扁平化操作的，语法如下：
arr.flat([depth]),depth是flat中的的参数，也表示展开数组的深度，可以表示展开几层数组
示例代码如下

//方法5
var arr=[1,[2, [3, 4]]];
function flatten(arr) {
return arr.flat(Infinity);
}
console.log(flatten(arr);// [1,2,3, 4,5]

方法六：使用正则和JSON方法共同处理

//方法6
let arr=[1, [2,[3, [4, 5]]]，6];
function flatten(arr) {
let str = JSON. stringify(arr);
str = str.replace(/([\J)/g, ");
str='['+ str+ ']';
return JSON.parse(str); 
}
console.log(flatten(ar);// [1,2,3, 4,5]

如果你不是很理解正则表达式可以看看下面这张图：

总结：

上述文章如果有问题或者想问问题或者想交流技术或者想和作者闲聊可以+QQ：2029788643