展開運算符（spread operator）允許一個表達式在某處展開。展開運算符在多個參數（用于函數調用）或多個元素（用于數組字面量）或者多個變量（用于解構賦值）的地方可以使用。
|
1
2
3
4
5
6
7
|
let obj1 = { value1: 1, value2: 2};let obj2 = {...obj1};console.log(obj2); // {value1: 1, value2: 2} |
上面的用法實際相當于
|
1
|
obj2 = {value1: 1, value2: 2} |
展開運算符的寫法與obj2 = obj1直接賦值的寫法的區別在于如果直接賦值的話，對于引用類型來說，相當于只是賦值了obj1的內存空間地址，當obj2發生改變的時候，obj1也會隨著發生改變。而是用展開運算符寫法的話，由于obj1對象中的屬性類型都是基本類型，相當于重新創建了一個對象，此時obj2發生改變的時候，并不會影響obj1這個對象。但是僅限于其屬性都為基本類型的情況（或者說只進行了一層的深拷貝）。如果該對象中的屬性還有引用類型的話，修改屬性中引用類型的值，則兩個對象的屬性值都會被修改。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
let obj1 = { attri1: [3, 6, 0], attri2: 4, attri4: 5};let obj2 = {...obj1};obj2.attri2 = 888;obj2.attri1[0] = 7;console.log('obj1:', obj1);console.log('obj2:', obj2); |
展開運算符的應用
1.在函數中使用展開運算符
|
1
2
3
4
|
function test(a, b, c){};let arr = [1, 2, 3];test(...arr); |
2.數組字面量中使用展開運算符
|
1
2
3
4
5
6
7
|
let arr1 = [1, 2];let arr2 = [...arr1, 3, 4]; // [1, 2, 3, 4]// 使用push方法let arr1 = [1, 2];let arr2 = [3. 4];arr1.push(...arr2); // [1, 2, 3, 4] |
3.用于解構賦值，解構賦值中展開運算符只能用在最后，否則會報錯。
|
1
2
3
|
// 解構賦值中展開運算符只能用在最后。let [a, b, ...c] = [1, ,2, 3, 4]console.log(a, b, c) // 1, 2, [3, 4] |
4.類數組變成數組
|
1
2
|
let oLis = document.getElementsByTagName("li");let liArr = [...oLis]; |
5.對象中使用展開運算符
ES7中的對象展開運算符符可以讓我們更快捷地操作對象：
|
1
2
3
4
|
let {x,y,...z}={x:1,y:2,a:3,b:4};x; // 1y; // 2z; // {a:3,b:4} |
將一個對象插入另外一個對象當中：
|
1
2
3
|
let z={a:3,b:4};let n={x:1,y:2,...z};console.log(n); //{x:1,y:2,a:3,b:4} |
合并兩個對象:
|
1
2
3
4
|
let a={x:1,y:2};let b={z:3};let ab={...a,...b};console.log(ab); // {x:1,y:2,z:3} |
到此這篇關于JavaScript中展開運算符及應用的實例代碼的文章就介紹到這了,更多相關js展開運算符內容請搜索服務器之家以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持服務器之家！
原文鏈接：https://blog.csdn.net/Gongsheng_m/article/details/112595417
