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()；