---
# System prepended metadata

title: JS while用法/ 函式介紹 / 陣列和陣列method

---

# JS while用法/ 函式介紹 / 陣列和陣列method

## while

起始值,條件,執行

```javascript=
    let i = 0; //起始值
    while(i<10){
        console.log(i); //印出0~9
    }
``` 

條件沒符合就結束(沒設好條件會造成無限執行)
:::info
**for和while都適用**
continue 假設符合條件，直接進行下一圈
break 假設符合條件，直接結束
:::

## 函式 Function
函式 : 將要執行的動作包裝在一個區塊中，並透過呼叫該函式名稱來使用。


### 函式陳述式 (function declaration)
```javascript=
function hello() {
  console.log("aaa");
  console.log("aba");
  console.log("aac");
}

hello();
```

印出 hello()裡面，所有console.log內容

### 函式表達式 function expression

是先宣告一個變數，透過將 function 宣告的函式，賦予到此變數上，而此函式不一定需要名稱，若沒有定義函式名稱則為**匿名函式**

```javascript=
const hello2 = function () {
  console.log("aaa");
  console.log("aba");
  console.log("aac");
};

hello2();
```

### 箭頭函式 (arrow function)

類似函式的簡化寫法(只適用於匿名函式)，但原理不同。

```javascript=
let e = () => {
  console.log("arrowhere");
};

e();
```
---

## function加入參數

```javascript=
function sayHello(a, b, c) {
  console.log(a);
  console.log(b);
  console.log(c);
}

sayHello(123, 456, 789);
```


:::warning

**參數 vs 引數**
以上方程式為例，函式設置的a,b,c是**參數**，下方執行sayhello裡面給的值是**引數**，少給引數的變數顯示undifined，多給超過設置變數的引值則不顯示。
:::

### 直接賦予引數
如果沒設置就用賦予的，如果設置就用設置的

```javascript=
function sayHello(a, b = 5, c = 8) {
  console.log(a);
  console.log(b);
  console.log(c);
}

sayHello(123);
```

---

## 回傳值 return value

將一個函式中透過return回傳結果到宣告的變數中(並非顯示)
```javascript=
function plus(a, b) {
  let result = a + b;
  return result;
}

plus(3, 9); 有回傳值但不會印出來
console.log(plus(3, 9)); 印出回傳值12

```

範例(a+b但不處理負數運算): 
```javascript=
function hello2(a, b) {
  if (a < 0 || b < 0) {
    return "err"; 
  } else {
    return a + b;
  }
}

console.log(hello2(10, 30));
console.log(hello2(-10, 10));
```
![](https://i.imgur.com/yO5eFby.png)

把有問題的狀況前面先解決掉(early return)
```javascript=
function hello2(a, b) {
  if (a < 0 || b < 0) {
    return "err"; 
  } 
    return a + b;
}
```

範例2(BMI計算取小數第二位)

```javascript=
function BMI(weight, height) {
  let h = height / 100;
  let result = weight / (h * h);
  return result.toFixed(2);
  //return Math.round(result * 100) / 100;  
}

console.log(BMI(65, 168));
```

:::info
**toFixed**
https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed

**Math.round取小數(四捨五入)**
https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Math/round
:::

範例2(判斷閏年)

```javascript=
function findLeapYear(year) {
  if (year % 4 != 0 && (year % 100 == 0 || year % 400 != 0)) {
    return "平年";
  }
  return "閏年";
}

```

---
## 陣列 array

取最後一個 array.lenght - 1

array.push 從最後方推入一個資料
array.unshift 從頭推入一個資料
array.pop 抽離最後一個資料
array.shift 抽離第一個資料

範例(取陣列頭跟尾)
```javascript=
let a = [1, 2, 3, 4, 5];
let b = ["a", "b", "c", "f", "k"];

function headAndTail(list) {
  let NewArray = [];
  NewArray.push(list.shift());
  NewArray.push(list.pop());
  return NewArray;
}

console.log(headAndTail(a));
console.log(headAndTail(b));

```

---

### splice(從哪個位置開始,刪除數量)

```javascript=
let list = ["a", "b", "c"];
list.splice(1, 1);
console.log(list); // ["a","c"]
```

範例("a","b"中間加入"z")
```javascript=
let list = ["a", "b", "c"];

list.splice(1, 0, "Z");//['a', 'Z', 'b', 'c']

console.log(list);
```

範例2(用slice只取陣列頭尾的function)
```javascript=
let a = [1, 2, 3, 4, 5];
let b = ["a", "b", "c", "f", "k"];

function headAndTail(list) {
  list.splice(1, list.length - 2);
  return list;
}

console.log(headAndTail(a));
console.log(headAndTail(b));
```

---

### .concat 組合陣列
將資料合併

範例(將list和list2的資料合併)
```javascript=
const list = ["a", "b", "c"];
const list2 = ["d", "e"];
let listAll = list.concat(list2);
console.log(listAll); //['a', 'b', 'c', 'd', 'e']

```

---

### .indexOf 

索引陣列中是否有一樣物件並給出索引值(沒有給-1)
```javascript=
const list = ["a", "b", "c", "d", "e"];

console.log(list.indexOf("e")); //4
console.log(list.indexOf("y")); //-1
```
---

### .includes 
索引陣列中是否有一樣物件並給出boolean
```javascript=
const list = ["a", "b", "c", "d", "e"];

console.log(list.includes("e")); //true
```

---
### .forEach (currentValue,索引值(index))

.forEach(function(currentValue,索引值index))

本身沒有回傳值，是針對每一個元素執行動作。(map有回傳值)

// iteration 歷遍
```javascript=
let list = ["a", "b", "c", "d"];

list.forEach(function (x) {
  console.log(x);
});

```

![](https://i.imgur.com/DFSoMIL.png)

---
### .find 
找到陣列中第一個符合條件的

範例(找到陣列中的"c")
```javascript=
let list = ["a", "b", "c", "d"];

let result = list.find(function (x) {
  return x == "c";
});

console.log(result); // c
```
範例(找到陣列裡面字串長度超過3的字)
```javascript=
const list = ["a", "b", "cccc", "dssss"];

const result = list.find(function (x) {
  return x.length >= 3;
});

console.log(result);

```
---
### .filter
跟find一樣，但會過濾出全部符合的

範例找到陣列裡面字串長度超過3的字
```javascript=
const list = ["a", "b", "cccc", "dssss"];

const result = list.filter(function (x) {
  return x.length >= 3;
});

console.log(result);

```
---

### map
執行完後map會收集所有結果回傳一個新陣列
```javascript=
const list = [1, 2, 3, 4, 5];

const result = list.map(function (x) {
  return x * 2;
});

console.log(result);
```
---
## callback function 

說明網站:
https://medium.com/itsems-frontend/javascript-callback-function-993abc2c0b42

---