iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 23
1
Modern Web

JavaScript初心者ノ研究日記。系列 第 23

二十三日目:JavaScript ES6:箭頭函式 アロー関数ノ章

  • 分享至 

  • xImage
  •  

おはー(U 'ᴗ' U)⑅ SONYKO 打油 ♡♡♡
是說我連續 2 天都是 23 : 57 分發文

是說我 mac 的輸入法 ...
https://ithelp.ithome.com.tw/upload/images/20201006/20129506vTcijqCzEf.png
韓式還不是你逼我用的

 

今天來看箭頭函式怎們寫 ➸➸➸
レッツゴー


⑅ 前言

來說一下 ES6 新增語法主要分兩大類:

  • 語法糖 ( JS 運作邏輯一樣、但撰寫上更精簡 )
  • 新方法 ( JS 撰寫觀念更直覺、更簡便,但邏輯跟原本的JS 不太一樣 )
    cons 、let 、箭頭函式屬於這類。

 

我一直以為箭頭函式 是傳統函式簡化的寫法
但並不是所有舊函式都能改寫成箭頭函式。

遇到 this 或 arguments 函數運作行為上要注意,
因為箭頭函式與 傳統函式對他們的定義完全不一樣。

由於我對 this 還很陌生、這篇不會講太細qq。

 


⑅ 箭頭函式 寫法

就直接看 code 吧 (U 'ᴗ' U)

/* 傳統韓式 (懶得改字) */
let cat = function(name){
	return ` 我的貓貓叫 ⑅ ${name} ♡ `
}
console.log (cat('Miu'))
	// " 我的貓貓叫 ⑅ Miu ♡ "

/* 箭頭函式 */
let arrowCat = (name) => {
	return ` 我的貓貓叫 ⑅ ${name} ♡ `
}
console.log (cat('Miu'))
	// " 我的貓貓叫 ⑅ Miu ♡ "

宣告變數、並賦予它函式,我們稱這段 code 為「 函式表達式 」
上面範例都屬於 函式表達式。

 

其實我們還可以把那個箭頭函式再簡寫:

/* 箭頭韓式簡寫 */
let arrowCat = (name) => ` 我的貓貓叫 ⑅ ${name} ♡ `
console.log (cat('Miu'))
	// " 我的貓貓叫 ⑅ Miu ♡ "

