?JavaScript帝國之行🔥

1、函式🔥

函式：就是封裝了一段可被重復呼叫執行的代碼塊，通過此代碼塊可以實作大量代碼的重復使用，

1.1、函式的使用🔥

函式在使用時分為兩步：宣告函式和呼叫函式

①宣告函式🔥

//宣告函式
function 函式名(){
     //函式體代碼
}

• function 是宣告函式的關鍵字,必須小寫
• 由于函式一般是為了實作某個功能才定義的， 所以通常我們將函式名命名為動詞，比如 getSum

②呼叫函式🔥

//呼叫函式
函式名(); //通過呼叫函式名來執行函式體代碼

• 呼叫的時候千萬不要忘記添加小括號
• 口訣：函式不呼叫，自己不執行

注意：宣告函式本身并不會執行代碼，只有呼叫函式時才會執行函式體代碼，

1.2、函式的封裝

• 函式的封裝是把一個或者多個功能通過函式的方式封裝起來，對外只提供一個簡單的函式介面

1.3、函式的引數🔥

1.3.1、形參和實參🔥

在宣告函式時，可以在函式名稱后面的小括號中添加一些引數，這些引數被稱為形參，而在呼叫該函式時，同樣也需要傳遞相應的引數，這些引數被稱為實參，

引數的作用 : 在函式內部某些值不能固定，我們可以通過引數在呼叫函式時傳遞不同的值進去

// 帶引數的函式宣告
function 函式名(形參1, 形參2 , 形參3...) { // 可以定義任意多的引數，用逗號分隔
  // 函式體
}


// 帶引數的函式呼叫
函式名(實參1, 實參2, 實參3...); 

例如：利用函式求任意兩個數的和

// 宣告函式
function getSum(num1,num2){
    console.log(num1+num2)
}

// 呼叫函式
getSum(1,3) //4
getSum(6，5) //11

• 函式呼叫的時候實參值是傳遞給形參的

• 形參簡單理解為:不用宣告的變數

• 實參和形參的多個引數之間用逗號(,)分隔，

1.3.2、形參和實參個數不匹配🔥

function sum(num1, num2) {
    console.log(num1 + num2);
}
sum(100, 200);             // 300，形參和實參個數相等，輸出正確結果

sum(100, 400, 500, 700);   // 500，實參個數多于形參，只取到形參的個數

sum(200);                  // 實參個數少于形參，多的形參定義為undefined，結果為NaN

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

1.3.3、小結🔥

• 函式可以帶引數也可以不帶引數
• 宣告函式的時候，函式名括號里面的是形參，形參的默認值為 undefined
• 呼叫函式的時候，函式名括號里面的是實參
• 多個引數中間用逗號分隔
• 形參的個數可以和實參個數不匹配，但是結果不可預計，我們盡量要匹配

1.4、函式的回傳值🔥

1.4.1、return陳述句🔥

有的時候，我們會希望函式將值回傳給呼叫者，此時通過使用 return 陳述句就可以實作，

return 陳述句的語法格式如下：

// 宣告函式
function 函式名（）{
    ...
    return  需要回傳的值;
}
// 呼叫函式
函式名();    // 此時呼叫函式就可以得到函式體內return 后面的值

• 在使用 return 陳述句時，函式會停止執行，并回傳指定的值

• 如果函式沒有 return ，回傳的值是 undefined

// 宣告函式
function sum(){
    ...
    return  666;
}
// 呼叫函式
sum();      // 此時 sum 的值就等于666，因為 return 陳述句會把自身后面的值回傳給呼叫者 

1.4.2、return 終止函式🔥

return 陳述句之后的代碼不被執行

function add(num1，num2){
    //函式體
    return num1 + num2; // 注意：return 后的代碼不執行
    alert('我不會被執行，因為前面有 return');
}
var resNum = add(21,6); // 呼叫函式，傳入兩個實參，并通過 resNum 接收函式回傳值
alert(resNum);          // 27

1.4.3、return 的回傳值🔥

return 只能回傳一個值，如果用逗號隔開多個值，以最后一個為準

