---
# System prepended metadata

title: 20230722 迴圈/函式/變數
tags: [前端課程筆記]

---

# 迴圈/函式/變數
[TOC]
### for迴圈
三個 expression 的變形
#### Expression1：在執行迴圈前先執行，通常用來宣告迴圈變數
a.可多個，以逗號隔開
```javascript!
for(let i=0,len = classA.length; i < ien ; i++){
console.log(classA[i]);
}
```
b.可省略，直接寫分號
```javascript!
let i = 0;
for (; i < classA.length; i++){
console.log(classA[i]);
}
```
#### Expression2：執行迴圈的條件(true才進去迴圈，一但false就停止)
a.可省略，但必須搭配break，否則會變成無窮迴圈
```kotlin!
for (let i =0 ; ; i++){
    
  if (i>= classA.length){
    break;
}
console.log(classA[i]);
}
```
#### Expression3：每次回圈執行完後要做的事，通常擁來更新回圈變數
a.可省略，把變數更新放在迴圈裡面做
```javascript!
for (let i=0; i < classA.length;){
  console.log(classA[i]);
  i++;
}
```
### a++ / ++a
a++：先賦值，再把 a+1
++a：a+1，再賦值

以上兩者a都會+1，但是在有賦值的情況下會有差別
```javascript!
範例：
let a = 1;
let b = a++;
a=2,b=1

let a = 1;
let c = ++a;
a=2,c=2
```
### a-- / --a
a--：先賦值，再把 a-1
--a：先把 a-1，再賦值

以上兩者a都會-1，但是在有賦值的情況下會有差別
```javascript!
範例：
let a = 2;
let b =a--;
結果 a=1,b=2

let a = 2;
let c = --a;
結果 a=1,c=1
```

```javascript!
for(let i = 0,i< classA.length;){
 console.log(classA[i]);
 i++;
}

可改寫為

for(let i = 0; i < classA.length;){
 console.log(classA[i++]);
}

console先印出classA[i]後，再把 i+1

但如果改成++i?
會先把i+1後，才印出console,此處將導致i會超出classA的索引
```

### break & continue
#### break 跳出迴圈
```
for (let i =0 ; i++){
 if (i >= classA.length)
    break;
    }
    console.log(classA[i])
} 
```
#### continue 跳到迴圈的下一次
情境：A班的第三位同學今天缺席，點名表不需要印出他的名字
```
for (let i = 0 ;i < classA.length ; i++){
  if( i == 2){
    continue;
    }
    console.log(classA[i]);
}
```

### for in 迴圈
```javascript!
for ( key in object / array){
 //code block to be executed
}
> The for in loop iterates over an object or array

若 iterate(迭代)對象是array，會拿到的是index(索引值)
得到的index不一定會照順序，如果順序很重要的話請問使用for in 迴圈
```

```javascript!
let students = [ "Jessie","John","Josh","Allen","Claire","Betty"];
for( let idx in students){
    console.log(students[idx]);
}
```

### for of 迴圈
```javascript!
for( key of iterable){
    // code block to be executed
}
```
會拿到的是值，而非index(索引值)
得到的值會照順序

```javascript!
for (let std of students){
    console.log(std);
}
```

### while 迴圈
```javascript!
while(condition){
    // code block to be executed
}
```
只要condition一直是true，就不斷執行迴圈
condition沒寫好可能導致無窮迴圈
範例：
```javascript!
let students  = ["Jessie","John","Josh","Allen","Claire","Betty"];
let i = 0;
while( i < studnets.length){
    console.log(students[i++]);
}
```

### Function 函式
定義：一段執行特定任務的程式碼
架構
```
function 函式名稱(變數){
    要執行的程式碼
}
```

### 變數 parameters
放在()中，多個變數要用逗號隔開
parameters會是local variables只能在此funtion中使用
主程式碼：放在()中Ｍ表示這個韓式要執行的任務，撰寫方式跟一般完全相同
return：函式的回傳值，呼叫這個函式可拿到回傳值
**如果function只是要做一些動作，也可以不用回傳

執行：function內的程式碼一定要「被呼叫」才會執行
執行function的必要條件：
funtion函式本身：相當於一個黑盒子，把要做的動作包在盒子裡，讓別人去使用它。別人不需要管盒子裡面在做什麼事，只需要按照規定傳入參數後，就可以拿到回傳值

```
function multiplier(a,b){
    return a*b;
}
```
caller呼叫者：透過()來呼叫要使用的function，()裡面要傳入對應的參數
`let result = multipilier (4,7);`

**沒有加入()不會呼叫function，只會取得該funtion的內容(程式碼)

為什麼要用function？
任務明確(透過function名稱即可知道任務是什麼)
方便維護
減少重複的程式碼
