ES6+ flat()

1. 前言

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

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

2. ES5 中的處理方法

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

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]

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

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

3. 方法詳情

3.1 語法使用

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

語法使用：

var newArray = arr.flat([depth])

參數(shù)解釋：

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]

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

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

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

3.3 數(shù)組空項

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

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

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

4. 案例：深拷貝數(shù)組

使用 flat() 方法有個很好用的場景，就是深拷貝數(shù)組。我們知道 flat() 拍平后的數(shù)組不會影響源數(shù)組，那么是不是我們可以傳入?yún)?shù) 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 作為數(shù)組扁平化的深度，也就是不處理，然后給得到的 arr2 數(shù)組添加元素，最后打印兩個數(shù)組，可以看到 arr1 沒有 100，這樣就達到了使用 flat() 來進行數(shù)值的深拷貝。

4. 小結(jié)

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