簡單介紹 Arrow Function

好用的 Javascript 語法介紹給大家，先看看一個範例(將HTML <p> tag 的背景色設成紅色):

HTML:
   <p>1234567</p>

function ChangeColor(obj, clr)
{
    obj.css('background-color',clr)
}

JQUERY:

$(function(){
    ChangeColor($('p'), red);
});

這是正規的寫法，利用 arrow function 則寫成下面:

var ChangeColor = (obj, clr) => obj.css('background-color',clr)

這樣看起來是不是簡潔多了呢? 重點就在於 function 改用 => 來代替，只有一個參數時連括號也可省略(這裡用了兩個參數 obj clr 所以不能省哦)，底下這個例子是在示範多個回應式，就請大家自請參考領略了 ^^

HTML:
   <p id="#p1">1234567</p>
   <p id="#p2">ABCDEF</p>

JQUERY:

var ChangeColor2 = (obj1, obj2) => {obj1.css('background-color',red), obj2.css('background-color',blue)

$(function(){
    ChangeColor2($('#p1'), $('#p2'));
});

另外介紹需要回傳值時，要注意到使用  function ( ) => (( ) => "footbar")( ) 回傳 "footbar" 要在
function 前後使用括號，並且在最後使用一個 ( )，整個範例內容如下:

HTML:

<p>777</p>
<div>555</div>

JQUERY:

var fun = (a,b) => (() => b.css('background-color', "green"))()

$(function() {
  fun($('p'),$('div'))
});