tags: 鐵人賽 React javascript nodejs

鐵人賽第20天，又到了新的里程碑。因為在React使用率相當高，一定要把這個章節好好跟各位分享一下！

先來認識一下單行箭頭函示

• 箭頭函示可以讓我們寫出更精簡的function，只要()加上=>就可以寫出最精簡的函式陳述句，先來看看下面這個例子

• 注意: 如果只有一個輸入變數，不加()括號也是沒問題！

// 傳統的寫法，需要大括號，不夠帥
function hello(b){
  return "Hello~"+b;
}


// 箭頭函式，加了=>直接回傳字串合併的部分，不用{}及return
let sayHello = (b)=>"Hello~"+b;  //<--其實可以不用加()，但我的習慣是加上去，讓code可讀性更高


console.log(hello("world")); // Hello~world
console.log(sayHello("world")); // Hello~world

多行的箭頭函式

• 要寫多行的箭頭函式，加上{}花括號，搭配個return即可

let sum = (a,b,c)=>{  //<--花括號{}
  let result = a+b+c; 
  return result;      //<-- return你的結果
}

console.log(sum(1,2,3)); //6

來個複雜的運用

• 建立一個func，這個func會依照不同的輸入值，來決定return不同的func，讓程式碼更精簡。

• 先來看看傳統的寫法，至少需要16行

function sayYes(){
  //... do something about yes
  return "Yes~I do!!";
}

function sayNo(){
  //... do something about no~~~
  return "Sorry...>^<";
}

function choice(status){
  return status?sayYes:sayNo
}

let myAns = choice(false)
console.log(myAns()) //Sorry...>^<

• 來看看箭頭函式，8行搞定，帥成這樣，還不給自己掌聲一下

let choice = (status)=>{
  return status?
  ()=>"Yes~I do!!":
  ()=>"Sorry...>^<";
}

let myAns = choice(true)
console.log(myAns()) //Yes~I do!!

使用時機

• Javascript允許我們在function之中定義另一個function，我們在建立React functional component時，不免會需要一個控制事件的func，這時，你可以箭頭函式就派得上用場，ex:

import React from 'react'

export default function index() {
  return (
    <div>
      <input onChange={()=>console.log("Input的onChange事件被觸發")}>
    </div>
  )
}

• 如果是比較複雜的事件函式，又不想寫在functional component之外，這時，我會用箭頭函式來定義，讓它長得像變數，程式碼更加俐落

import React from 'react'

export default function index() {
  let handleFunc= ()=>{
  //... do something
  //...
  return console.log("Input的onChange事件被觸發");
  }
  
  return (
    <div>
      <input onChange={handleFunc}>
    </div>
  )
}

結論

• 今天我們探討了JS的 箭頭函式，熟練它，能讓你撰寫出更加俐落的程式碼，好東西～怎能錯過呢!
• 鐵人賽第20天，比賽已經完成了三分之二了，很快就要往最後的十天邁進了，堅持了20天真的不簡單，你即將脫胎換骨，成為React的老手～Rock~~~