ES6中數組複製與合併

ES6擴展符...在數組中的應用

擴展運算符:採用...,將一個數組轉爲用逗號分隔的參數序列。即更直觀的可以稱爲展開符,eg:對let a = [1,2,3],


 ...a  結果 1,2,3 將數組裏面的東西直接展開放在此處

 

一、複製數組

在ES6之前,對於數組的複製我們通常是通過“=”或concat來實現;

我們先來定義兩個數組

let arr1 = [1, 2, 3], arr2 = [];

 

1、通過“=”直接複製數組

arr2 = arr1;
arr1 // [1,2,3]
arr1 // [1,2,3]

上述我們通過賦值符號直接複製數組,將arr1賦給arr2,接下來我對arr2進行一個修改,如下:

arr2[0] = 9;
arr1 // [9,2,3]
arr2 // [9,2,3]

發現修改arr2的值會導致arr1也會被更改。這是爲什麼呢?

因爲數組是複合的數據類型,直接複製的話,只是複製了指向底層數據結構的指針,而不是克隆一個全新的數組。arr2並不是

arr1的克隆,而是指向同一份數據的另一個指針。所以修改arr2時,會直接導致arr1的變化。

面對上述情況,ES5改進的方式是通過concat

arr2 = arr1.concat();
arr2[0] = 9;
arr1 // [1,2,3]
arr2 // [9,2,3]

上面示例中,arr1會返回原數組的克隆,再修改arr2就不會對arr1產生影響。
 

說明:concat()方法中可以傳1~多個參數,每個參數均爲數組形式!

ES6採用了更簡潔的方式:擴展運算符
 

arr2[0] = 9;
[...arr2] = arr1; //或arr2 = [..arr1]
arr1 // [1,2,3]
arr2 // [9,2,3]

 

二、合併數組

// es5合併數組
let arr3 = [1, 2, 3],
arr4 = [4, 5, 6];
let temp_1 = arr3.concat(arr4);
temp_1 //[1,2,3,4,5,6]

// es6合併數組
let temp_2 = [...arr3, ...arr4];
temp_2 //[1,2,3,4,5,6]

實際項目中,在渲染列表時,一般會對數據進行分頁,將新數據追加到舊數據後面直接concat可完美解決.但是,如果插到舊數據的前面去,一般通過循環+unshift達到手段,但是太繁瑣!直接利用ES6擴展符或利用applay達到目的

 

            // 第一種,直接利用...(最簡單)
			let temp_2 = [...arr3, ...arr4];
			// arr3  []1,2,3]
			temp_2 //[1,2,3,4,5,6]
			
			
			// 第二種 利用... + unshift完成
			arr3.unshift(...arr4)
			arr3 //[1,2,3,4,5,6]
            
			// 第三種:利用apply + unshift
			Array.prototype.unshift.apply(arr3, arr4)
			arr3 // 4,5,6,1,2,3
			// 等價於:
			arr3.unshift.apply(arr3, arr4)

 

三、字符串

1、實現了split()的作用,把一個字符串分割成字符串數組。

ES6之前,我們通常通過split()方法將一個字符串分割成字符串數組,如下:

let str = "today";
let splitStr_1 = str.split("");
splitStr_1 // ["t", "o", "d", "a", "y"]

ES6通過...也可以將將字符串轉化爲真正的數組。

let splitStr_2 = [...str];
splitStr_2 // ["t", "o", "d", "a", "y"]

2、說明:

與解構賦值結合起來生成數組,此處具體不討論。後續再總結。

如果擴展運算符後面是一個空數組,則不產生任何效果。

注意,只有函數調用時,擴展運算符纔可以放在圓括號中,否則會報錯。

 

四、使用於函數調用->參數

let params = [9, 2];

function sub(x, y) {
		return x - y
}
sub(...params); // 7	

 

五、在一些應用中替代函數的apply方法

典型的一個例子是利用Math.max.apply()獲取數組最大/小值。 Math.max()與Max.min()雖然能取到最值;但是不支持數組;所以es5中這樣實現:

Math.max.apply(null, [12, 90, 33]) // 77
// 等價於Math.max(12, 90, 33);  //90
// es6中通過擴展運算符解決Math.max()與Max.min()中不能用數組的困境,
Math.max(...[14, 90, 33]) //90
			

以上只是一些最基本的總結,其他的不在這裏說明,由於總項目遇到數組合並,就在這裏總結記錄下。

總之,相對於ES5,ES6可以用更少的代碼實現更多,所以大家多多去學習下。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章