目錄

• 什麼是spread 和rest運算子
  
• 陣列的擴充套件運算子
  
• rest運算子（收集作用）
  
• spread運算子（展開作用）
  
• 物件的擴張運算子
  
• 淺克隆
  
• 深克隆
  
• 總結

什麼是spread 和rest運算子

spread和rest運算子在ES6中，都用(...)表示，其中spread為擴充套件(展開)運算子，rest為剩餘(收集)運算子。在不同的地方使用此運算子有不同的作用，可以從讀和寫兩個角度考慮。其中寫操作有收集作用，讀操作有展開作用。在ES6中，(...)運算子只對陣列有效，ES7中添加了對物件的擴充套件。

陣列的擴充套件運算子

rest運算子（收集作用）

在沒有時使用(...)運算子時，要實現一個求和的功能函式，傳入的引數不定，只能使用arguments。例如：

function sum(){
	let sumNumber=0;
    for(let i=0;i<arguments.length;i++){
        sumNumber += arguments[i];
    }
    return sumNumber;
}
console.log(sum(1,2,3));	//6
console.log(sum(4,5,6,7,8));	//30

當使用rest運算子時，我們的程式碼可以簡潔很多：

function sum(...arg){
	let sumNumber=0;
   	arg.forEach(function(ele){
        sumNumber+
 
=ele;
    })
    return sumNumber;
}
console.log(sum(1,6,8));	//30

此時傳入的引數將會被寫入到arg中，並且形成一個數組。我們可以列印arg：

function sum(...arg){
    console.log(arg);
}
console.lwww.cppcns.comog(sum(1,3));	// (3)[1,3]
console.log(sum(4,8));	//(5)[4,8]

如果我們傳入的引數有必須要傳入的項，我們可以在形參的最後一位使用rest運算子：

function test(a,b,...arg) {
	console.log(a,arg);
}
test(1,3,4,8);//1 2 (6)[3,8]

可以看到輸出的a,b為實參的前兩項，後面傳入的引數都被轉化為陣列存入到arg中。

spread運算子（展開作用）

let arr=[1,5];
console.log(arr);	//(5)[1,5]
console.log(...arr);	// 1 2 3 4 5

可以看到，當使用了(...)運算子時，它會將陣列展開並輸出。

當我們想將數組合並時，傳統的做法：

let arr1=[1,3];
let arr2=[5,8];
let arr3=[].arr3.concat(arr1,arr2);	//相當於let arr3=new Array();arr3.concat(arr1,arr2);
console.log(arr3);	//(7)[1,8]

使用(...)運算子的做法：

let arr1=[1,8];
let arr3=[...arr1,...arr2];
console.log(arr3);	//(7)[www.cppcns.com1,8]

我們來看看它是怎麼實現的，我們可以使用babel來將ES6語法轉換為ES5:

"use strict";

var arr1 = [1,3];
var arr2 = [5,8];
var arr3 = [].concat(arr1,arr2);

可以看到它的實現原理也是陣列的concat方法。所以(...)運算子是一個語法糖，不會影響原來的功能。

物件的擴張運算子

淺克隆

在ES7中，(...)運算子支援對物件的擴張。

let school={	
    name:'xxx大學'，
    history:'50'
};
let teacher={
    leader:{
        name:'xx校長'，
        age:'40',},personNum:60
};

我們如果想要將上述物件克隆到另一個物件中，傳統的做法是自己寫一個clone函式，或者使用中的extend方法。現在我們只需要使用(...)運算子即可完成。

let obj={
    ...school,...teacher
}
console.log(obj);	/*  Object
					history: "50"
					leader: {name: "xx校長",age: "40"}
					name: "xxx大學"
					personNum: 60
					__proto__: Object*/

可以看到，使用(...)運算子可以輕易的完成克隆，但此克隆是一個淺克隆。例如：

obj.leader.name="xxx";
console.log(obj);	/*history: "50"
					leader: {name: "xxx",age: "40"}
					name: "xxx大學"
					personNum: 60
					__proto__: Object */
console.log(teacher); /*leader: {name: "xxx",age: "40"}
						personNum: 60
						__proto__: Object */

在ES6中也有一個淺克隆的方法：Object.assign({ },obj1,obj2,...)

它會將後面的物件克隆到第一個物件裡。

let school={	
    name:'xxx大學'，
    history:'50'
};
let teacher={
    leader:{
        name:'xx校長'，
        age:'40',personNum:60
};
let obj={};
Object.assign(obj,school,teacher);
console.log(obj);	/*history: "50"
					leader: {name: "xx校長",age: "40"}
					name: "xxx大學"
					personNum: 60
					__proto__: Object*/

可以看到也完成了克隆。

深克隆

當我們修改obj中leader的name值時，原來teacher物件中相應的值也發生了改變。如果想要實現深克隆，我們可以對修改一下上述程式碼：

let school={	
    name:'xxx大學'，
    history:'50'
};
let leader={
     name:'xx校長'，
       age:'40',}
let teacher={
    leader:{
        ...leader
    }
    personNum:60
};
let obj={
    ...school,...teacher,leader:{
        ...leader
    }
}

console.log(obj);	/*history: "50"
					leader: {name: "xx校長",age: "40"}
					name: "xxx大學"
            		personNum: 60
					__proto__: Object*/

obj.leader.name="xxx";

cosnole.log(obj);	/*history: "50"
					leader: {name: "xxx",age: "40"}
					name: "xxx大學"
					personNum: 60
					__proto__: Object*/
console.log(leader);.	/*age: "40"
						name: "xx校長"
						__proto__: Object*/
console.log(teacher);	/*leader: {name: "xx校長",age: "40"}
						personNum: 60
						__proto__: Object*/

可以看到，我們改變了obj中leader的name值，只在obj物件中發生了改變，teacher物件和leader物件並沒有發生改變。
如果有很多層的引用值，並不推薦此方法，可以自己書寫一個深克隆方法，當然也有另一個方法，比較另闢蹊徑。可以使用ON先將要克隆的物件轉化為一個字串，然後再轉化為物件，這樣新得到的物件和原來得物件也沒有關係。

let teacher={
    leader:{
        name:'xx校長',age:'40',}
    personNum:60
};
let obj=JSON.parse(JSON.stringify(teacher));
console.log(obj);	/*leader: {name: "xx校長",age: "40"}
					personNum: 60
					__proto__: Object*/

obj.leader.name="xxx";

console.log(obj.leader.name);	//"xxx"
console.log(teacher.leader.name);	//"xx校長"

但是這個方法對含有函式(function())、正則(reg)、特殊物件(new Data())的物件進行克隆時，會丟失上面所說的屬性。如果沒有上面的屬性，可以使用此方法。

總結

到此這篇關於ES6擴充套件運算子的文章就介紹到這了,更多相關ES6擴充套件運算子內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！