JavaScript 函數的使用

時間 2019-12-05

原文原文鏈接

JavaScript 函數的使用

函數的定義： 函數就是用來執行任務的代碼塊，函數須要經過調用的方式來完成代碼的執行。函數的最大好處：包含在函數內容的代碼塊，能夠重複執行編程
函數的做用： 將完成任務的代碼塊"封裝」起來，供其餘調用方 無限制 的使用。數組
函數的分類：
若是按照參數的個數來分：無參函數、有參函數
若是按照返回值來分：有返回值函數、無返回值函數
若是按照編寫函數的對象來分：預約義函數（系統函數）和自定義函數bash
函數的優勢：函數式編程

1.代碼靈活度高，經過傳遞不一樣的參數，能夠取得不一樣的效果。函數

2.代碼的複用性強，函數一旦定義，任何地方均可以調用，而不須要再次編寫。學習

3.JS中的函數能夠響應網頁的事件，JS中的事件驅動模型就是經過網頁事件結合JS函數來作到的。ui
在JS中，定義函數有三種方式：函數聲明（函數定義），函數表達式，箭頭函數(此篇不做介紹)spa
函數的命名： 容許字母、數字、$、下劃線code
函數聲明：對象

function Test([可選參數1],[可選參數2], ...){    
     //函數體代碼
}  
複製代碼
function 是一個關鍵字 Test 叫函數名 ()是函數的特殊標誌 { }叫函數體
在()中，能夠給這個功能塊一些數據，那麼在{}中這個功能塊能夠給你返回一些數據
示例：定義一個函數，用來計算兩個數的和
function add(x,y){    // x,y爲形式參數  
    // 你能夠把形參看成在函數體中的局部變量
    var sub =   x+y;  
    return sub;  
}  
add(1,2);     // 1,2爲實際參數
var m = add(1,2);  
console.log(m)
複製代碼
在函數調用時，能夠給這個功能塊傳遞真實的數據，調用時，傳遞的數據，叫實際參數，簡稱爲實參

函數調用的過程就是實參向形參賦值的過程，就是把實參copy一份給形參

return 表示函數的返回值返回值是返回到函數的調用處 (若是函數沒有使用return返回內容，可是你依舊想獲得函數的返回值，那麼你獲得的值，只能是undefined)

使用function聲明的函數，也是會提高的（和變量相似，具體查看我寫的《JavaScript 變量的使用》）

示例：

Test();  
function Test(){  
    console.log("函數的提高...");  
}  
複製代碼

上面代碼至關於以下代碼

function Test(){  
    console.log("函數的提高...");  
}    
Test(); 
複製代碼

定義一個函數,打印九九乘法表
function Table(){   
    let str = "";  
    // 計算出這個九九乘法表  
    // 外面的for循環表示多少行  
    for(let i = 1; i<=9; i++){  
        // 裏面的for循環表示一行有多少個  
        for(let j=1; j<=i; j++){  
            str += j+"*"+i+"="+i*j+" ";  //拼湊
        }  
        str += "\n";  
    }  
    console.log(str)  
}  
Table();  
Table();  
Table();
複製代碼
把這個函數封裝起來，等到使用的時候，只需調用就能夠 Table() 這個方法就是調用九九乘法表，而且能夠無限制的調用，上面的例子調用了三次，因此輸出了三個九九乘法表

函數表達式 （在js中函數也是值，咱們能夠把一個函數賦給一個變量）

示例：
var Test = function(){  
    console.log("函數表達式...");  
}    
Test(); 
複製代碼
注：函數表達式以前調用函數，能夠嗎？答：不能夠
緣由：var Test; 會提高本質是變量它提高到最前面時 var Test; 而後Test()

函數返回值

在JS中，若是一個函數沒有指定返回值，那麼這個函數返回undefined
function f(){  
    return undefined;  // 這行可寫可不寫  
}  
console.log(f());   
複製代碼
函數能夠返回多個值嗎？
示例：聲明一個函數，這個函數的功能是求兩個數的最大值，最小值，平均值
function f(m,n){  
    var max = m>n ? m:n;  
    var min = m<n ? m:n;  
    var avg = (m+n)/2;  
    return max,avg,min;  
}  
console.log(f(1,9));  //輸出結果：1  
複製代碼
return 語句只能返回一個值，不能返回多值，(若是返回多個值，則默認返回最後一個值)
函數內能夠有多個 return 嗎？
function f(m,n){  
    var max = m>n ? m:n;    
    return max; 
    var min = m<n ? m:n;    
    return min; 
    var avg = (m+n)/2;  
    return avg;  
}  
console.log(f(1,9));  //輸出結果：9  
複製代碼
在一個函數中若是遇到了 return 語句，那麼 return 語句後面的代碼都不會執行
如何解決上面的問題？
function f(m,n){  
    var max = m>n ? m:n;    
    var min = m<n ? m:n;     
    var avg = (m+n)/2;  
    return [max,min,avg];
}  
console.log(f(1,9));  //輸出結果：9,1,5
複製代碼
由於 return 只能返回一個值，若是你要返回多個值，那麼就把多個值放到一個容器中（數組，對象）

回調函數

在函數式編程中，你能夠把一個函數看成另外一個函數的參數
若是一個函數看成了另外一個函數的參數，那麼咱們就稱這個函數爲回調函數
示例：
//計算兩個數的和  
function add(x,y){  
    return x+y;  
}    

//計算兩個數的差  
function sub(x,y){  
    return x-y;  
}    

function Test(f,a,b){
    return f(a,b);
}    

console.log(Test(add,1,2)); 輸出結果：3
console.log(Test(sub,1,2));  輸出結果：-1
複製代碼
你要封裝一個函數，這個函數的功能是計算兩個數的和或差
Test 這個函數有三個參數：
第一個參數是一個回調函數
第二個和第三個參數是形參
函數表達式
var add = function(x,y){
    return x+y;  
}  
  
var sub = function(x,y){
    return x-y;  
}  
 
function Test(f,a,b){
    return f(a,b);
}    
  
console.log(Test(add,1,2)); 輸出結果：3
console.log(Test(sub,1,2));  輸出結果：-1
複製代碼
之後用這種方式多一點
function Test(f,a,b){
    return f(a,b);
}      

var m = Test(function(x,y){
     return x+y;
},1,2)    

console.log(m);  輸出結果：3
複製代碼