zuppachu
commented
6 years ago Function：宣告函式的不同種方式 - 點解篇
一段腦衰與崩潰的故事。
故事是這樣的。這教學影片我看了三遍，但是有看還是沒看懂。突然想到老師之前說過：「搞不懂時，就把自己當電腦一樣，一行一行寫出來。」嗯，寫出來以後，我請老師過目～
一段腦衰與崩潰的故事就此展開😂
以下為原始題目：
function transform(arr,transformFunction) {
var result = []
for(var i =0; i < arr.length; i++) {
result.push(transformFunction(arr[i]))
}
return result
}
function double(x) {
return x*2
}
console.log(transform([1,2,3],double))看不懂怎麼解嗎？ 沒關係。
先從最簡單的地方開始。
var result = []
result.push(0)
return resultresult？ [0]
var arr = [1, 2, 3]
console.log(arr[0])會印出什麼？ [1]
接著再來看
var result = []
var arr = [1, 2, 3]
result.push(arr[0])
return resultresult 會是什麼？ [1]
再看下去
function double(x) {
return x*2
}
var arr = [1, 2, 3]
var result = []
result.push(double(arr[0]))
return resultresult 會是什麼？ [2]
再接著看下去。
function transform(arr,transformFunction) {
var result = []
result.push(transformFunction(arr[0]))
return result
}
function double(x) {
return x*2
}
console.log(transform([1,2,3],double))result 會是什麼？ [2]
紀錄一下跑程式(上圖)的過程：
=> arr[0] = 數字 1，所以
result.push(transformFunction(arr[0])) ＝ result.push(transformFunction(1))
=> transformFunction(1) = dobule(x)
=> 跑 function double(x) // x = 1
=> return x*2 => 1*2 = 2⚠️重點⚠️
- 一開始我完全搞混陣列的數字和位置表示方式。忘記 arr[0] 是顯示陣列中數字的第一個位置。
以下為簡易圖示
數字： [1,2,3]
位置： 0,1,2-
transformFunction(1) = double(x)
-
最後一個很重要，for loop 跑程式的方式如下：
題目再看一次，方便比較。
function transform(arr,transformFunction) {
var result = []
for(var i =0; i < arr.length; i++) {
result.push(transformFunction(arr[i]))
}
return result
}
function double(x) {
return x*2
}
console.log(transform([1,2,3],double))匿名函式寫法：
function transform(arr,transformFunction) {
var result = []
for(var i =0; i < arr.length; i++) {
result.push(transformFunction(arr[i]))
}
return result
}
console.log(transform([1,2,3], function(x) {
return x*2
}
))以下為上題程式跑法，有錯歡迎指正，感謝你～
(transform(1,2,3),double) 帶入 function transform
先跑 for loop
=> i = 0 => arr[0] => 0<3 (true) => result.push(transformFunction(arr[0]) => i=0+1 =1
=> i = 1 => arr[1] => 0<3 (true) => result.push(transformFunction(arr[1]) => i=1+1 =2
=> i = 2 => arr[2] => 0<3 (true) => result.push(transformFunction(arr[2]) => i=2+1 =3
=> i = 3 => arr[3] => 陣列內沒有3的位置 => (false) = stop
=> result.push(transformFunction(arr[0]) => result.push(transformFunction(1)) => transformFunction(1)=double(x) => 跑 function double(x) => x*2 = 1*2 => return result = [2]
=> result.push(transformFunction(arr[1]) => result.push(transformFunction(2)) => transformFunction(2)=double(x) => 跑 function double(x) => x*2 = 2*2 => return result = [4]
=> result.push(transformFunction(arr[2]) => result.push(transformFunction(3)) => transformFunction(3)=double(x) => 跑 function double(x) => x*2 = 3*2 => return result = [6]
result = [2,4,6]呼～終於打完了！一整天就弄一個題目也是夠了 😂
寫過才會記得住！(現在對此話抱持懷疑的心態 ＴＴ，但至少比較方便查閱！)
如何在終端機寫 JS？
邏輯運算 vs 位元運算
||) 的性質：如果第一個參數不是 false，就回傳第一個值。&&)的性質：當前面為 true，由後面決定值; 當前面為 false ，不論後面是什麼值，結果就是 false。false && true => false
!true => false
!false => true
3 || 10 => 3
false || 10 => 10
0 || 10 => 10
3 && 10 => 10
true && false => false
true && true => true
false && 3 => false (因為第一個值已經不是 true 了，後面就沒必要看了)
300 && 3 => 3 300 || 3 => 300
9 | 15 => 15 10 & 15 => 10
9 & 15 => 9 9 && 15 => 15
物件 (object)
物件是一種資料型態，用
{}包起來。 W3School 說明物件可以包含屬性 (property) 和 函式 (method)。取得物件裡面的值有兩種方式：
變數的運算
需注意：
型態！
浮點數誤差！ 所有程式都會遇到的問題，在電腦內存數字無法存得很精準。
字串加減乘除篇
'12'+'23' // "1223"
'1'-'2' // -1
'2'*'2' // 4
'4'/'2' // 2
字串 加 數字 ＝ 字串數字 var x ='30' + 10 alert(x) //得 3010
數字 加 字串 ＝ 數字字串 var x=5+"2" alert (x) //得52
數字 乘 數字 ＝ 數字 var x=5*2 alert (x) //得 10
字串 乘 字串 ＝ 數字 var x="5"*"2" alert(x) //得 10
數字 乘 字串 = 數字 var x=5*"2" alert (x) //得10
字串 乘 數字 ＝ 數字 var x="2" * 5 alert (x) //得10
數字 除 字串 ＝ 數字 var x = 10 / "2" alert(x) // 得5
字串 除 數字 ＝數字 var x = "20" / 5 alert(x) //得 4
console.log(typeof a) // 得 number，是數字的一種，但不是真的數字。
console.log(a === a) // 得 false！！因為 NaN 跟 NaN 都不是數字，也無法匹配，所以也無法相比。
補充：重新認識 JavaScript: Day 07 「比較」與自動轉型的規則 看自動轉型規則部分。
建議永遠使用三個等號，比較容易看出問題在哪。
從 Object 的等號真正理解變數
「Object 物件」和「Array 陣列」可以想成是「存記憶體位置」，而非數值內容。
如下例：
物件存取的方式：