ES6學習總結(二)

關於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

  1. 函數做爲全局函數被調用時,this指向全局對象code

  2. 函數做爲對象中的方法被調用時,this指向該對象orm

  3. 函數做爲構造函數的時候,this指向構造函數new出來的新對象

  4. 還能夠經過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。

相關文章
相關標籤/搜索