ES6+ flat()

1. 前言

在開發中有時會遇到對多維數組進行拍平處理，數組的拍平就是將一個嵌套多層的數組進行降維操作，也就是對數值進行扁平化。然而在 ES5 是沒有方法能處理這樣的需求的，大部分都會借助函數庫的方式來實現。

本節我們要學習的是 ES6 提供的 flat() 方法，對多維數組進行扁平化操作，而且可以對數組中的空項進行移除。

2. ES5 中的處理方法

ES5 中沒有類似的方法，如果要達到目標結果需要自己寫函數針對性處理。

function flat(arr){
	if(Object.prototype.toString.call(arr) != "[object Array]"){return false};
	let res = [];
	for(var i=0;i<arr.length;i++){
		if(arr[i] instanceof Array){
			res = res.concat(flat(arr[i]))
		}else{
			res.push(arr[i])
		}
	}
	return res;
};
var arr = [1,2,[3,4,5,[6,7,8],9],10,[11,12]];
flat(arr);	// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]

上面的代碼是實現了一個數組扁平化的方法，在里面我們會定義一個空數組然后遞歸地去調用 flat() 方法處理原數組中的每一項，如果傳入的是元素是數組，則要繼續遞歸處理，最終會得到一個一維的數組。此方法只能把任意維度的數組轉化為一維數組，不能轉化為指定維度的數組，如果需要的話還得繼續處理。

由此可見，扁平化數組是一件很麻煩的事，ES6 提供的 flat() 方法完美地解決了扁平化數組所帶來的問題，下面我們就來學習 flat() 方法吧。

3. 方法詳情

3.1 語法使用

使用 flat() 方法會接收一個參數，這個參數是數值類型，是要處理扁平化數組的深度，生成后的新數組是獨立存在的，不會對原數組產生影響。由此我們也可以使用它深拷貝一個數組，下文我們會用一個案例說明。

語法使用：

var newArray = arr.flat([depth])

參數解釋：

3.2 語法示例

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

上面的代碼定義了一個層嵌套的數組，默認情況下只會拍平一層數組，也就是把原來的三維數組降低到了二維數組。在傳入的參數為 2 時，則會降低兩維，成為一個一維數組。

使用 Infinity，可展開任意深度的嵌套數組

var arr = [1, 2, [3, 4, [5, 6, [7, 8]]]];
arr.flat(Infinity);  // [1, 2, 3, 4, 5, 6, 7, 8]

3.3 數組空項

在數組中有空項的時候，使用 flat() 會將中的空項進行移除。

var arr = [1, 2, , 4, 5];
arr.flat();      // [1, 2, 4, 5]

上面的代碼中，數組中第三項是空值，在使用 flat 后會對空項進行移除。

4. 案例：深拷貝數組

使用 flat() 方法有個很好用的場景，就是深拷貝數組。我們知道 flat() 拍平后的數組不會影響源數組，那么是不是我們可以傳入參數 0 讓其不做扁平化操作呢？答案是可以的：

var arr1 = [1, 2, [3, 4, [5, 6]]];
var arr2 = arr1.flat(0);
arr2.push(100)
console.log(arr1)		// [1, 2, [3, 4, [5, 6]]]
console.log(arr2)		// [1, 2, [3, 4, [5, 6]], 100]

上面的代碼中我們傳入了 0 作為數組扁平化的深度，也就是不處理，然后給得到的 arr2 數組添加元素，最后打印兩個數組，可以看到 arr1 沒有 100，這樣就達到了使用 flat() 來進行數值的深拷貝。

4. 小結

本節介紹了對多維數組拍平的方法 flat()，并且可以對數組中的空項進行移除，這個方法可以使用在處理數組空項的操作中非常有用。另外，在開發中解決了一個重要的數組深拷貝問題，不妨使用此方法達到事半功倍的效果。