什麼?大括號直接拿掉了嗎 Σ(´□`;)

這個寫法是 函式表達式限定!
箭頭後面不加大括號的話、就是 return 的意思。

所以我們 console 得到的結果都是一樣滴。

上面那段code 還可以再簡寫喔 !
到底多懶

/* 箭頭韓式簡寫 */
let arrowCat = name => ` 我的貓貓叫 ⑅ ${name} ♡ `
console.log (cat('Miu'))
	// " 我的貓貓叫 ⑅ Miu ♡ "

看得出來差在哪嗎?
我把參數 name 的小括號拿掉惹。

但要注意 只有一個參數時、才能把小括號拿掉喔。
啊如果今天你沒有參數時、小括號還是要裝上去 (U 'ᴗ' U)⑅

像這樣:

let cat = () => `小括號不能拿掉。`

兩個參數的話:

let cats = (cat1,cat2) => ` 我有兩隻貓:${cat1} 和 ${cat2} 。`

console.log(cats('二郎','三郎'))
	// " 我有兩隻貓:二郎 和 三郎 。"

 

⑅ 可以練習一下加深記憶力哩♡♡

 


⑅ 箭頭函式 feat. 陣列

來看看箭頭函式怎麼搭配陣列操作用吧。
這邊偷偷介紹一個 ES6 的陣列操作法:map ( ) ✧*。
 

⑅ map ( )

map 主要用在:陣列中 所有的値都需要做調整 時使用。
範例看下去尼就懂哩:

let nums = [12,2,3,1,6,4]
let newNums = nums.map(function(i){
	return i + 100
})
console.log(newNums)
	// [112, 102, 103, 101, 106, 104]
  • 新陣列 newNums 將原陣列複製、並且更新成操作後的値。
    由於是生成新的陣列,因此不會更動到原陣列。
  • 參數 i 代表原陣列、i 是自定義名稱參數。
    今天你想取 item 也可以。

⑅ map + 箭頭函式

先介紹 map 就只是想把箭頭函式用在他身上而已w
來看 code :

let nums = [12,2,3,1,6,4]
let newNums = nums.map(i => i + 100)

console.log(newNums)
	// [112, 102, 103, 101, 106, 104]

哇賽、太簡潔了吧。
有一種用魔術泡棉刷茶漬的感覺 (何

整理一下剛剛說的要點:

  1. 函式表達式 可以把大括號拿掉。
    箭頭後面的內容會自動 return 。
  2. 只有一個參數的話 可以把小括號拿掉。
     

⑅ forEach + 箭頭函式

再講一個就好~
forEach 我們十七日目有介紹到,
它是ES6 新增的陣列操作法。

來看 forEach 搭配箭頭函式的 code :

let pokemon = ['呆呆獸','沼王','毛辮羊','馬英九','拉帝歐斯']

pokemon.forEach((i,index)=>{
	console.log ( i,index+1 )
})
 
/*
	"呆呆獸" 1
	"沼王" 2
	"毛辮羊" 3
	"馬英九" 4
	"拉帝歐斯" 5
*/

解析:

  1. 因為上面不是函式表達式、所以無法把大括號拿掉 。
  2. 因為有兩個參數、所以參數小括號不能拿掉 。
  3. 唯一變更處為 刪掉 function 文字、加上 ⇒ 。

就醬 ‬(..◜ᴗ◝..)
 


⑅ 淺談箭頭函式 和 傳統函式 的 this

要說箭頭函式哪裏不能使用、
或是 箭頭函式 和 舊函式的差別,大家都一定會提到 this

this 是什麼?
聽說面試官很喜歡問這個問題

可以先記住一句:
「 this 的値 是被呼叫的當下才會決定的 」。

this 並不是一個 固定不變 的値,
所以你才會發現、沒有一篇文章會跟你說 this 就是什麼什麼 。

先試著看一段code :

function cat(name){
	console.log (`我的貓貓是${this.name}`)
}

let cat1 = {
	name: 'Miu',
	age: 11
}
let cat2 = {
	name: '阿財',
	age: 5
}

cat1.fn = cat
cat2.fn = cat

cat1.fn() 
	// "我的貓貓是Miu"
cat2.fn()
	// "我的貓貓是阿財"

步驟是這樣:

  1. 我先寫一個函式,他的console.log 裡面有 this .name ( 重點 )
  2. 建立兩個物件、裡面有兩個 . name 。
  3. 把函式分別加到 cat1 物件 和 cat2 物件 。
    所以我們的物件會有三個鍵 ( name, age, fn )
  4. fn 函式回傳給我們結果:
            ⑅ "我的貓貓是Miu"
            ⑅ "我的貓貓是阿財"

由此可知,
this.name 分別為 Miu 和 阿財 。
這就是我們說的 「 this 並不是一個 固定不變 的値 」。

 

好、但重點不是要介紹 this 是什麼
來講 箭頭函式 和 傳統函式 差在哪裡。

 

⑅ 傳統函式 this v.s. 箭頭函式 this

我們來看這個範例:

var name = '噴否龍'
var pokemon = {
	name: '噴火龍',
	callpokemon: function(){
		console.log(`1. ${this.name}`)
	},
	callpokemon2: ()=>{
		console.log(`2. ${this.name}`)
	}
}
pokemon.callpokemon()   // "1. 噴火龍"
pokemon.callpokemon2()  // "2. 噴否龍"
  • 傳統函式:會看你怎麼呼叫他、決定他的 this 指向誰。
  • 箭頭函式:會指向全域 。

callpokemon2 使用箭頭函式、所以他的 this.name 會指位於全域的噴否龍 。

 

 

主要只是想說 箭頭函式 ≠ 傳統函式。
並不是 傳統函式的縮寫版歐 。

今天的箭頭函式就介紹到這邊哩 ♡♡♡
可以不用急著把函式都換成箭頭函式、一步一步來比較保險喲 ( ⁎ᵕᴗᵕ⁎ )

それじゃあ またねー ⑅

 


୨୧(U 'ᴗ' U) SONYKO的 前端日文小教室 ♡

  

音檔 ⑅ 

  

♡♡ 昨天也有介紹到的 箭頭函式 的日文:

⑅  アロー関数 あろーかんすう A Ro KanSuu
 ( アロー 是外來語 Arrow )

♡♡ 再來看一些句子:

  • アロー関数とは?
    アロー関数とはfunctionの定義をより短く記述できる記法です。「=>」という記号を使って記述します。
     → 什麼是箭頭函式?
       箭頭函式是能夠將function 的定義以更簡短的程式碼來撰寫。會使用「=>」符號來撰寫。
     
  • 関数の内容が1行だけの場合、中括弧「{}」を省略して以下のように記述できます。
     → 函式內容如果只有一行的話、會將中括號省略並寫成下面這種寫法。
     
  • 今回のサンプルプログラムでは、上記のアロー関数の使い方を実際に実行して確認します。
     → 這次的範例程式碼,會實際執行並確認前面寫到的箭頭函式的使用方法。

 
♡♡ 句子單字整合:
( 日文 / 假名 / 中文 / 羅馬拼音 )

 ➸  定義 ていぎ 定義 Tei Gi

 ➸  記述する きじゅつする 撰寫 Ki JuTsu

 ➸  記号 きごう 符號 Ki Gou

 ➸  一行 いちぎょう 一行 I Chi Gyou

 ➸  中括弧 ちゅうかっこ 中括號 Chu Ka kko

 ➸  サンプルプログラム 範例程式碼 Sample Program San puru Puro guramu

 ➸  上記 じょうき 上面( 前面 )寫的 Jou ki

 

 


上一篇
二十二日目:JavaScript ⑅indexOf ⑅lastIndexOf ⑅find ⑅findIndex ノ章
下一篇
二十四日目:JavaScript ⑅ filter ⑅ join ⑅ slice ⑅ map ノ章 °♡
系列文
JavaScript初心者ノ研究日記。30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言