關於ES6的學習總結,昨天寫了第一篇,主要是關於變量聲明關鍵字let和const,新增類型Symbol以及模板字符串,今天準備寫第二篇,ES6裏面的函數部分,ES6新增了箭頭函數,Rest參數以及參數默認值。javascript
箭頭函數java
關於箭頭函數,之因此這麼稱呼,是由於它就是由一個箭頭來定義的,例如:app
//ES5 function foo(param){ return param*param; } //ES6 箭頭函數 var foo= param => param*param;
上面的代碼簡單比較了ES5中普通函數與ES6箭頭函數的的寫法,很明顯的能夠看出,箭頭函數顯得更加的簡便,箭頭函數中,有一些須要注意的地方:函數
返回值必須明確,而且在大括弧內必須加上return關鍵字,如果省略大括弧,則能夠省略return學習
//返回值的寫法,下面兩種是同樣的 () => "hello world"; () => { return "hello word"; }
當參數的數目不止一個或者沒有的時候,須要用小括弧()包裹this
//沒有參數或者多個參數須要加小括號 var foo1 = () => "hello world"; var foo1 = () => { return "hello word"; } var foo2 = (param1,param2) => param1*param2;
當返回的是一個對象的時候,須要注意大括弧外面加上()prototype
//返回對象須要函數體外面要加小括號 var foo3 = param => ({key: value})
箭頭函數中this的使用跟普通函數也不同,在JavaScript的普通函數中,都會有一個本身的this值,主要分爲:rest
函數做爲全局函數被調用時,this指向全局對象code
函數做爲對象中的方法被調用時,this指向該對象orm
函數做爲構造函數的時候,this指向構造函數new出來的新對象
還能夠經過call,apply,bind改變this的指向
在箭頭函數中,this屬於詞法做用域,直接由上下文肯定,對於普通函數中指向不定的this,箭頭函數中處理this無疑更加簡單,以下:
//ES5普通函數 function Man(){ this.age=22; return function(){ this.age+1; } } var cala=new Man(); console.log(cala())//undefined //ES6箭頭函數 function Man(){ this.age=22; return () => this.age+1; } var cala=new Man(); console.log(cala())//23
箭頭函數中沒有arguments(咱們能夠用rest參數替代),也沒有原型,也不能使用new 關鍵字,例如:
//沒有arguments var foo=(a,b)=>{return arguments[0]*arguments[1]} console.log(foo(3,5)) //arguments is not defined //沒有原型 var Obj = () => {}; console.log(Obj.prototype); // undefined //不能使用new 關鍵字 var Obj = () => {"hello world"}; var o = new Obj(); // TypeError: Obj is not a constructor
Rest參數
Rest參數名爲剩餘參數,以...爲前綴,上面講過,ES6的箭頭函數中不能使用arguments,咱們能夠用rest參數來替代,例如:
function foo(){ return arguments.length; } console.log(foo(1,2,3)) // 3 var foo= (...rest) => { return rest.length; } console.log(foo(1,2,3)) // 3
在rest參數前面如果有其餘的形式參數,那麼rest參數只能放在最後面:
var foo = (param1,param2,...rest) => { return param1 + param2 + rest.length; }; console.log(foo(1,2,3,4,5)) // 6 var foo = (param1,...rest,param2) => { return param1 + param2 + rest.length; }; console.log(foo(1,2,3,4,5)) // Rest parameter must be last formal parameter
默認參數值
在ES6之前,函數調用時,那些沒有傳遞的參數,JavaScript默認爲undefined,ES6中新增了參數默認值,容許使用默認值來初始化形參
var foo = (param1,param2=10) => { return param1*param2; } console.log(foo(10)) // 100
上面這個例子能夠看到,定義了一個參數相乘的簡單函數,在調用函數的時候,只傳入了第一個參數的值,結果返回100,是由於在函數中第二個參數默認值爲10,若咱們在調用函數的時候沒有顯式的指明參數值,則會默認使用參數默認值。
var foo = (param1,param2=10) => { return param1*param2; } console.log(foo(10,20)) // 200
此次咱們在調用函數大的時候,兩個參數所有傳遞了值,所以返回200。