function add(num1，num2){
    //函式體
    return num1,num2;
}
var resNum = add(21,6); // 呼叫函式，傳入兩個實參，并通過 resNum 接收函式回傳值
alert(resNum);          // 6

1.4.4、小結🔥

函式都是有回傳值的

1. 如果有 return ，則回傳 return 后面的值
2. 如果沒有 return，則回傳 undefined

1.4.5、區別🔥

break、continue、return 的區別

• break ： 結束當前回圈體(如 for、while)
• continue ：跳出本次回圈，繼續執行下次回圈(如for、while)
• return ：不僅可以退出回圈，還能夠回傳 return 陳述句中的值，同時還可以結束當前的函式體內的代碼

1.4.5、練習

1.利用函式求任意兩個數的最大值

function getMax(num1, num2) {
    return num1 > num2 ? num1 : num2;
}
console.log(getMax(1, 2));
console.log(getMax(11, 2));

2.求陣列 [5,2,99,101,67,77] 中的最大數值

//定義一個獲取陣列中最大數的函式
function getMaxFromArr(numArray){
    var maxNum = 0;
    for(var i = 0; i < numArray.length;i++){
        if(numArray[i]>maxNum){
            maxNum = numArray[i];
        }
    }
    return maxNum;
}
var arrNum = [5,2,99,101,67,77];
var maxN = getMaxFromArr(arrNum);  //這個實參是個陣列
alert('最大值為' + maxN);

3.創建一個函式，實作兩個數之間的加減乘除運算，并將結果回傳

var a = parseFloat(prompt('請輸入第一個數'));
var b = parseFloat(prompt('請輸入第二個數'));

function count(a,b){
    var arr = [a + b, a - b, a * b, a / b];
    return arr;
}
var result = count(a,b);
console.log(result)

1.5、arguments的使用🔥

當我們不確定有多少個引數傳遞的時候，可以用 arguments 來獲取，在 JavaScript 中，arguments 實際上它是當前函式的一個內置物件，所有函式都內置了一個 arguments 物件，arguments 物件中存盤了傳遞的所有實參，

• arguments存放的是傳遞過來的實參

• arguments展示形式是一個偽陣列，因此可以進行遍歷，偽陣列具有以下特點

? ①：具有 length 屬性

? ②：按索引方式儲存資料

? ③：不具有陣列的 push , pop 等方法

// 函式宣告
function fn() {
    console.log(arguments);  //里面存盤了所有傳遞過來的實參
    console.log(arrguments.length); // 3
    console.log(arrguments[2]); // 3
}

// 函式呼叫
fn(1,2,3);

例如：利用函式求任意個數的最大值

 function maxValue() {
    var max = arguments[0];
    for (var i = 0; i < arguments.length; i++) {
        if (max < arguments[i]) {
            max = arguments[i];
        }
    }
    return max;
}
console.log(maxValue(2, 4, 5, 9)); // 9
console.log(maxValue(12, 4, 9)); // 12

1.7、函式呼叫另外一個函式

因為每個函式都是獨立的代碼塊，用于完成特殊任務，因此經常會用到函式相互呼叫的情況，具體演示在下面的函式練習中會有，

1.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, 3, 4, 6, 9]);
console.log(arr1);

2.利用函式封裝方式，對陣列排序 – 冒泡排序

function sort(arr) {
    for (var i = 0; i < arr.length - 1; i++) {
        for (var j = 0; j < arr.length - i - 1; j++) {
            var temp = arr[j];
            arr[j] = arr[j + 1]; 
            arr[j + 1] = temp;
        }
    }
    return arr;
}

3.輸入一個年份，判斷是否是閏年（閏年：能被4整除并且不能被100整數，或者能被400整除）

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

4.用戶輸入年份，輸出當前年份2月份的天數，如果是閏年，則2月份是 29天， 如果是平年，則2月份是 28天

function backDay() {
    var year = prompt('請您輸入年份:');
    if (isRun(year)) { //呼叫函式需要加小括號
        alert('你輸入的' + year + '是閏年，2月份有29天');
    } else {
        alert('您輸入的' + year + '不是閏年，2月份有28天');
    }
}
backDay();
//判斷是否是閏年的函式
function isRun(year) {
    var flag = false;
    if (year % 4 === 0 && year % 100 !== 0 || year % 400 === 0) {
        flag = true;
    }
    return flag;
}

