[ JavaScript 05 ] 函式 function


Posted by tzutzu858 on 2020-06-23

複習國中數學

y = f(x)

y是回傳值
f(x)是函式
x是參數

f(a,b,c) = a + 2b + 3c

function <名字>(a , b, c ){
    a + 2*b + 3*c
}

要怎麼回傳回去?加return

function <名字>(a , b, c ){
  return  a + 2*b + 3*c
}

也可以回傳物件(Object)

function tzu(cccc){
   return  {
   answer : cccc*2
   }
}
console.log(tzu(10))
{answer: 20}

注意 : return 後面沒有接東西時,它會把它變成兩句
第一句是 return
第二句是{ },變成第二句沒有意義

function tzu(cccc){
   return  
   {
   answer : cccc*2
   }
}
console.log(tzu(10))
結果 : undefined

想印出 min ~ max 的值

function generateArray(min , max){
   var result = []
   for(var i = min ; i <= max ; i++){
   result.push(i)
   }
   return result   // 不要忘了 return
}
var a = 3
var b = 7
console.log(generateArray(a,b))

也可以不要回傳

function generateArray(min , max){
   var result = []
   for(var i = min ; i <= max ; i++){
   console.log(i)
   }
}

generateArray(2,7)

function 也可以傳進去 function。 好饒舌= =

function print(anything){
   console.log(anything)
}

function hello(){
    console.log('hi')
}

print(hello)

結果

ƒ hello(){
   console.log('hi')
}

結果是原封不動把 function hello() 印出來
但不會執行到 hello 這個 function
因為 print 這個 function ,裡面只是執行印出來 console.log


把 function 當作一個參數傳進去,執行 function hello()

function print(anything){
   anything ()  // 執行它
}

function hello(){
    console.log('hi')
}

print(hello)
結果 : 

hi

步驟說明

// 傳 hello 參數到  print 這個 function
// 變成以下程式

function print(hello){
   hello ()  // 執行 hello () 這個 function ,結果就是印出 hi
}

function hello(){
    console.log('hi')
}

print(hello)

想要傳入[1,2,3],印出[3,6,9]

function transform(arr , transformfunction){
   var result = []
   for(var i = 0; i<arr.length; i++){
   result.push(transformfunction(arr[i]))
   }
   return result
}

function triple(x){
    return x*3
}

console.log( transform([1,2,3] , triple))

匿名函式 anonymous function

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){  // 匿名函式 anonymous function
      return x*3}
   )
)

引數(Argument)與參數(Parameter)

function add (a,b){  // (a,b)裡的 a , b 是參數 
   return a+b
}

add(3,5)   //  (3,5)裡的 3 , 5 是引數

JavaScript 特有的 Argument

function add (a,b){ 
   console.log(arguments)
   return a+b
}

console.log(add(3,5))

印出

[Arguments] { '0': 3, '1': 5 } // 它是物件(Object)
8

用 chrome 跑,會印出更多資訊
會跟你說原形(proto)是 Object

Arguments(2) [3, 5, callee: ƒ, Symbol(Symbol.iterator): ƒ]
0: 3
1: 5
callee: ƒ add(a,b)
length: 2
Symbol(Symbol.iterator): ƒ values()
__proto__: Object

#javascript







Related Posts

[11] 型別 - undefined、undeclared、依存注入

[11] 型別 - undefined、undeclared、依存注入

實作 PHP API & 留言板 SPA(下)

實作 PHP API & 留言板 SPA(下)

七天打造自己的 Google Map 應用入門 - Day05

七天打造自己的 Google Map 應用入門 - Day05


Comments