1. 程式人生 > >ES6學習總結 (二)

ES6學習總結 (二)

直接 fff 中文意思 假設 意思 null strong col 作用

    一:ES6為函數做了哪些擴展

    參數的默認值

  傳統寫法:

function person(n,a){
    var name =n || "zhangsan";
    var age   = a || 25;
    }

這是傳統的實現方式,通過或運算實現,原理:如果運算符||左側為true,直接返回左側的值,否則返回右側的值;但是前提是參數對應的布爾值不能false(比如:數字0,空字符串等轉換成布爾值就是false),因此,這種方式存在不足和缺陷。

    ES6的寫法

function person(name=‘Zhangsan‘,age =25){
    console.log(name,age);
    
    }    
    
    person();                //結果:Zhangsan 25
    person(‘Luxi‘,23);     //結果:  Luxi   23

  上面的案例,我們對person()函數進行兩次調用,區別是有傳參數和沒傳參數,即:沒傳參得到默認值,傳參得到傳入的參數值。

    註意:設定默認值的參數一定要放在最後。

1     function person(age =12){
2          console.log(age);      
3 }
4     person();   //結果:12
5     person(underfined);  //結果:12
6     
7     person(0);   //結果:0
8     person(null);  //結果:null

    看person()函數的4次調用和結果,只有不傳或者傳入“underdfined”的時候才會觸發默認值賦值,得到默認值12,傳入0或者null都不會觸發默認值賦值。

    函數的參數是默認聲明的,聲明過得變量,就不能用let 或者const關鍵字再次聲明,否則會報錯。

  技術分享圖片

          rest參數

rest參數,這是一個新的概念,rest的中文意思是:剩下的部分。 如果用在函數上,就代表是獲取函數剩下部分的參數。具體是什麽意思?我們還是得看案例才好理解,假設現在我們有這樣的一個需求:將一組數字進行求和,然後把求和的結果賦值到一個變量去,我們用rest參數實現:

  技術分享圖片

上面的代碼即是rest參數,它的意思是:在實參中,除了第一個參數以外,剩余的參數都會被...value獲取到

在上面的案例中:sum(res,1,2,3,4),也就是除去實參 res 以外的參數,它們是1,2,3,4一共4個參數。它們全被...values收入囊中,接著,我們打印了values,看到的結果是一個數組:[1,2,3,4],也就是這4個參數被裝在了一個數組中,我們想要使用這4個參數的話,就可以用數組的方法來對他們進行處理,所以我們用了forEach方法對它們進行了循環,並求和,把求和結果存儲到了變量res中,最後我們打印出結果,得到了數字10,也就是數字1,2,3,4的求和結果。

    註意:rest參數必須是函數的最後一個參數,後面不能再跟其他參數

  技術分享圖片

                擴展運算符

上面講到的rest參數,它的表示法使用...(三個點),它除了用在rest參數中,還有其他用途,我們稱這種表示法為擴展運算符,那麽,它還有什麽作用呢? 它一般結合數組使用,把數組的元素用逗號分隔開來,組成一個序列。我們看一下實際案例:

技術分享圖片

上面的sum( )函數是簡單的將兩個數字相加求和,參數是兩個普通的參數x,y,並不是什麽高逼格的rest參數,所以我們運用了擴展運算符...將數組[ 2,3 ] 轉成了 2,3 兩個普通的數列,再傳進sum( )方法,對應上x,y兩個參數。實際上,sum( ...arr ) 的效果相當於sum( 2,3 ) 。

從這個案例我們就可以理解擴展運算符...的作用了,它可以將一個數組轉成一個對應的參數數列。在實際開發中,你可以根據擴展運算符的作用,可以靈活運用,實現各種效果。

              箭頭函數

箭頭函數,這又是一個新概念,ES6給我們介紹一種全新的定義函數的方式,就是用箭頭符號(=>),故得名為箭頭函數。具體怎麽用,我們來看案例:              

技術分享圖片

上面演示了兩種寫法,函數的作用都是一樣的,傳入參數a,直接返回a;第一種傳統的寫法大家都熟悉,我們看看第二種寫法:a=>a; 這裏的第一個a代表是傳進去的參數,箭頭=>後面的a表示函數體;也許大家跟我一樣,很不習慣,但這種寫法確實簡潔了很多。

  如果傳入的參數不止一個,或者函數體不是簡單的返回a,需要做一些其他的運算,含有多條語句的話,怎麽辦?對於這種情況,我們又有另一種處理辦法。舉個例子,假如我們給函數傳入2個參數,然後進行相加運算,我們用箭頭函數來實現:

  技術分享圖片

  註意上面的參數和函數體部分,如果參數超過1個的話,需要用小括號()括起來,函數體語句超過1條的時候,需要用大括號{ }括起來。

  箭頭函數的最大作用就是簡化函數的實現,大大地減少代碼量。來舉個例子對比一下,假設我們現在要對一個數組 [ 1,2,3,4 ] 裏面的數求和,我們分別用傳統的方式和箭頭函數都實現一次,大家看看差別:

  技術分享圖片

總結:ES6為函數的擴展包括:參數的默認值、rest參數、擴展運算符(...)以及箭頭函數。它們有一個共同的有點就是:使得代碼更加簡潔,結合需求靈活使用,可以大大地提高開發效率。

  

ES6學習總結 (二)