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