技術標籤：前端js

展開運算子的加入可以使我們在寫JS程式碼時更加簡潔靈活。可用於函式呼叫、解構賦值等方面

謹慎使用物件展開符，其和一般的引用傳遞過程有一定的區別

一、展開運算子的拷貝機制

例項：

  <script>
    let obj1 = {
      attri1: [6, 6, 0],
      attri2: 4,
      attri4: 5
    }
    let obj2 = { ...obj1 }
    // 因js的解析順序，所以1obj2的輸出結果是賦值後的結果
    console.log('1obj2: ', obj2)
    obj2.attri2 = 888
    obj2.attri1[0] = 7
    // 因展開運算子的拷貝，能拷貝簡單資料型別，對於複雜資料型別僅拷貝其引用。
    // 所以對obj2的資料重新賦值，obj1中attri1值變化了，而attri2，attri4未變
    console.log('obj1:', obj1)
    console.log('2obj2: ', obj2)
  </script>
 

輸出結果：

1obj2：

obj1：

2obj2：

參考https://blog.csdn.net/a715167986/article/details/90438813

二、應用

1、函式呼叫中使用展開運算子

在以前我們會使用apply方法來將一個數組展開成多個引數：

function test(a, b, c) { }
var args = [0, 1, 2];
test.apply(null, args);

如上，我們把args陣列當作實參傳遞給了a,b,c，這邊正是利用了Function.prototype.apply的特性。

不過有了ES6，我們就可以更加簡潔地來傳遞陣列引數：

function test(a,b,c) { }
var args = [0,1,2];
test(...args);
 

我們使用...展開運算子就可以把args直接傳遞給test()函式。

2、陣列字面量中使用展開運算子

在ES6的世界中，我們可以直接加一個數組直接合併到另外一個數組當中：

var arr1=['a','b','c'];
var arr2=[...arr1,'d','e']; //['a','b','c','d','e']

展開運算子也可以用在push函式中，可以不用再用apply()函式來合併兩個陣列：

var arr1=['a','b','c'];
var arr2=['d','e'];
arr1.push(...arr2); //['a','b','c','d','e']

3、用於解構賦值

解構賦值也是ES6中的一個特性，而這個展開運算子可以用於部分情景：

let [arg1,arg2,...arg3] = [1, 2, 3, 4];
arg1 //1
arg2 //2
arg3 //['3','4']

展開運算子在解構賦值中的作用跟之前的作用看上去是相反的，將多個數組項組合成了一個新陣列。

不過要注意，解構賦值中展開運算子只能用在最後：

let [arg1,...arg2,arg3] = [1, 2, 3, 4]; //報錯

4、類陣列物件變成陣列

展開運算子可以將一個類陣列物件變成一個真正的陣列物件：

var list=document.getElementsByTagName('div');
var arr=[..list];

list是類陣列物件，而我們通過使用展開運算子使之變成了陣列。

5、ES7草案中的物件展開運算子

ES7中的物件展開運算子符可以讓我們更快捷地操作物件：

let {x,y,...z}={x:1,y:2,a:3,b:4};
x; //1
y; //2
z; //{a:3,b:4}

如上，我們可以將一個物件當中的物件的一部分取出來成為一個新物件賦值給展開運算子的引數

同時，我們也可以像陣列插入那樣將一個物件插入另外一個物件當中：

let z={a:3,b:4};
let n={x:1,y:2,...z};
n; //{x:1,y:2,a:3,b:4}

另外還要很多用處，比如可以合併兩個物件：

let a={x:1,y:2};
let b={z:3};
let ab={...a,...b};
ab //{x:1,y:2,z:3}

參考：https://www.cnblogs.com/mingjiezhang/p/5903026.html