iThome
鐵人賽
30天
寫一個好的程式基礎還是重要的吧!今天來講一些有關Function的事情吧!
在寫JS中常用的一個技巧,JavaScript是一個事件驅動 (Event-driven) 的程式語言,當瀏覽器載入網頁開始讀取後,載入JS codes
JavaScript中function也代表一個物件,而可以作為參數去傳遞給其他的function去執行稱為callback function (回呼)
當然,function可以作為參數,也可以作為回傳值。
其實是相同的,只是callback function可以寫在指定的時間上觸發。例如說我要先做完A事件之後才呼叫B事件,可以應用在同步與非同步。
function eventA (callback){
console.log('這是事件A...')
callback()
}
function eventB (){
console.log('這是事件B...')
}
eventA(eventB)
輸出結果:
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 function邏輯較為複雜比較難維護,盡量比免發生巢狀呼叫,以免產生callback hell的情況
圖片來源:Callback Hell in JavaScript | Asynchronous JavaScript with Callbacks in Hindi
這是我自從寫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
兩者的結果是相同的
今天的內容就到這邊了,突然發現已經第6天了,剩下的時間不多,很像要來快點切入正題了?,該來稍微衝刺一下,希望我能夠完整撐完這次鐵人賽!
對資安或Mapbox有興趣的話也可以觀看我們團隊的鐵人發文喔~