JS 数组扁平化

数组扁平化是什么呢？ 举例的话就是 [1,2,[3,4],[5]] => [1,2,3,4,5]；将一个多维数组变为一个一维数组。实现方法如下：

1、reduce

遍历数值每一项，如果值是数组则递归遍历，不是数组则用 concat 方法拼接数组。

// result是结果，item是当前项
function arrFlat(arr) {
	return arr.reduce((result,item) => { 
		return result.concat(Array.isArray(item) ? arrFlat(item) : item);
	}, []);
}
let arr = [1,2,[3,4,[5,6,[7]]]];
arrFlat(arr); // [1,2,3,4,5,6,7]
           

2、toString + split

toString 方法可以将高维数组变成字符串，然后用 split 方法分割成一维数组。

function arrFlat(arr) {
	return arr.toString().split(',').map((item) => {
		return Number(item);
	})
}
let arr = [1,2,[3,4,[5,6,[7]]]];
arrFlat(arr); // [1,2,3,4,5,6,7]
           

3、join + split

join 方法处理数据的效果和 toString 方法一样，可以将多维数据转化成字符串。

function arrFlat(arr) {
	return arr.join(',').split(',').map((item) => {
		return Number(item);
	})
}
let arr = [1,2,[3,4,[5,6,[7]]]];
arrFlat(arr); // [1,2,3,4,5,6,7]
           

4、递归

遍历数组的每一项，如果是数组就继续遍历，如果不是就 concat 方法拼接数组。

function arrFlat(arr) {
	let newArr = [];
	arr.map(item =>{
		if(Array.isArray(item)){
			newArr = newArr.concat(arrFlat(item));
		}else{
			newArr.push(item);
		}
	})
	return newArr
}
let arr = [1,2,[3,4,[5,6,[7]]]];
arrFlat(arr); // [1,2,3,4,5,6,7]
           

5、扩展运算符

ES6 提供的扩展运算符可以将二维数组变成一维数组，我们可以遍历数组，如果 arr 里面还有数组就用一次扩展运算符，直到没有为止。

function arrFlat(arr) {
	while(arr.some(item => Array.isArray(item))){
		arr = [].concat(...arr);
	}
	return arr;
}
let arr = [1,2,[3,4,[5,6,[7]]]];
arrFlat(arr); // [1,2,3,4,5,6,7]
           

6、flat

ES6 提供了 flat 方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。

function arrFlat(arr) {
	return arr.flat(4-1);
}
let arr = [1,2,[3,4,[5,6,[7]]]];
arrFlat(arr); // [1,2,3,4,5,6,7]
           

如果已知 arr 是一个四维数组，我们给 flat 方法传一个参数等于 4-1 的值就可以精准的让这个多维数组变成一维数组；如果不知道具体的维度也可以给 flat 方法传一个 ‘Infinity’ 作为参数，这样就可以将目标数组直接转成一维数组。

function arrFlat(arr) {
	return arr.flat(Infinity);
}
let arr = [1,2,[3,4,[5,6,[7]]]];
arrFlat(arr); // [1,2,3,4,5,6,7]
           

总结：

1、上面这些方法性能最好的是 flat 方法，但是它的兼容性不是很好；

2、性能最不好的是 reduce()；