ES6擴展運算符的使用方法示例
什麼是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,2,3)); //6 console.log(sum(4,5,6,7,8)); //30
此時傳入的參數將會被寫入到arg中,並且形成一個數組。我們可以打印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]
如果我們傳入的參數有必須要傳入的項,我們可以在形參的最後一位使用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為實參的前兩項,後面傳入的參數都被轉化為數組存入到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
可以看到,當使用瞭(…)運算符時,它會將數組展開並輸出。
當我們想將數組合並時,傳統的做法:
let arr1=[1,2,3]; let arr2=[5,6,7,8]; let arr3=[].arr3.concat(arr1,arr2); //相當於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]
我們來看看它是怎麼實現的,我們可以使用babel來將ES6語法轉換為ES5:
"use strict"; var arr1 = [1, 2, 3]; var arr2 = [5, 6, 7, 8]; var arr3 = [].concat(arr1, arr2);
可以看到它的實現原理也是數組的concat方法。所以(…)運算符是一個語法糖,不會影響原來的功能。
對象的擴張運算符
淺克隆
在ES7中,(…)運算符支持對對象的擴張。
let school={ name:'xxx大學', history:'50' }; let teacher={ leader:{ name:'xx校長', age:'40', }, personNum:60 };
我們如果想要將上述對象克隆到另一個對象中,傳統的做法是自己寫一個clone函數,或者使用jQuery中的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對象並沒有發生改變。
如果有很多層的引用值,並不推薦此方法,可以自己書寫一個深克隆方法,當然也有另一個方法,比較另辟蹊徑。可以使用JSON先將要克隆的對象轉化為一個字符串,然後再轉化為對象,這樣新得到的對象和原來得對象也沒有關系。
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擴展運算符內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- JavaScript Spread Syntax (…)的十種使用方法
- JavaScript擴展運算符的學習及應用詳情(ES6)
- ES6擴展運算符的理解與使用場景
- 關於ES6中的箭頭函數超詳細梳理
- js中如何復制一個數組(淺復制、深復制)