本文小編為大家詳細(xì)介紹“ES6的擴展運算符怎么使用”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“ES6的擴展運算符怎么使用”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識吧。

成都創(chuàng)新互聯(lián)公司不只是一家網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司；我們對營銷、技術(shù)、服務(wù)都有自己獨特見解，公司采取“創(chuàng)意+綜合+營銷”一體化的方式為您提供更專業(yè)的服務(wù)！我們經(jīng)歷的每一步也許不一定是最完美的，但每一步都有值得深思的意義。我們珍視每一份信任，關(guān)注我們的成都網(wǎng)站制作、網(wǎng)站建設(shè)質(zhì)量和服務(wù)品質(zhì)，在得到用戶滿意的同時，也能得到同行業(yè)的專業(yè)認(rèn)可，能夠為行業(yè)創(chuàng)新發(fā)展助力。未來將繼續(xù)專注于技術(shù)創(chuàng)新，服務(wù)升級，滿足企業(yè)一站式全網(wǎng)營銷推廣需求，讓再小的成都品牌網(wǎng)站建設(shè)也能產(chǎn)生價值！

什么是spread 和rest運算符

spread和rest運算符在ES6中，都用(...)表示，其中spread為擴展(展開)運算符，rest為剩余(收集)運算符。在不同的地方使用此運算符有不同的作用，可以從讀和寫兩個角度考慮。其中寫操作有收集作用，讀操作有展開作用。在ES6中，(...)運算符只對數(shù)組有效，ES7中添加了對對象的擴展。

數(shù)組的擴展運算符

rest運算符（收集作用）

在沒有時使用(...)運算符時，要實現(xiàn)一個求和的功能函數(shù)，傳入的參數(shù)不定，只能使用arguments。例如：

function sum(){
	let sumNumber=0;
    for(let i=0;i
當(dāng)使用rest運算符時，我們的代碼可以簡潔很多：
function sum(...arg){
	let sumNumber=0;
   	arg.forEach(function(ele){
        sumNumber+=ele;
    })
    return sumNumber;
}
console.log(sum(1,2,3));	//6
console.log(sum(4,5,6,7,8));	//30
此時傳入的參數(shù)將會被寫入到arg中，并且形成一個數(shù)組。我們可以打印arg：
function sum(...arg){
    console.log(arg);
}
console.log(sum(1,2,3));	// (3) [1, 2, 3]
console.log(sum(4,5,6,7,8));	//(5) [4, 5, 6, 7, 8]
如果我們傳入的參數(shù)有必須要傳入的項，我們可以在形參的最后一位使用rest運算符：
function test(a, b, ...arg) {
	console.log(a,b,arg);
}
test(1,2,3,4,5,6,7,8);//1 2 (6) [3, 4, 5, 6, 7, 8]
可以看到輸出的a,b為實參的前兩項，后面?zhèn)魅氲膮?shù)都被轉(zhuǎn)化為數(shù)組存入到arg中。
spread運算符（展開作用）
let arr=[1,2,3,4,5];
console.log(arr);	//(5) [1, 2, 3, 4, 5]
console.log(...arr);	// 1 2 3 4 5
可以看到，當(dāng)使用了(...)運算符時，它會將數(shù)組展開并輸出。
當(dāng)我們想將數(shù)組合并時，傳統(tǒng)的做法：
let arr1=[1,2,3];
let arr2=[5,6,7,8];
let arr3=[].arr3.concat(arr1,arr2);	//相當(dāng)于let arr3=new Array();arr3.concat(arr1,arr2);
console.log(arr3);	//(7) [1, 2, 3, 5, 6, 7, 8]
使用(...)運算符的做法：
let arr1=[1,2,3];
let arr2=[5,6,7,8];
let arr3=[...arr1,...arr2];
console.log(arr3);	//(7) [1, 2, 3, 5, 6, 7, 8]
我們來看看它是怎么實現(xiàn)的，我們可以使用babel來將ES6語法轉(zhuǎn)換為ES5:
"use strict";

var arr1 = [1, 2, 3];
var arr2 = [5, 6, 7, 8];
var arr3 = [].concat(arr1, arr2);
可以看到它的實現(xiàn)原理也是數(shù)組的concat方法。所以(...)運算符是一個語法糖，不會影響原來的功能。
對象的擴張運算符
淺克隆
在ES7中，(...)運算符支持對對象的擴張。
let school={	
    name:"xxx大學(xué)"，
    history:"50"
};
let teacher={
    leader:{
        name:"xx校長"，
        age:"40",
    },
    personNum:60
};
我們?nèi)绻胍獙⑸鲜鰧ο罂寺〉搅硪粋€對象中，傳統(tǒng)的做法是自己寫一個clone函數(shù)，或者使用jQuery中的extend方法。現(xiàn)在我們只需要使用(...)運算符即可完成。
let obj={
    ...school,
    ...teacher
}
console.log(obj);	/*  Object
					history: "50"
					leader: {name: "xx校長", age: "40"}
					name: "xxx大學(xué)"
					personNum: 60
					__proto__: Object*/
可以看到，使用(...)運算符可以輕易的完成克隆，但此克隆是一個淺克隆。例如：
obj.leader.name="xxx";
console.log(obj);	/*history: "50"
					leader: {name: "xxx", age: "40"}
					name: "xxx大學(xué)"
					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大學(xué)"，
    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大學(xué)"
					personNum: 60
					__proto__: Object*/
可以看到也完成了克隆。
深克隆
當(dāng)我們修改obj中l(wèi)eader的name值時，原來teacher對象中相應(yīng)的值也發(fā)生了改變。如果想要實現(xiàn)深克隆，我們可以對修改一下上述代碼：
let school={	
    name:"xxx大學(xué)"，
    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大學(xué)"
            		personNum: 60
					__proto__: Object*/

obj.leader.name="xxx";

cosnole.log(obj);	/*history: "50"
					leader: {name: "xxx", age: "40"}
					name: "xxx大學(xué)"
					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中l(wèi)eader的name值，只在obj對象中發(fā)生了改變，teacher對象和leader對象并沒有發(fā)生改變。
如果有很多層的引用值，并不推薦此方法，可以自己書寫一個深克隆方法，當(dāng)然也有另一個方法，比較另辟蹊徑。可以使用JSON先將要克隆的對象轉(zhuǎn)化為一個字符串，然后再轉(zhuǎn)化為對象，這樣新得到的對象和原來得對象也沒有關(guān)系。
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校長"
但是這個方法對含有函數(shù)(function())、正則(reg)、特殊對象(new Data())的對象進行克隆時，會丟失上面所說的屬性。如果沒有上面的屬性，可以使用此方法。
讀到這里，這篇“ES6的擴展運算符怎么使用”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領(lǐng)會，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
            
            
                        

            分享標(biāo)題：ES6的擴展運算符怎么使用            

            路徑分享：http://www.xueling.net.cn/article/jihhji.html