函數
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...); 複制
- 調用的時候實參值是傳遞給形參的
- 形參簡單了解為：不用聲明的變量
- 實參和形參的多個參數之間用逗号（,）分隔
函數形參和實參數量不比對時
// 函數形參實參個數比對
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 裡面存儲的是一個函數
- 函數表達式方式原理跟聲明變量方式是一緻的
- 函數調用的代碼必須寫到函數體後面