es6（三）：es6中函數的擴展（參數默認值、rest參數、箭頭函數）

1.函數可以設置參數默認值

function test1(x,y=1){
      console.log(x,y)
    }
    test1(10)//10 1

2.rest參數：形式為...變量名

function test2(a,...b){
      for(let i of b){
        a+=i
      }
      console.log(a)
    }
    // 說明傳入的參數是一個一個的傳入，而不是數組形式
    test2(100,1,2,3) //106
    test2(100,[1,2,3,4])//1001,2,3,4

注意：如果有rest參數，那么它一定是最后一個參數

function test3(a,...b,c){}//Uncaught SyntaxError: Rest parameter must be last formal parameter

 

功能形如 “rest參數的逆運算”:

function test21(a,b){
      console.log(a+b)
    }
    // ...后面跟上數組好比是rest參數的逆運算
    test21(...[1,2])//3

 

3.箭頭函數(=>)

例一：

var test4=v => v
    // 相當於
    // var test4=function (v){
    //   return v
    // }
    console.log(test4(100))//100

例二：

var test5=()=>1
    // 相當於
    // var test5=function (){
    //   return 1
    // }
    console.log(test5())//1

例三：

var test6=(num1,num2)=>num1*num2
    // 相當於
    // var test6=function (num1,num2){
    //   return num1+num2
    // }
    console.log(test6(2,6))//12

注意：大括號被解釋成代碼塊，所以返回對象時要加上圓括號，否則報錯

// var test7=()=>{name:1,age:100}//報錯
    var test7=()=>({name:1,age:100})//正確寫法
    console.log(test7())//{name: 1, age: 100}

如果函數代碼塊內有 多條語句，用上大括號

var test8=(n1,n2)=>{return n1+n2}
    console.log(test8(1,10))//11
    var test9=(n1,n2)=>{ let a=n1*n2+n2*n2; console.log(a)}
    test9(1,10)//110

 

重點！注意：箭頭函數中this指向的是定義時所在的對象，不同於普通函數this指向的是運行時所在對象

function Test10(){
      this.name='apple',
      this.num=10,
      setTimeout(()=>{
        //箭頭函數this始終指向定義時所在對象，即Test10
        console.log('arrow function',this.num+1)
      },1000);
      setTimeout(function(){
        //普通函數在下面這種情況下，指向了全局對象window；嚴格模式下指向undefined
        // 閉包
        console.log('normal function',this.num+1)
      },1000)
    }
    let te=new Test10()
//arrow function 11    
//normal function NaN