iT邦幫忙

2024 iThome 鐵人賽

DAY 16
0
佛心分享-刷題不只是刷題

30 天克服前端面試系列 第 16

Day 16 - JavaScript 的匿名函式有哪些應用場景?

  • 分享至 

  • xImage
  •  

匿名函式 anonymous function 是指在 JavaScript 中沒有名稱的函式,通常用於一次性的操作或者作為參數傳遞給其他函式,此外,匿名函式不會在編譯階段被提升到作用域的上方(這是函式表達式的特性),因此它們在程式碼執行時才會被解析。匿名函式有許多應用場景,以下是一些常見的例子:

回調函式 Callback function

匿名函式常用於作為回調函式,當某個操作完成後被執行。

setTimeout(() => {
  console.log("Task Complete");
}, 1000);

這個例子中,箭頭函式 () => {} 就是一個匿名函式,用作 setTimeout 的回調函式,當計時器 1000 ms 後,會執行這個匿名函式。

立即函式 IIFE

立即函式是在定義後就會立刻執行的函式,通常用於創建一個私有作用域,避免變數污染全局作用域。匿名函式在這裡用於定義立即函式。

{function(){(
    var a = 1;
    console.log(a)//1
)}
}();
console.log(a)//a is not defined

高階函式 Higher-order function

高階函式是指接受一個或多個函式作為參數,或者返回函式。匿名函式常用於作為這類函式的回調。
例如:mapfilterreducesort 等方法都接受函式作為參數:

map

const numbers = [1, 2, 3, 4, 5];
const squared = numbers.map((num) => num * num);
console.log(squared); // [1, 4, 9, 16, 25]

filter

const numbers = [1, 2, 3, 4, 5];
const even = numbers.filter((num) => num % 2 === 0);
console.log(even); // [2, 4]

reduce

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((acc, num) => acc + num, 0);
console.log(sum); // 15

sort

const numbers = [3, 1, 4, 1, 5, 9, 2, 6, 5, 3, 5];
const sorted = numbers.sort((a, b) => a - b);
console.log(sorted); // [1, 1, 2, 3, 3, 4, 5, 5, 5, 6, 9]

事件處理 event handler

匿名函式也常用於事件處理器中,這樣可以保持程式碼簡潔,並避免與其他函式名稱產生衝突。

document.getElementById("myButton").addEventListener("click", function () {
  console.log("Button Clicked");
});

匿名函式在這裡用作事件處理函式,當按鈕被點擊時,會執行這個匿名函式。


本文同步於此


上一篇
Day 15 - JavaScript 中 同步 synchronous 與非同步 asynchronous 的差異是什麼?
系列文
30 天克服前端面試16
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言