iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 4
2
Modern Web

透過 ESLint 練習 JavaScript ES6系列 第 4

Day04【ES6 小筆記】箭頭函式 - 基礎使用範例(Arrow function )

ES6 箭頭函式 Arrow function 範例

ES6 箭頭函式

講到 ES6 就不能不知道箭頭函式,它可以讓我們的函式變得更簡短、提升可讀性,但其實蠻多眉眉角角的,以下就提供幾個寫法範例&特性說明!

特色簡介

  1. 寫法為 () => {}
  2. 參數只有一個時,可以省略小括號 ()
  3. 省略大括號 {} 的話,代表直接 return 第一行程式碼
  4. 如果返回值或參數有包含 {} ,需要在外圍加上括號 ()
  5. 如果有多行程式,需要加上大括號 {}

原本的函式寫法

function sayHi() {
  console.log('Hello 你好阿');
}
sayHi(); //Hello 你好阿

箭頭函式的寫法

// 正常寫法
var sayHi = (name) => {
  return name + '你好哇'
}
console.log(sayHi('阿華'))
如果程式碼只有一行,可以省略大括號 {},會直接 return 第一行程式碼
var sayHi = (name) => name + '你好哇'
console.log(sayHi('阿華')); // 阿華你好哇
只有一個參數可以不加小括號()
var sayHi = name => name + '你好哇'
console.log(sayHi('阿華')); // 阿華你好哇
沒有參數或兩個參數以上時,一定要有小括號()
var sayHi = () => '阿華你好哇'
console.log(sayHi()); // 阿華你好哇

var sayHi = (name1,name2) => name1 + name2 + '你好哇'
console.log(sayHi('阿華','萱萱')); // 阿華萱萱你好哇
如果程式碼有多行時,一定要使用大括號{}將它們括起來,並且使用 return 返回
let getYear = () => {
    let date = new Date();
    return date.getFullYear();
}
console.log(getYear()); // 2019
如果要直接 return 物件,必須在物件外面加上括號(),否則會報錯。
// 出現錯誤
let myHome = () => { dog: 1, brother: "豪豪" };

// 正確寫法
let myHome = () => ({ dog: 1, brother: "豪豪" });

ESLint airbnb 箭頭函式規則

  • 8.1 當你必須使用函式表達式或傳遞一個匿名函式時,請使用箭頭函式
  • 8.2 如果函式只使用一行,可以省略大括號{},使用隱藏的回傳
  • 8.3 如果函式跨了多行,請包在大括號{}中,增加可讀性
  • 8.4 如果函式只使用一個參數,省略小括號()
  • 8.5 避免使用比較運算子(<=、>=)造成混淆

參考文章
卡斯伯:箭頭函式 (Arrow functions)
鹹魚:箭頭函數 Arrow Function


上一篇
Day03【ES6 小筆記】JS 組字串好方便!一目瞭然最清楚(模板字串符 template literal)
下一篇
Day05【ES6 小筆記】前端開發者不能不知道的 ES6 是什麼?
系列文
透過 ESLint 練習 JavaScript ES630
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 則留言

0
huli
iT邦新手 3 級 ‧ 2019-09-05 15:27:46

應該是「函式」不是「函示」喔

江江好 iT邦新手 5 級 ‧ 2019-09-05 16:07:32 檢舉

修正好了!謝謝你XDD/images/emoticon/emoticon37.gif

0
ninipopo
iT邦新手 4 級 ‧ 2022-05-19 16:52:14

講解的好簡單易懂,適合我!!/images/emoticon/emoticon02.gif

我要留言

立即登入留言