# JS 常用的內建函式
# 數字或數學相關內建函式
+ 將字串轉為數字
1. `Number()`
``` js
let a = '123' //string
console.log(Number(a)) //number
```
2. `parseInt(string, [radix])` 函式會把第一個參數變成字串（相當於執行 `ToString()`）再回傳整數或是 NaN。如果不是 NaN，回傳值會把第一個參數參照指定的 radix 後轉換成整數， radix 為介於 2 - 36 之間的數字。
``` js
console.log(parseInt('2', 10)) //2 將 '2' 轉為 10 進位制
console.log(parseInt('2.888', 10)) //2 若遇小數將無條件捨去
console.log(parseInt('123', 5)) //38 將 '123' 轉為 5 進位制
/*
當第 1 個參數 string 不能轉換為數字或是 radix 不在 2 ~ 36 的範圍內會回傳 NaN
*/
```
> 如果 radix 是 undefined 或 0（或留空）的話，JavaScript 會：
>
> + 如果 string 由 "0x" 或 "0X" 開始，radix 會變成代表十六進位的 16，並解析字串的餘數。
> + 如果 string 由 0 開始，則 radix 會變成代表八進位的 8 或十進位的 10，但到底會變成 8 還是 10 則取決於各實做。ECMAScript 規定用代表十進位的 10，但也不是所有瀏覽器都支持。因此，使用 parseInt 時一定要指定 radix。
> + 如果 string 由其他字串開始，radix 就會是十進位的 10。
+ `Math.ceil()` 無條件進位
``` js
let a = 5.3
console.log(Math.ceil(a)) //6
```
+ `Math.floor()` 無條件捨去
``` js
let a = 5.3
console.log(Math.floor(a)) //5
```
+ `Math.round()` 四捨五入
``` js
let a = 5.3
let b = 5.5
console.log(Math.round(a)) //5
console.log(Math.round(b)) //6
```
+ `Math.abs()` 絕對值
``` js
let a = -5
let b = 5
console.log(Math.abs(a)) //5
console.log(Math.abs(b)) //5
```
+ `Math.pow`(base, exponent) 次方運算
``` js
console.log(Math.pow(7, 3)) // 343 即 7 的 3 次方
console.log(Math.pow(2, 4)) // 16 即 2 的 4 次方
```
+ `Math.sqrt()` 開根號
``` js
let a = 9
let b = 16
console.log(Math.sqrt(a)) //3
console.log(Math.sqrt(b)) //4
```
+ `Math.ramdom()` 隨機取數
+ 從 0 ~ 9 之間取任一小數 (包含 0 但不包含 1)
``` js
//examples
console.log(Math.random()) //0.3081682900388987
console.log(Math.random()) //0.18689516627171376
console.log(Math.random()) //0.08290022112004714
//......
//可利用數學自定義隨機數範圍
//example
console.log(Math.floor(Math.random() * 10 + 1)) //隨機數範圍 1 ~ 10
```
+ `toFixed.(digits)` 取小數第幾位並四捨五入
``` js
console.log(123.456.toFixed(2)) //123.46
//如省略參數 預設值為 0
```
# 字串相關內建函式
+ `toUpperCase()` 將字串轉換為大寫
``` js
let a = 'abc'
console.log(toUpperCase(a)) //'ABC'
```
+ `toLowerCase()` 將字串轉換為小寫
``` js
let a = 'ABC'
console.log(toLowerCase(a)) //'abc'
```
+ `indexOf()` 回傳字串的第一個索引值
``` js
let a = 'Today is a good day.'
console.log(a.indexOf('a')) //3
console.log(a.indexOf('z')) //-1
//如找不到字串會回傳 -1
```
+ `replace(substr, newSubstr)` 替換指定字串
``` js
let a = 'Apples is round, and apples is juicy.'
console.log(a.replace('is', 'are')) //'Apples are round, and apples is juicy.' 只會替換首個指定字串
console.log(a.replace(/is/g, 'are'))
//'Apples are round, and apples are juicy.' g 代表 global 全域替換，將所有指定字串都替換
/*註:
如要忽略大小寫可用 i 參數 e.g., console.log(a.replace(/apples/gi, oranges))
expected output: 'oranges are round, and oranges are juicy.'
*/
```
+ `trim()` 去除字串前後的空白
``` js
let a = ' hello! '
console.log(trim(a)) //'hello!'
```
+ `split(separator, [limits])` 將字串拆解並回傳一個**陣列**
``` js
let a = 'Today!is!a!good!day.'
console.log(a.split('!')) // ["Today", "is", "a", "good", "day."]
console.log(a.split('!', 2)) // ["Today", "is"]
console.log(a.split('!', 3)) // ["Today", "is", "a"]
```
+ `slice(bigin, [end])` 提取字串的某一個部分並回傳一個新字串
``` js
let a = 'hello~'
console.log(a.slice(3)) //'lo~'
console.log(a.slice(3, 5)) //'lo' 不包含 end
```
# 陣列相關內建函式
+ `map(function)` 原陣列的每一個元素經由回呼函式運算後所回傳一個新的陣列
+ 不會改變原陣列
+ 沒有 return 的話會回傳 undefined
語法：
```js
const newArr = arr.map(function (value, index, array) {
//...
})
```
範例：
``` js
let arr = [1, 2, 3]
function double (x) {
return x*2
}
console.log(arr.map(double)) // [2, 4, 6]
```
## 重要補充
`map()` 與 `forEach()` 使用語法相同也非常相似，但是 `forEach()` 會原地修改原本的陣列；`map()` 則是會回傳新陣列。
### 什麼時候不要用 `map()` ？
在不需要使用回傳的新陣列時。
---
+ `concat(array)`
The concat() method is used to merge two or more arrays. This method does not change the existing arrays, but instead returns a new array.
範例：
```javascript=
const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const array3 = array1.concat(array2);
console.log(array3);
// expected output: Array ["a", "b", "c", "d", "e", "f"]
```
+ `find(function)` 方法會回傳第一個滿足所提供之測試函式的元素值。否則回傳 undefined。
語法：
```js
let item = arr.find(callback(element[, index[, array]])[, thisArg])
// thisArg 為執行 callback 函式時被當作 this 的物件。
```
範例：
```javascript=
const array1 = [5, 12, 8, 130, 44];
const found = array1.find(element => element > 10);
console.log(found);
// expected output: 12
```
+ `findIndex()` 方法，它回傳被找到的元素在陣列中的索引，而不是它的值，如果沒有符合的對象，將返回 -1 。
語法同 `.find()`。
+ `join()` 方法會將陣列中所有的元素連接、合併成一個字串，並回傳此字串。
範例：
```javascript=
const elements = ['Fire', 'Air', 'Water'];
console.log(elements.join()); // 無參數預設用逗號連接
// expected output: "Fire,Air,Water"
console.log(elements.join(''));
// expected output: "FireAirWater"
console.log(elements.join('-'));
// expected output: "Fire-Air-Water"
```
+ `pop()` 方法會移除並回傳陣列的**最後一個元素**。**此方法會改變陣列的長度**。
範例：
```javascript=
const plants = ['broccoli', 'cauliflower', 'cabbage', 'kale', 'tomato'];
console.log(plants.pop());
// expected output: "tomato"
console.log(plants);
// expected output: Array ["broccoli", "cauliflower", "cabbage", "kale"]
plants.pop();
console.log(plants);
// expected output: Array ["broccoli", "cauliflower", "cabbage"]
```
+ `shift()` 方法會移除並回傳陣列的**第一個元素**。**此方法會改變陣列的長度**。
範例：
```javascript=
const array1 = [1, 2, 3];
const firstElement = array1.shift();
console.log(array1);
// expected output: Array [2, 3]
console.log(firstElement);
// expected output: 1
```
+ `unshift()` 方法會添加一個或多個元素至陣列的開頭，並且**回傳陣列的新長度**。
範例：
```javascript=
const array1 = [1, 2, 3];
console.log(array1.unshift(4, 5));
// expected output: 5
console.log(array1);
// expected output: Array [4, 5, 1, 2, 3]
```
+ `filter`(function) 原陣列中通過回呼函式 (true) 檢驗之元素所回傳的新陣列
語法：
```js
var newArray = arr.filter(callback(element[, index[, array]])[, thisArg])
```
範例：
``` js
let arr = [1, 2, 3, 11, 12]
function isBig (x) {
return x >= 10
}
console.log(arr.filter(isBig)) // [11, 12]
// 1, 2, 3 代入 isBig function 之結果為 false 所以被 filter 掉
```
+ `slice(begin, [end])` 擷取某陣列的部分並回傳一個新陣列
``` js
let arr = [1, 2, 3, 4, 5, 6]
console.log(arr.slice(1)) //[2, 3, 4, 5, 6]
console.log(arr.slice(1, 4)) //[2, 3, 4] 不包含 end
```
+ `splice(start, [deleteCount], [item1], [item2].......])`
+ start 代表從哪個索引值開始更改陣列
+ deleteCount 代表要刪除的元素數量
+ item 為要添加的元素
+ 可以藉由刪除既有元素並／或加入新元素來改變**原本**陣列的內容
+ 會回傳一個被刪除的元素陣列。如果只有一個元素被刪除，依舊是回傳包含一個元素的陣列
+ 倘若沒有元素被刪除，則會回傳空陣列
``` js
//從索引 0 的位置開始，刪除 2 個元素並插入「parrot」、「anemone」和「blue」
var myFish = ['angel', 'clown', 'trumpet', 'sturgeon'];
var removed = myFish.splice(0, 2, 'parrot', 'anemone', 'blue');
// myFish 為 ["parrot", "anemone", "blue", "trumpet", "sturgeon"]
// removed 為 ["angel", "clown"]
```
以上範例來自 [Array.prototype.splice()](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Array/splice)。
+ `sort([compareFunction])`
+ 對原陣列的所有元素進行排序(會更改原陣列)，並回傳此陣列。
+ 若省略 compareFunction 排序順序會根據字串的 Unicode 編碼位置（code points）而定。
``` js
const months = ['March', 'Jan', 'Feb', 'Dec'];
months.sort();
console.log(months);
// expected output: Array ["Dec", "Feb", "Jan", "March"]
const array1 = [1, 30, 4, 21, 100000];
array1.sort();
console.log(array1);
// expected output: Array [1, 100000, 21, 30, 4]
//如是為了比較數字而不是字串，比較函式(compareFunction)可以僅僅利用 a 減 b。以下函式將會升冪排序陣列：
var numbers = [4, 2, 5, 1, 3];
numbers.sort(function(a, b) {
return a - b;
});
console.log(numbers); // [1, 2, 3, 4, 5]
//降冪排序則用 b 減 a
numbers.sort(function(a, b) {
return b - a;
});
console.log(numbers); // [5, 4, 3, 2, 1]
```
以上範例來自 [Array.prototype.sort()](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Array/sort)。
## 重要
+ `reduce()`
將一個**累加器**及陣列中每項元素（由左至右）傳入回呼函式，將陣列化為單一值。
語法：
```js
arr.reduce(callback[accumulator, currentValue, currentIndex, array], initialValue)
// accumulator, currentValue 為必要參數其他為選擇性
```
### 懶人包 `reduce()` 有無提供 initialValue 運算方式會有所差異
+ 有提供 initialValue：
+ accumulator 的初始值就是 initialValue
+ currentIndex 會從序數 0 開始
+ 沒提供 initialValue：
+ accumulator 的初始值會是 arr[0] 也就是陣列的第 0 筆資料
+ currentIndex 會從序數 1 開始
範例 1（有給 initialValue）：
```js
[0, 1, 2, 3, 4].reduce(
(accumulator, currentValue, currentIndex, array) => {
return accumulator + currentValue;
},
10
);
```
| `callback` | `accumulator` | `currentValue` | `currentIndex` | `array` | return value |
| :---------- | :------------ | :------------- | :------------- | :---------------- | :----------- |
| first call | `10` | `0` | `0` | `[0, 1, 2, 3, 4]` | `10` |
| second call | `10` | `1` | `1` | `[0, 1, 2, 3, 4]` | `11` |
| third call | `11` | `2` | `2` | `[0, 1, 2, 3, 4]` | `13` |
| fourth call | `13` | `3` | `3` | `[0, 1, 2, 3, 4]` | `16` |
| fifth call | `16` | `4` | `4` | `[0, 1, 2, 3, 4]` | `20` |
範例 2（沒有給 initialValue）：
```js
[0, 1, 2, 3, 4].reduce(
function (
accumulator,
currentValue,
currentIndex,
array
) {
return accumulator + currentValue;
}
);
```
| `callback` | `accumulator` | `currentValue` | `currentIndex` | `array` | return value |
| :---------- | :------------ | :------------- | :------------- | :---------------- | :----------- |
| first call | `0` | `1` | `1` | `[0, 1, 2, 3, 4]` | `1` |
| second call | `1` | `2` | `2` | `[0, 1, 2, 3, 4]` | `3` |
| third call | `3` | `3` | `3` | `[0, 1, 2, 3, 4]` | `6` |
| fourth call | `6` | `4` | `4` | `[0, 1, 2, 3, 4]` | `10` |
# for in & for of
## 用於陣列時
+ for in 遍歷的是序數：
```js
const arr = ['i', 'o', 'u']
for (let i in arr) {
console.log(i)
}
// 0 1 2
```
+ for of 遍歷的是值：
```js
const arr = ['i', 'o', 'u']
for (let i of arr) {
console.log(i)
}
// i o u
```
## 用於物件時
+ for in 遍歷的是物件屬性名稱：
```js
const obj = {
firstname: 'Leo',
lastname: 'Wang'
}
for (let i in obj) {
console.log(i)
}
// firstname
// lastname
```
### 補充
for in 會將一物件之原型鏈上所有數都列出！若想避免可用 `hasOwnProperty()` 方法。
### 注意
**for of 沒辦法遍歷物件！**
若還是想遍歷物件可用 `Object.keys()` & `Object.values()` & `Object.entries()`
+ `Object.keys()` 可以遍歷一個物件的**屬性名稱**並回傳一個陣列：
```js
const obj = {a: 1, b: 2, c: 3};
console.log(Object.keys(obj)); // ["a", "b", "c"]
```
+ `Object.values()` 可以遍歷一個物件的**值**並回傳一個陣列：
```js
const obj = {a: 1, b: 2, c: 3};
console.log(Object.values(obj)); // [1, 2, 3]
```
+ `Object.values()` 可以遍歷一個物件的**屬性與值並且配對**再回傳一個陣列：
```js
const obj = {a: 1, b: 2, c: 3};
console.log(Object.entries(obj))
/*
[
["a", 1],
["b", 2],
["c", 3]
]
*/
```
Sign in with Wallet
Connect another wallet