1.7、函式的兩種宣告方式🔥

1.7.1、自定義函式方式(命名函式)🔥

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

// 宣告定義方式
function fn() {...}

// 呼叫  
fn();  

1. 因為有名字，所以也被稱為命名函式

2. 呼叫函式的代碼既可以放到宣告函式的前面，也可以放在宣告函式的后面

1.7.2、函式運算式方式(匿名函式)🔥

利用函式運算式方式的寫法如下：

// 這是函式運算式寫法，匿名函式后面跟分號結束
var fn = function(){...};

// 呼叫的方式，函式呼叫必須寫到函式體下面
fn();

• 因為函式沒有名字，所以也稱為匿名函式

• 這個fn 里面存盤的是一個函式

• 函式呼叫的代碼必須寫到函式體后面

2、作用域🔥

通常來說，一段程式代碼中所用到的名字并不總是有效和可用的，而限定這個名字的可用性的代碼范圍就是這個名字的作用域，作用域的使用提高了程式邏輯的區域性，增強了程式的可靠性，減少了名字沖突，

JavaScript (ES6前) 中的作用域有兩種：

• 全域作用域
• 區域作用域(函式作用域)

2.1、全域作用域🔥

作用于所有代碼執行的環境(整個 script 標簽內部)或者一個獨立的 js 檔案

2.2、區域（函式）作用域🔥

作用于函式內的代碼環境，就是區域作用域， 因為跟函式有關系，所以也稱為函式作用域

2.3、JS 沒有塊級作用域🔥

• 快作用域由 {} 包括
• 在其他編程語言中（如 java、c#等），在 if 陳述句、回圈陳述句中創建的變數，僅僅只能在本 if 陳述句、本回圈陳述句中使用，如下面的Java代碼：

if(true){
    int num = 123;
    System.out.println(num);	// 123
}
System.out.println(num);		// 報錯

JS 中沒有塊級作用域(在ES6之前)

if(true){
    int num = 123;
    System.out.println(num);	// 123
}
System.out.println(num);		// 123

3、變數的作用域🔥

在JavaScript中，根據作用域的不同，變數可以分為兩種：

• 全域變數
• 區域變數

3.1、全域變數🔥

在全域作用域下宣告的變數叫做全域變數（在函式外部定義的變數）

• 全域變數在代碼的任何位置都可以使用

• 在全域作用域下 var 宣告的變數 是全域變數

• 特殊情況下，在函式內不使用 var 宣告的變數也是全域變數（不建議使用）

3.2、區域變數🔥

在區域作用域下宣告的變數叫做區域變數（在函式內部定義的變數）

• 區域變數只能在該函式內部使用

• 在函式內部 var 宣告的變數是區域變數

• 函式的形參實際上就是區域變數

3.3、區別🔥

• 全域變數：在任何一個地方都可以使用，只有在瀏覽器關閉時才會被銷毀，因此比較占記憶體

• 區域變數：只在函式內部使用，當其所在的代碼塊被執行時，會被初始化；當代碼塊運行結束后，就會被銷毀，因此更節省記憶體空間

4、作用域鏈🔥

1. 只要是代碼，就至少有一個作用域

2. 寫在函式內部的叫區域作用域

3. 如果函式中還有函式，那么在這個作用域中就又可以誕生一個作用域

4. 根據在內部函式可以訪問外部函式變數的這種機制，用鏈式查找決定哪些資料能被內部函式訪問，就稱作作用域鏈

// 作用域鏈: 內部函式訪問外部函式的變數，采取的是鏈式查找的方式來決定取哪個值，這種結構我們稱為作用域鏈表

var num = 10;
funtion fn() { //外部函式
    var num = 20;
    
    function fun() { //內部函式
        console.log(num);  // 20 ,一級一級訪問
    }
}

• 作用域鏈：采取就近原則的方式來查找變數最終的值，

5、預決議🔥

首先來看幾段代碼和結果：

