# 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));
```
把有問題的狀況前面先解決掉(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);
});
```
---
### .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
---
Sign in with Wallet
Connect another wallet