JS 数组扁平化

ゞ浴缸里的玫瑰 2022-10-26 12:59 176阅读 0赞

数组扁平化是什么呢？ 举例的话就是 \[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 方法拼接数组。

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