iT邦幫忙

2021 iThome 鐵人賽

DAY 18
0
Modern Web

從零開始的JS學習之路系列 第 18

[Day18] 箭頭函式

Arrow Function

這個從 ES6 開始新增的一種寫法,叫做 Arrow Function expression 箭頭函式,主要有兩個特性:

  • 更簡短的函式寫法
  • this 變數強制綁定

更簡短的寫法為何呢?
改寫成箭頭函式可變成 concise body 或者平常使用的 block body,兩者的差異在於:

  1. concise body 語法會內建 "return"
  2. block body 需要明確的 "return" 宣告。
    舉個一般函式有兩個參數的例子,把 function 拿掉留下參數,並用箭頭 => 取代大括號 () 及 return:
let square1 = function (x, y) {
  return x * y;
}
// 改寫成箭頭函式
// 1. concise body 語法會內建 return
let square1 = (x, y) => x * y;

// 2. block body 要記得加上 return
let square1 = (x, y) => {
  return x * y;
}

在只有一個參數時()可加也可不加,(單一參數) => { 陳述式; },或單一參數 => { 陳述式; },如下例:

let square2 = function (number) {
  return number * number;
}
// 改寫成箭頭函式 
let square2 = (number) => number * number;
// 不加 ()
let square2 = number => number * number;

而如果遇到這個函式不需要參數的狀況,還是要留一個空括號給箭頭函式,() => { 陳述式 }:

let square3 = function () {
  console.log("Hellow World");
}
// 若無參數,就一定要加括號:
let square3 = () => console.log("Hellow World");

至於 this 似乎是很大一個坑,等比較清楚後再好好的寫。

參考資料

008天重新認識JavaScript
MDN-箭頭函式


上一篇
[Day17] 一級函式
下一篇
[Day19] 參數(上)
系列文
從零開始的JS學習之路30

尚未有邦友留言

立即登入留言