JavaScript 複習04

阿新 • • 發佈：2020-08-11

1 - 陣列

1.1 陣列的概念

陣列可以把一組相關的資料一起存放，並提供方便的訪問(獲取）方式。
陣列是指一組資料的集合，其中的每個資料被稱作元素，在陣列中可以存放任意型別的元素。陣列是一種將一組資料儲存在單個變數名下的優雅方式。

1.2 建立陣列

JS 中建立陣列有兩種方式：

利用 new 建立陣列

var 陣列名 = new Array() ；
var arr = new Array();   // 建立一個新的空陣列

注意 Array () ，A 要大寫

利用陣列字面量建立陣列

//1. 使用陣列字面量方式建立空的陣列
var  陣列名 = []；
//2. 使用陣列字面量方式建立帶初始值的陣列
var  陣列名 = ['小白','小黑','大黃','瑞奇'];

陣列的字面量是方括號 [ ]
宣告陣列並賦值稱為陣列的初始化
這種字面量方式也是我們以後最多使用的方式

陣列元素的型別

陣列中可以存放任意型別的資料，例如字串，數字，布林值等。
```
var arrStus = ['小白',12,true,28.9];
```

1.3 獲取陣列中的元素

索引 (下標) ：用來訪問陣列元素的序號（陣列下標從 0 開始）。

陣列可以通過索引來訪問、設定、修改對應的陣列元素，可以通過“陣列名[索引]”的形式來獲取陣列中的元素。

// 定義陣列
var arrStus = [1,2,3];
// 獲取陣列中的第2個元素
alert(arrStus[1]);

注意：如果訪問時陣列沒有和索引值對應的元素，則得到的值是undefined

1.4 遍歷陣列

陣列遍歷

把陣列中的每個元素從頭到尾都訪問一次（類似學生的點名），可以通過 for 迴圈索引遍歷陣列中的每一項

var arr = ['red','green', 'blue'];
for(var i = 0; i < arr.length; i++){
    console.log(arrStus[i]);
}

陣列的長度

陣列的長度：預設情況下表示陣列中元素的個數

使用“陣列名.length”可以訪問陣列元素的數量（陣列長度）。
```
var arrStus = [1,2,3];
alert(arrStus.length);  // 3
 
```
注意：
- 此處陣列的長度是陣列元素的個數，不要和陣列的索引號混淆。
當我們數組裡面的元素個數發生了變化，這個 length 屬性跟著一起變化
- 陣列的length屬性可以被修改：
如果設定的length屬性值大於陣列的元素個數，則會在陣列末尾出現空白元素；
- 如果設定的length屬性值小於陣列的元素個數，則會把超過該值的陣列元素刪除

1.5 陣列中新增元素

陣列中可以通過以下方式在陣列的末尾插入新元素：

  陣列[ 陣列.length ] = 新資料;

2 - 函式

2.1 函式的概念

在 JS 裡面，可能會定義非常多的相同程式碼或者功能相似的程式碼，這些程式碼可能需要大量重複使用。雖然 for迴圈語句也能實現一些簡單的重複操作，但是比較具有侷限性，此時我們就可以使用 JS 中的函式。

函式：就是封裝了一段可被重複呼叫執行的程式碼塊。通過此程式碼塊可以實現大量程式碼的重複使用。

2.2 函式的使用

宣告函式

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

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

呼叫函式

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

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

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

函式的封裝

函式的封裝是把一個或者多個功能通過函式的方式封裝起來，對外只提供一個簡單的函式介面
簡單理解：封裝類似於將電腦配件整合組裝到機箱中 ( 類似快遞打包）

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

/* 
   計算1-100之間值的函式
*/
// 宣告函式
function getSum(){
  var sumNum = 0;// 準備一個變數，儲存數字和
  for (var i = 1; i <= 100; i++) {
    sumNum += i;// 把每個數值 都累加 到變數中
  }
  alert(sumNum);
}
// 呼叫函式
getSum();

2.3 函式的引數

函式引數語法

形參：函式定義時設定接收呼叫時傳入
實參：函式呼叫時傳入小括號內的真實資料

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

函式引數的運用：

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

呼叫的時候實參值是傳遞給形參的
形參簡單理解為：不用宣告的變數
實參和形參的多個引數之間用逗號（,）分隔

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

注意：在JavaScript中，形參的預設值是undefined。

小結：

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

2.4 函式的返回值

return 語句

返回值：函式呼叫整體代表的資料；函式執行完成後可以通過return語句將指定資料返回 。

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

在使用 return 語句時，函式會停止執行，並返回指定的值
如果函式沒有 return ，返回的值是 undefined

break ,continue ,return 的區別

break ：結束當前的迴圈體（如 for、while）
continue ：跳出本次迴圈，繼續執行下次迴圈（如 for、while）
return ：不僅可以退出迴圈，還能夠返回 return 語句中的值，同時還可以結束當前的函式體內的程式碼

2.5 arguments的使用

當不確定有多少個引數傳遞的時候，可以用 arguments 來獲取。JavaScript 中，arguments實際上它是當前函式的一個內建物件。所有函式都內建了一個 arguments 物件，arguments 物件中儲存了傳遞的所有實參。arguments展示形式是一個偽陣列，因此可以進行遍歷。偽陣列具有以下特點：

具有 length 屬性
按索引方式儲存資料
不具有陣列的 push , pop 等方法

注意：在函式內部使用該物件，用此物件獲取函式呼叫時傳的實參。

2.6 函式案例

	函式內部可以呼叫另一個函式，在同一作用域程式碼中，函式名即代表封裝的操作，使用函式名加括號即可以將封裝的操作執行。

2.7 函式的兩種宣告方式

自定義函式方式(命名函式)

利用函式關鍵字 function 自定義函式方式
```
// 宣告定義方式
function fn() {...}
// 呼叫  
fn();  
```
- 因為有名字，所以也被稱為命名函式
- 呼叫函式的程式碼既可以放到宣告函式的前面，也可以放在宣告函式的後面
函式表示式方式(匿名函式）

利用函式表示式方式的寫法如下：
```
// 這是函式表示式寫法，匿名函式後面跟分號結束
var fn = function(){...}；
// 呼叫的方式，函式呼叫必須寫到函式體下面
fn();
```
- 因為函式沒有名字，所以也被稱為匿名函式
- 這個fn 裡面儲存的是一個函式
- 函式表示式方式原理跟宣告變數方式是一致的
- 函式呼叫的程式碼必須寫到函式體後面