ES6+ flat()

1. 前言

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

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

2. ES5 中的處理方法

ES5 中沒(méi)有類似的方法，如果要達(dá)到目標(biāo)結(jié)果需要自己寫(xiě)函數(shù)針對(duì)性處理。

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]

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

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

3. 方法詳情

3.1 語(yǔ)法使用

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

語(yǔ)法使用：

var newArray = arr.flat([depth])

參數(shù)解釋：

3.2 語(yǔ)法示例

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]

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

使用 Infinity，可展開(kāi)任意深度的嵌套數(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ù)組空項(xiàng)

在數(shù)組中有空項(xiàng)的時(shí)候，使用 flat() 會(huì)將中的空項(xiàng)進(jìn)行移除。

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

上面的代碼中，數(shù)組中第三項(xiàng)是空值，在使用 flat 后會(huì)對(duì)空項(xiàng)進(jìn)行移除。

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

使用 flat() 方法有個(gè)很好用的場(chǎng)景，就是深拷貝數(shù)組。我們知道 flat() 拍平后的數(shù)組不會(huì)影響源數(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ù)組添加元素，最后打印兩個(gè)數(shù)組，可以看到 arr1 沒(méi)有 100，這樣就達(dá)到了使用 flat() 來(lái)進(jìn)行數(shù)值的深拷貝。

4. 小結(jié)

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