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

是說我 mac 的輸入法 ...

韓式還不是你逼我用的

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

⑅　前言

來說一下 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