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可以用更少的代碼實現更多,所以大家多多去學習下。