JavaScript 函數

函數

1 函數的概念

在 JS 裏面，可能會定義很是多的相同代碼或者功能類似的代碼，這些代碼可能須要大量重複使用。雖然 for循環語句也能實現一些簡單的重複操做，可是比較具備侷限性，此時咱們就可使用 JS 中的函數。

函數：就是封裝了一段可被重複調用執行的代碼塊。經過此代碼塊能夠實現大量代碼的重複使用。

2 函數的使用

聲明函數

// 聲明函數
function 函數名() {
    //函數體代碼
}

 

• function 是聲明函數的關鍵字,必須小寫

• 因爲函數通常是爲了實現某個功能才定義的， 因此一般咱們將函數名命名爲動詞，好比 getSum

調用函數

// 調用函數
函數名();  // 經過調用函數名來執行函數體代碼

 

• 調用的時候千萬不要忘記添加小括號

• 口訣：函數不調用，本身不執行

注意：聲明函數自己並不會執行代碼，只有調用函數時纔會執行函數體代碼。

函數的封裝

• 函數的封裝是把一個或者多個功能經過函數的方式封裝起來，對外只提供一個簡單的函數接口

• 簡單理解：封裝相似於將電腦配件整合組裝到機箱中 ( 相似快遞打包）  

                      

例子：封裝計算1-100累加和

      // 1.聲明函數
      function getSum() {
        var sum = 0;
        for (var i = 1; i <= 100; i++) {
          sum += i;
        }
        console.log(sum);
      }
      // 2.調用函數
      getSum();
      getSum();

 

3 函數的參數

函數參數語法

• 形參：函數定義時設置接收調用時傳入

• 實參：函數調用時傳入小括號內的真實數據

       

參數的做用 : 在函數內部某些值不能固定，咱們能夠經過參數在調用函數時傳遞不一樣的值進去。

函數參數的運用：

// 帶參數的函數聲明
function 函數名(形參1, 形參2 , 形參3...) { // 能夠定義任意多的參數，用逗號分隔
  // 函數體
}
// 帶參數的函數調用
函數名(實參1, 實參2, 實參3...); 

 

1. 調用的時候實參值是傳遞給形參的

2. 形參簡單理解爲：不用聲明的變量

3. 實參和形參的多個參數之間用逗號（,）分隔

函數形參和實參數量不匹配時   

     

// 函數形參實參個數匹配
      function getSum(num1, num2) {
        console.log(num1 + num2);
      }
      // 1.若是實參的個數和形參的個數一致 則正常輸出結果
      getSum(1, 2);
      // 2.若是實參的個數多餘形參的個數，會取到形參的個數
      getSum(1, 2, 3);
      // 3.若是實參的個數小於形參的個數 多餘的形參定義爲undefind 最終的結果就是 NaN
      // 形參能夠看作是不用聲明的變量 num2 是一個變量可是沒有接受值 結果就是undefind
      getSum(1); //NaN
      //儘可能讓實參的個數和形參的個數相匹配

 

注意：在JavaScript中，形參的默認值是undefined。

小結：

• 函數能夠帶參數也能夠不帶參數

• 聲明函數的時候，函數名括號裏面的是形參，形參的默認值爲 undefined

• 調用函數的時候，函數名括號裏面的是實參

• 多個參數中間用逗號分隔

• 形參的個數能夠和實參個數不匹配，可是結果不可預計，咱們儘可能要匹配

4 函數的返回值

return

返回值：函數調用總體表明的數據；函數執行完成後能夠經過return語句將指定數據返回 。

// 聲明函數
function 函數名（）{
    ...
    return  須要返回的值；
}
// 調用函數
函數名();    // 此時調用函數就能夠獲得函數體內return 後面的值

 

• 在使用 return 語句時，函數會中止執行，並返回指定的值

• 若是函數沒有 return ，返回的值是 undefined

return注意事項

1. return 終止函數

return 語句以後的代碼不被執行

      // 1.return 終止函數
      function getSum(num1, num2) {
        return num1 + num2; // return後面的代碼不會被執行
        alert("我是不會被執行的哦");
      }
      console.log(getSum(1, 5));

 

2.return 的返回值

return 只能返回一個值。若是用逗號隔開多個值，以最後一個爲準。  

// 2.return只能返回一個值
      function fn(num1, num2) {
        return num1, num2; // 返回的結果是最後一個值
      }
      console.log(fn(1, 2));
​
      // 3.咱們求任意兩個數的 加減乘除結果
      function getResult(num1, num2) {
        return [num1 + num2, num1 - num2, num1 * num2, num1 / num2];
      }
      var re = getResult(4, 5);
      console.log(re);

 

3.函數沒有 return 返回 undefined

函數沒有 return 返回 undefined 

 // 4.函數若是有返回值return則返回return後面的值，若是函數沒有return則返回undefind
      function fun1() {
        return 666; // 返回666
      }
      console.log(fun1());
      function fun2() {}
      console.log(fun2()); //函數返回結果undefined

 

4.break ,continue ,return 的區別

• break ：結束當前的循環體（如 for、while）

• continue ：跳出本次循環，繼續執行下次循環（如 for、while）

• return ：不只能夠退出循環，還可以返回 return 語句中的值，同時還能夠結束當前的函數體內的代碼

5 arguments的使用

當不肯定有多少個參數傳遞的時候，能夠用 arguments 來獲取。JavaScript 中，arguments實際上它是當前函數的一個內置對象。全部函數都內置了一個 arguments 對象，arguments 對象中存儲了傳遞的全部實參。arguments展現形式是一個僞數組，所以能夠進行遍歷。僞數組具備如下特色：

• 具備 length 屬性

• 按索引方式儲存數據

• 不具備數組的 push , pop 等方法

// arguments 的使用  只有函數纔有
      function fn() {
        //console.log(arguments); // 裏面存儲了傳過來的全部實參
        // 能夠按照數組的方式遍歷arguments
        for (var i = 0; i < arguments.length; i++) {
          console.log(arguments[i]);
        }
      }
      fn(1, 2, 3);

 

注意：在函數內部使用該對象，用此對象獲取函數調用時傳的實參。

6 函數案例

案例 1： 利用函數封裝方式，翻轉任意一個數組

      function reverse(arr) {
        var newArr = [];
        for (var i = arr.length - 1; i >= 0; i--) {
          newArr[newArr.length] = arr[i];
        }
        return newArr;
      }
      var arr1 = reverse([1, 2, 3, 4, 5]);
      var arr2 = reverse(["pink", "yellow", "red"]);
      console.log(arr1);
      console.log(arr2);

 

案例 2： 利用函數封裝方式，對數組排序 -- 冒泡排序

//利用函數冒泡排序
      function sort(arr) {
        for (var i = 0; i < arr.length; i++) {
          for (var j = 0; j < arr.length - i - 1; j++) {
            if (arr[j] > arr[j + 1]) {
              var temp;
              temp = arr[j];
              arr[j] = arr[j + 1];
              arr[j + 1] = temp;
            }
          }
        }
        return arr;
      }
      var arr1 = sort([1, 3, 2, 5, 4, 6, 7]);
      console.log(arr1);

 

案例 3： 判斷閏年

     function isRunYear(year) {
        var flag = false;
        if ((year % 4 == 0 && year % 100 != 0) || year % 400 == 0) {
          flag = true;
        }
        return flag;
      }
      console.log(isRunYear(2000));
      console.log(isRunYear(1999));

 

函數能夠調用另外一個函數

函數內部能夠調用另外一個函數，在同一做用域代碼中，函數名即表明封裝的操做，使用函數名加括號便可以將封裝的操做執行。

      // 函數是能夠相互調用的
      function fn1() {
        console.log(11);
        fn2(); //在fn1裏面調用fn2
      }
      fn1();
      function fn2() {
        console.log(22);
      }

 

7 函數的兩種聲明方式

1.自定義函數方式(命名函數)

利用函數關鍵字 function 自定義函數方式

// 聲明定義方式
function fn() {...}
// 調用  
fn();  

 

• 由於有名字，因此也被稱爲命名函數

• 調用函數的代碼既能夠放到聲明函數的前面，也能夠放在聲明函數的後面

2.函數表達式方式(匿名函數）

利用函數表達式方式的寫法以下：

// 這是函數表達式寫法，匿名函數後面跟分號結束
var fn = function(){...}；
// 調用的方式，函數調用必須寫到函數體下面
fn();

 

• 由於函數沒有名字，因此也被稱爲匿名函數

• 這個fn 裏面存儲的是一個函數 

• 函數表達式方式原理跟聲明變量方式是一致的

• 函數調用的代碼必須寫到函數體後面