快捷導(dǎo)航

ES6擴(kuò)展運(yùn)算符的使用方法示例

更新時(shí)間：2021年07月12日 15:48:20 作者：若夢(mèng)4296

es6新增加了一個(gè)運(yùn)算符,叫做擴(kuò)展運(yùn)算符,這個(gè)運(yùn)算符用在數(shù)組前面,會(huì)把數(shù)組展開變成各個(gè)獨(dú)立的值,這篇文章主要給大家介紹了關(guān)于ES6擴(kuò)展運(yùn)算符的相關(guān)資料,需要的朋友可以參考下

什么是spread 和rest運(yùn)算符

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

數(shù)組的擴(kuò)展運(yùn)算符

rest運(yùn)算符（收集作用）

在沒(méi)有時(shí)使用(...)運(yùn)算符時(shí)，要實(shí)現(xiàn)一個(gè)求和的功能函數(shù)，傳入的參數(shù)不定，只能使用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

當(dāng)使用rest運(yùn)算符時(shí)，我們的代碼可以簡(jiǎn)潔很多：

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í)傳入的參數(shù)將會(huì)被寫入到arg中，并且形成一個(gè)數(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ù)有必須要傳入的項(xiàng)，我們可以在形參的最后一位使用rest運(yùn)算符：

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為實(shí)參的前兩項(xiàng)，后面?zhèn)魅氲膮?shù)都被轉(zhuǎn)化為數(shù)組存入到arg中。

spread運(yùn)算符（展開作用）

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)使用了(...)運(yùn)算符時(shí)，它會(huì)將數(shù)組展開并輸出。

當(dāng)我們想將數(shù)組合并時(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]

使用(...)運(yùn)算符的做法：

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]

我們來(lái)看看它是怎么實(shí)現(xiàn)的，我們可以使用babel來(lái)將ES6語(yǔ)法轉(zhuǎn)換為ES5:

"use strict";

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

可以看到它的實(shí)現(xiàn)原理也是數(shù)組的concat方法。所以(...)運(yùn)算符是一個(gè)語(yǔ)法糖，不會(huì)影響原來(lái)的功能。

對(duì)象的擴(kuò)張運(yùn)算符

淺克隆

在ES7中，(...)運(yùn)算符支持對(duì)對(duì)象的擴(kuò)張。

let school={	
    name:'xxx大學(xué)'，
    history:'50'
};
let teacher={
    leader:{
        name:'xx校長(zhǎng)'，
        age:'40',
    },
    personNum:60
};

我們?nèi)绻胍獙⑸鲜鰧?duì)象克隆到另一個(gè)對(duì)象中，傳統(tǒng)的做法是自己寫一個(gè)clone函數(shù)，或者使用jQuery中的extend方法?，F(xiàn)在我們只需要使用(...)運(yùn)算符即可完成。

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

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

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中也有一個(gè)淺克隆的方法：Object.assign({ },obj1,obj2,...)

它會(huì)將后面的對(duì)象克隆到第一個(gè)對(duì)象里。

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

可以看到也完成了克隆。

深克隆

當(dāng)我們修改obj中l(wèi)eader的name值時(shí)，原來(lái)teacher對(duì)象中相應(yīng)的值也發(fā)生了改變。如果想要實(shí)現(xiàn)深克隆，我們可以對(duì)修改一下上述代碼：

let school={	
    name:'xxx大學(xué)'，
    history:'50'
};
let leader={
     name:'xx校長(zhǎng)'，
       age:'40',
}
let teacher={
    leader:{
        ...leader
    }
    personNum:60
};
let obj={
    ...school,
    ...teacher,
    leader:{
        ...leader
    }
}

console.log(obj);	/*history: "50"
					leader: {name: "xx校長(zhǎng)", 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校長(zhǎng)"
						__proto__: Object*/
console.log(teacher);	/*leader: {name: "xx校長(zhǎng)", age: "40"}
						personNum: 60
						__proto__: Object*/

可以看到，我們改變了obj中l(wèi)eader的name值，只在obj對(duì)象中發(fā)生了改變，teacher對(duì)象和leader對(duì)象并沒(méi)有發(fā)生改變。
如果有很多層的引用值，并不推薦此方法，可以自己書寫一個(gè)深克隆方法，當(dāng)然也有另一個(gè)方法，比較另辟蹊徑。可以使用JSON先將要克隆的對(duì)象轉(zhuǎn)化為一個(gè)字符串，然后再轉(zhuǎn)化為對(duì)象，這樣新得到的對(duì)象和原來(lái)得對(duì)象也沒(méi)有關(guān)系。

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

obj.leader.name="xxx";

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

但是這個(gè)方法對(duì)含有函數(shù)(function())、正則(reg)、特殊對(duì)象(new Data())的對(duì)象進(jìn)行克隆時(shí)，會(huì)丟失上面所說(shuō)的屬性。如果沒(méi)有上面的屬性，可以使用此方法。