JavaScript 程式札記 : ES6 箭頭函式

閱讀時間約 3 分鐘

什麼是箭頭函式?

在 JavaScript ES6 之前,JavaScript 的函式主要是使用function關鍵字來定義的。而箭頭函式是 JavaScript ES6 中新增的功能,它提供了一種更簡潔的方式來定義函式。

箭頭函式的使用

箭頭函式的語法主要是使用 => 進行定義。例如 :

// 基本寫法
let test1 = (str) => {
return str+ 'A';
}
console.log(test1 ('目前英文字為:'));

// 單行陳述不需要 {}
let test2 = (str) => str+ 'B';
console.log(test2 ('目前英文字為:'));

// 只有一個參數時,可以省略括號
let test3 = str => str + 'C';
console.log(test3 ('目前英文字為:'));

// 無參數時,必須加括號
let test4 = () => '目前英文字為:' + 'D';
console.log(test4());

箭頭函式與一般函式的差別

1. 沒有arguments物件

箭頭函式不具有 arguments 物件,這意味著不能直接訪問函式的參數列表。但可以使用其餘參數的方式來取得參數。

// 傳統函式
function test1(a, b) {
console.log(arguments[0], arguments[1]);
}
test1(1, 2); // 輸出: 1 2

// 箭頭函式
const test2 = (...args) => {
console.log(args[0], args[1]);
}
test2(1, 2); // 輸出: 1 2

2. this 的運用

箭頭函式會繼承上一層作用域的 this ,這與傳統函式不同,傳統函式的預設this是指向 window 物件。

// 傳統函式中的 this
function test1() {
this.value = "ABC!";
this.click = function() {
setTimeout(function() {
console.log(this.value); // 這裡的 this 指向全域物件,所以會輸出 undefined
}, 1000);
}
}
const btn1= new test1();
btn1.click();

// 箭頭函式的 this
function test2() {
this.value = "DEF!";
this.click = function() {
setTimeout(() => {
console.log(this.value); // 這裡的 this 指向 test2 的實例,所以輸出 "DEF"
}, 1000);
}
}
const btn2= new test2();
btn2.click();

😊 感謝你的耐心閱讀,若是你喜歡這篇內容,可以透過以下方式表達你的喜歡 😊

❤️按個愛心|💬留言互動|🔗分享此文|📌追蹤阿梧|☕請喝咖啡

