Day 6 - Callback / Arrow Function

14th鐵人賽

whlshy

團隊IT108xWKE

2022-09-21 18:53:07

673 瀏覽

分享至

tags: `iThome` `鐵人賽` `30天`

寫一個好的程式基礎還是重要的吧！今天來講一些有關Function的事情吧！

Callback Funtion

在寫JS中常用的一個技巧，JavaScript是一個事件驅動 (Event-driven) 的程式語言，當瀏覽器載入網頁開始讀取後，載入JS codes

如一些事件被觸發 (例如點擊、按下鍵盤、視窗大小變動等) 後，才會去呼叫對應的JS Codes (callback function)

JavaScript中function也代表一個物件，而可以作為參數去傳遞給其他的function去執行稱為callback function (回呼)

當然，function可以作為參數，也可以作為回傳值。

先來看看callback function與一般函式的差異

其實是相同的，只是callback function可以寫在指定的時間上觸發。例如說我要先做完A事件之後才呼叫B事件，可以應用在同步與非同步。

function eventA (callback){
    console.log('這是事件A...')
    callback()
}

function eventB (){
    console.log('這是事件B...')
}

eventA(eventB)

輸出結果：

那運用在監聽事件上呢 (addEventListener)

let n = 0

function callback() {
    console.log(n++)
}

addEventListener("click", callback)

當然也可以寫成

let n = 0

addEventListener("click", function (){
    console.log(n++)
})

其他應用

像是setTimeout、setInterval等語法也都運用上callback function的機制，還有一些陣列方法 (map、foreach、filter等) 都是，所以運用範圍算是很廣泛的，也是必要了解的語法之一。

範例

function callback() {
    console.log('Hi!')
}

setTimeout(callback, 1000)
setInterval(callback, 1000)

範例 (陣列)

const arr = [1, 2, 3]

// 方法一
arr.map((a, index) => {
    console.log(a, index)
})

console.log('------')

// 方法二
function callback(a, index) {
    console.log(a, index)
}
arr.map(callback)

輸出結果：

避免Callback Hell

由於callback function邏輯較為複雜比較難維護，盡量比免發生巢狀呼叫，以免產生callback hell的情況

圖片來源：Callback Hell in JavaScript | Asynchronous JavaScript with Callbacks in Hindi

Arrow Funtion

這是我自從寫React以來，常用的寫Function方式，像剛剛callback function裡就有用到了，不曉得眼尖的你有沒有發現呢?？

arrow function是ES6之後所出的新產物，讓JS多了一些新玩法，而我這邊單純稍微介紹一下就好了，畢竟也沒有要很深入來講解arrow function的用法，先暫時只要知道如何使用 (看懂) 就好~

arrow function與一般function差異

// 一般function
function getHello(){
    console.log('hello')
}

// arrow function
const getHello = () => {
    console.log('hello')
}

用法其實大同小異，最基本的用法其實就是(參數1, 參數2, …, 參數N) => { 陳述式; }這麼組合的。

進階用法

稍微來個簡單的變體好了，當如果純粹要return數值的話還有另一種寫法，就是把大括號拿掉就代表要return的值。

const getValue = (x, y) => (x + y)

console.log(getValue(1, 2)) // 3

// 一般寫法對比
const getValue = (x, y) => {
    return (x + y)
}

console.log(getValue(1, 2)) // 3

兩者的結果是相同的