おはー(U 'ᴗ' U)⑅ SONYKO 打油 ♡♡♡是說我連續 2 天都是 23 : 57 分發文
是說我 mac 的輸入法 ...韓式還不是你逼我用的
今天來看箭頭函式怎們寫 ➸➸➸
レッツゴー
來說一下 ES6 新增語法主要分兩大類:
我一直以為箭頭函式 是傳統函式簡化的寫法
但並不是所有舊函式都能改寫成箭頭函式。
遇到 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('二郎','三郎'))
// " 我有兩隻貓:二郎 和 三郎 。"
⑅ 可以練習一下加深記憶力哩♡♡
來看看箭頭函式怎麼搭配陣列操作用吧。
這邊偷偷介紹一個 ES6 的陣列操作法: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]
先介紹 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]
哇賽、太簡潔了吧。
有一種用魔術泡棉刷茶漬的感覺 (何
整理一下剛剛說的要點:
再講一個就好~
forEach 我們十七日目有介紹到,
它是ES6 新增的陣列操作法。
來看 forEach 搭配箭頭函式的 code :
let pokemon = ['呆呆獸','沼王','毛辮羊','馬英九','拉帝歐斯']
pokemon.forEach((i,index)=>{
console.log ( i,index+1 )
})
/*
"呆呆獸" 1
"沼王" 2
"毛辮羊" 3
"馬英九" 4
"拉帝歐斯" 5
*/
解析:
就醬 (..◜ᴗ◝..)
要說箭頭函式哪裏不能使用、
或是 箭頭函式 和 舊函式的差別,大家都一定會提到 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()
// "我的貓貓是阿財"
步驟是這樣:
由此可知,
this.name 分別為 Miu 和 阿財 。
這就是我們說的 「 this 並不是一個 固定不變 的値 」。
好、但重點不是要介紹 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. 噴否龍"
callpokemon2 使用箭頭函式、所以他的 this.name 會指位於全域的噴否龍 。
主要只是想說 箭頭函式 ≠ 傳統函式。
它並不是 傳統函式的縮寫版歐 。
今天的箭頭函式就介紹到這邊哩 ♡♡♡
可以不用急著把函式都換成箭頭函式、一步一步來比較保險喲 ( ⁎ᵕᴗᵕ⁎ )
それじゃあ またねー ⑅
⑅ 音檔 ⑅
♡♡ 昨天也有介紹到的 箭頭函式 的日文:
⑅ アロー関数 あろーかんすう A Ro KanSuu
( アロー 是外來語 Arrow )
♡♡ 再來看一些句子:
♡♡ 句子單字整合:
( 日文 / 假名 / 中文 / 羅馬拼音 )
➸ 定義 ていぎ 定義 Tei Gi
➸ 記述する きじゅつする 撰寫 Ki JuTsu
➸ 記号 きごう 符號 Ki Gou
➸ 一行 いちぎょう 一行 I Chi Gyou
➸ 中括弧 ちゅうかっこ 中括號 Chu Ka kko
➸ サンプルプログラム 範例程式碼 Sample Program San puru Puro guramu
➸ 上記 じょうき 上面( 前面 )寫的 Jou ki