详解js数组扁平化

1.项中最多一层深度的扁平化

1.1concat() + apply

Array.prototype.concat.apply([],arr) 

例子：

Array.prototype.concat.apply([],[1,2,3,4,5,[6,7]])

// 这样写相当于在一个空的数组上调用concat然后给他穿进去的参数不是一个数组，而是这个数组里的项。这是利用了apply的特性，因为apply第二个参数接受一个数组，然后数组里面的内容就是参数。等同于下面的样子：

[].concat(1,2,3,4,5,[6,7]) 

1.2 concat() + 拓展运算符

[].concat(...arr)

这样写就相当于把数组打碎了。比如把[1,2,3,4,5,[6,7]]打碎成1,2,3,4,5,[6,7]

然后调用[].concat(1,2,3,4,5,[6,7]) 结果就是 [1, 2, 3, 4, 5, 6, 7]

所以有了拓展运算符apply就可以下岗了,可读性非常的强。

1.3 flat()

这个是为了扁平化的专门的函数，可以扁平化自定义层的的数组，语法如下

var newArray = arr.flat([depth]);

depth 是指定的深度，默认为1

例如：

const arr=[[1,2,3],[4,5,6]];
console.log(arr.flat()) // [1,2,3,4,5,6]

如果是多层的话，

const arr=[[1,2,3],[4,[5,6]]];
console.log(arr.flat()) // [1,2,3,4,[5,6]]
console.log(arr.flat(2)) // [1,2,3,4,5,6]

2.项中最多N层数组的扁平化

2.1 递归方法

自然想到的就是递归了，递归需要一个终点，这个终点就是下面的hasArray()，如果这个数组里面的项不存在Array对象，都是基本数据的话，就返回false。否则返回true。

// 判断数组里面还有数组吗。（终点判定）
function hasArray(arr){
	for(item of arr){
		if(Array.isArray(item)){
			return true
		}
	}
	return false
}

// 扁平化一个深度为一层数组
function paiping(arr){
  // ES6写法：
	return [].concat(...arr)
  // ES5写法：
	// return Array.prototype.concat.apply([],arr) 
}

// 扁平化N层深度的数组
function paiping2(arr){
	if(hasArray(arr)){
		return paiping2(paiping(arr))
	}else{
		return arr
	}
}

可以简化一下：简洁的一批，是吧，不解释了，对照着上面看就好了。

function fn(arr){
	for(item of arr){
		if(Array.isArray(item)){
			return fn([].concat(...arr))
		}
	}
	return arr
}

2.2 toString()

无论你的数组多深，只要你toString一下，他们的结构就没有了。

const arr = [[1, 2, 3], [4, [5, 6]]];
console.log(arr.toString()) // "1,2,3,4,5,6"

这时候我们针对这个字符串，用split分隔一下逗号，生成一个单个字符串数组。

let arr1 = arr.toString().split(',') //  ["1", "2", "3", "4", "5", "6"

我们现在只需要遍历一下，把他转化成数字就行了。

let arrnum = arr1.map((val) => {
	// console.log(val)
  return parseInt(val)
})
console.log(arrnum) // [1,2,3,4,5,6]