59會員
91內容數
「梧笙」即「吾生」,意即我的生命,朋友都叫我「阿梧(Awu)」,高雄人。我喜歡學習新技能,從程式設計到網路工具,再到社群經營和影片剪輯。日常興趣是打遊戲、看動漫、讀小說和聽音樂。我會把這些興趣寫成文章,如果你有任何想法或問題,歡迎來信到我的郵箱 aowulife109@gmail.com
留言0
查看全部
發表第一個留言支持創作者!
梧笙の領域展開 的其他內容
解構賦值是 JavaScript ES6 的特性,它讓我們能更簡單地從陣列或物件中提取值,並將這些值賦予到新的變數中。這不僅讓程式碼更簡潔,還提升了可讀性。
let 和 const 是 JavaScript 在 ES6 版本中新的變數宣告方式。使用 let 宣告的變數可以重新賦值,而使用 const 宣告的變數賦值後則不能改變。這兩種新的宣告方式提供了比 var 更嚴格和清晰的變數作用域管理。
JavaScript 陣列的操作方法,forEach() 是用於遍歷陣列的每個元素,並對每個元素執行提供的函數,map() 是創建一個新陣列,其結果是對原陣列中的每個元素調用提供的函數後返回的結果。
本文將介紹陣列的基本操作方法,包括建立陣列、存取元素、陣列遍歷和修改陣列等,接下來將逐一介紹這些操作,並附上程式碼範例,讓你更易於理解和運用。。
JavaScript 陣列的操作方法,push() 可以將值加入到陣列的最後一個位置 ,pop() 會移除(取出)陣列的最後一個元素,shift() 會移除陣列的第一個元素,unshift() 則會將指定的元素添加到第一個位置。
JavaScript 的命名規則相當重要,它有些特定的慣例和限制。例如,變數和函式通常使用小駝峰式(firstName)命名。然後 JavaScript 對大小寫敏感,所以lastName和lastname是不同的變數。
解構賦值是 JavaScript ES6 的特性,它讓我們能更簡單地從陣列或物件中提取值,並將這些值賦予到新的變數中。這不僅讓程式碼更簡潔,還提升了可讀性。
let 和 const 是 JavaScript 在 ES6 版本中新的變數宣告方式。使用 let 宣告的變數可以重新賦值,而使用 const 宣告的變數賦值後則不能改變。這兩種新的宣告方式提供了比 var 更嚴格和清晰的變數作用域管理。
JavaScript 陣列的操作方法,forEach() 是用於遍歷陣列的每個元素,並對每個元素執行提供的函數,map() 是創建一個新陣列,其結果是對原陣列中的每個元素調用提供的函數後返回的結果。
本文將介紹陣列的基本操作方法,包括建立陣列、存取元素、陣列遍歷和修改陣列等,接下來將逐一介紹這些操作,並附上程式碼範例,讓你更易於理解和運用。。
JavaScript 陣列的操作方法,push() 可以將值加入到陣列的最後一個位置 ,pop() 會移除(取出)陣列的最後一個元素,shift() 會移除陣列的第一個元素,unshift() 則會將指定的元素添加到第一個位置。
JavaScript 的命名規則相當重要,它有些特定的慣例和限制。例如,變數和函式通常使用小駝峰式(firstName)命名。然後 JavaScript 對大小寫敏感,所以lastName和lastname是不同的變數。
你可能也想看
Google News 追蹤
Thumbnail
🎉週年慶限定優惠,10/24 前加入年訂閱再送 1 個月權限! 本專欄將提供給您最新的市場資訊、產業研究、交易心法、潛力股介紹,以上內容並非個股分析,還請各位依據自身狀況作出交易決策。歡迎訂閱支持我,獲得相關內容,也祝您的投資之路順遂! 每年 $990 訂閱方案👉 https://reurl.
Thumbnail
這是 30 天寫作挑戰的第 16 天。今天要跟大家分享的主題是:3 個學習前端時,重要的程式框架
本篇最主要是要了解網站前端工程師究竟是什麼?主要工作內容又有哪些?將從三個部份來說明:前端的工作內容、前端所需的軟實力以及前端所需的硬實力。
Thumbnail
老師請問tailwind是什麼呢? Tailwind 是一個現代化的 CSS 框架,它的設計理念是「高度可定制的實用型 CSS 庫」。與其他 CSS 框架不同的是,Tailwind 不是基於預先定義好的樣式類別和樣式集合,而是提供了大量的 CSS 實用類別,讓開發者可以更靈活地自由組合和應用。
Thumbnail
請您現在扮演一位幽默博學的老師,回答什麼是sass中的mixin概念 很高興回答這個問題!在 Sass 中,Mixin 是一種可以將一組 CSS 屬性集合放在一起,以便在需要的地方重複使用的功能。Mixin 可以包含變量、條件語句、迴圈和其他 CSS 屬性,使其更加靈活和強大。
Thumbnail
● 學習時態,整理了一些資訊。 ● 做了 AWS 前端的上機考題,how many words.有卡,但後來有好好學到 regex 的用法了(把中文維基百科有耐心看過就行) ● 早上10 點 HIIT @公園 -> 整整20分鐘我幾乎做完全部,有明顯進步!
Thumbnail
從身邊最小的事物開始吧! 這是我學習完基礎JavaScript後第一個做成的Project,應該是每個前端都一定會做過的project,但對於自學的我非常有挑戰性,我需要訓練自己在短時間內熟悉JS event並且運用他做出我的第一個搭配大量JS程式碼的網頁作品。
Thumbnail
教到了JS event,非常實用的一堂課程,開始進入監聽階段,可以跟使用者互動,也慢慢建立UX的概念,讓我可以開始自行設計動態網頁,並且優化了第二個靜態網頁,加入了滾動變化的效果。
Thumbnail
網頁設計的工作主要是要設計介面(user interface, UI),並把它轉化成前端介面。先不說設計能力,在技術方面,比較不講究架構或是效能。而在日常工作中,也不太需要常常客製化介面與互動。
Thumbnail
無須基礎,只要「複製 + 貼上」就能學會 (RWD Bootstrap + jQueryUI + fancyBox + CKeditor + Google Chart) 每個特效均為您示範 WebFomr + MVC 雙重範例 ASP.NET 教學 — 前端特效輕鬆學 (9.9小時) 課程介紹
Thumbnail
🎉週年慶限定優惠,10/24 前加入年訂閱再送 1 個月權限! 本專欄將提供給您最新的市場資訊、產業研究、交易心法、潛力股介紹,以上內容並非個股分析,還請各位依據自身狀況作出交易決策。歡迎訂閱支持我,獲得相關內容,也祝您的投資之路順遂! 每年 $990 訂閱方案👉 https://reurl.
Thumbnail
這是 30 天寫作挑戰的第 16 天。今天要跟大家分享的主題是:3 個學習前端時,重要的程式框架
本篇最主要是要了解網站前端工程師究竟是什麼?主要工作內容又有哪些?將從三個部份來說明:前端的工作內容、前端所需的軟實力以及前端所需的硬實力。
Thumbnail
老師請問tailwind是什麼呢? Tailwind 是一個現代化的 CSS 框架,它的設計理念是「高度可定制的實用型 CSS 庫」。與其他 CSS 框架不同的是,Tailwind 不是基於預先定義好的樣式類別和樣式集合,而是提供了大量的 CSS 實用類別,讓開發者可以更靈活地自由組合和應用。
Thumbnail
請您現在扮演一位幽默博學的老師,回答什麼是sass中的mixin概念 很高興回答這個問題!在 Sass 中,Mixin 是一種可以將一組 CSS 屬性集合放在一起,以便在需要的地方重複使用的功能。Mixin 可以包含變量、條件語句、迴圈和其他 CSS 屬性,使其更加靈活和強大。
Thumbnail
● 學習時態,整理了一些資訊。 ● 做了 AWS 前端的上機考題,how many words.有卡,但後來有好好學到 regex 的用法了(把中文維基百科有耐心看過就行) ● 早上10 點 HIIT @公園 -> 整整20分鐘我幾乎做完全部,有明顯進步!
Thumbnail
從身邊最小的事物開始吧! 這是我學習完基礎JavaScript後第一個做成的Project,應該是每個前端都一定會做過的project,但對於自學的我非常有挑戰性,我需要訓練自己在短時間內熟悉JS event並且運用他做出我的第一個搭配大量JS程式碼的網頁作品。
Thumbnail
教到了JS event,非常實用的一堂課程,開始進入監聽階段,可以跟使用者互動,也慢慢建立UX的概念,讓我可以開始自行設計動態網頁,並且優化了第二個靜態網頁,加入了滾動變化的效果。
Thumbnail
網頁設計的工作主要是要設計介面(user interface, UI),並把它轉化成前端介面。先不說設計能力,在技術方面,比較不講究架構或是效能。而在日常工作中,也不太需要常常客製化介面與互動。
Thumbnail
無須基礎,只要「複製 + 貼上」就能學會 (RWD Bootstrap + jQueryUI + fancyBox + CKeditor + Google Chart) 每個特效均為您示範 WebFomr + MVC 雙重範例 ASP.NET 教學 — 前端特效輕鬆學 (9.9小時) 課程介紹