console.log(num);  // 結果是多少？
//會報錯 num is undefined

console.log(num);  // 結果是多少？
var num = 10;   
// undefined

// 命名函式(自定義函式方式):若我們把函式呼叫放在函式宣告上面
fn();				//11
function fn() {
    console.log('11');
}

// 匿名函式(函式運算式方式):若我們把函式呼叫放在函式宣告上面
fn();
var  fn = function() {
    console.log('22'); // 報錯
}


//相當于執行了以下代碼
var fn;
fn();      //fn沒賦值，沒這個，報錯
var  fn = function() {
    console.log('22'); //報錯
}

JavaScript 代碼是由瀏覽器中的 JavaScript 決議器來執行的，JavaScript 決議器在運行 JavaScript 代碼的時候分為兩步：預決議和代碼執行，

• 預決議：js引擎會把js里面所有的 var 還有 function 提升到當前作用域的最前面

• 代碼執行：從上到下執行JS陳述句

預決議只會發生在通過 var 定義的變數和 function 上，學習預決議能夠讓我們知道為什么在變數宣告之前訪問變數的值是 undefined，為什么在函式宣告之前就可以呼叫函式，

5.1、變數預決議(變數提升)🔥

變數預決議也叫做變數提升、函式提升

變數提升: 變數的宣告會被提升到當前作用域的最上面，變數的賦值不會提升

console.log(num);  // 結果是多少？
var num = 10;   
// undefined



//相當于執行了以下代碼
var num;		// 變數宣告提升到當前作用域最上面
console.log(num);
num = 10;		// 變數的賦值不會提升

5.2、函式預決議(函式提升)🔥

函式提升： 函式的宣告會被提升到當前作用域的最上面，但是不會呼叫函式，

fn();				//11
function fn() {
    console.log('11');
}

5.3、解決函式運算式宣告呼叫問題🔥

對于函式運算式宣告呼叫需要記住：函式運算式呼叫必須寫在函式宣告的下面

// 匿名函式(函式運算式方式):若我們把函式呼叫放在函式宣告上面
fn();
var  fn = function() {
    console.log('22'); // 報錯
}


//相當于執行了以下代碼
var fn;
fn();      //fn沒賦值，沒這個，報錯
var  fn = function() {
    console.log('22'); //報錯
}

5.4、預決議練習🔥

預決議部分十分重要，可以通過下面4個練習來理解，
Pink老師的視頻講解預決議：https://www.bilibili.com/video/BV1Sy4y1C7ha?p=143

// 練習1
var num = 10;
fun();
function fun() {
    console.log(num);	//undefined
    var num = 20;
}
// 最終結果是 undefined

上述代碼相當于執行了以下操作

var num;
function fun() {
    var num;
    console.log(num);
    num = 20;
}
num = 10;
fun();

// 練習2
var num = 10;
function fn(){
    console.log(num);		//undefined
    var num = 20;
    console.log(num);		//20
}
fn();
// 最終結果是 undefined 20

上述代碼相當于執行了以下操作

var num;
function fn(){
    var num;
    console.log(num);
    var num = 20;
    console.log(num);
}
num = 10;
fn();

// 練習3
var a = 18;
f1();

function f1() {
    var b = 9;
    console.log(a);
    console.log(b);
    var a = '123';
}

上述代碼相當于執行了以下操作

var a;
function f1() {
    var b;
    var a
    b = 9;
    console.log(a);	//undefined
    console.log(b);	//9
    a = '123';
}
a = 18;
f1();

// 練習4
f1();
console.log(c);
console.log(b);
console.log(a);
function f1() {
    var a = b = c = 9;
    // 相當于 var a = 9; b = 9;c = 9;  b和c的前面沒有var宣告,當全域變數看
    // 集體宣告 var a = 9,b = 9,c = 9;
    console.log(a);
    console.log(b);
    console.log(c);
}

上述代碼相當于執行了以下操作

function f1() {
    var a;
    a = b = c = 9;
    console.log(a);	//9
    console.log(b);	//9
    console.log(c);	//9
}
f1();
console.log(c);	//9
console.log(b);	//9
console.log(a);	//報錯 a是區域變數