Udemy課程：[The Web Developer Bootcamp 2021（Colt Steele）](https://www.udemy.com/course/the-web-developer-bootcamp/)
# 第 22 節： Callbacks & Array Methods
###### tags: `JavaScript` `Udemy` `The Web Developer Bootcamp 2021`
2021.03.02（Tue.）～2021.03.08（Mon.）
## ● 上課筆記
## 1.forEach()
forEach() 方法會將陣列內的每個元素，皆傳入並執行給定的函式一次。
* 範例：
```javascript=
const numbers = [1,2,3,4,5]
numbers.forEach(function(el){
console.log(el)
})
//印出1 2 3 4 5
```
那其實上面做的事情跟下面for loop是一樣的：
```javascript=
const numbers = [1,2,3,4,5]
for(let el in numbers){
console.log(el)
}
```
## 2.map()
map() 方法會建立一個新的陣列，其內容為原陣列的每一個元素經由回呼函式運算後所回傳的結果之集合。
* 範例：
```javascript=
const numbers = [1,2,3,4,5]
numbers.map(function(num){
return num * 2
})
//印出 [2,4,6,8,10]
//但numbers本身不會變
```
## 3.arrow function
箭頭函式運算式（arrow function expression）擁有比函式運算式還簡短的語法。它沒有自己的 this、arguments、super、new.target 等語法。本函式運算式適用於非方法的函式，但不能被用作建構式（constructor）。
* 範例：
```javascript=
//一般寫法：
const add = function(x,y){
return x * x
}
//arrow function寫法：
const add =(x,y) => {
return x + y
}
//沒有參數的寫法：
const rolldie = () => {
return Math.floor(Math.random() * 6) + 1
}
//一個參數的寫法：
const square = x =>{
return x * x
}
```
****
**Arrow Function Implicit Returns**
arrow function有個特別的用法，大括號用小括號取代的話，那小括號裏頭的東西也隱含了要return的意思。
（但適用於只需要return一項）
* 範例：
```javascript=
//原本的寫法：
const rolldie = () => {
return Math.floor(Math.random() * 6) + 1
}
//用小括號取代的寫法：
//就可以不必使用return，卻有return的效果了
const rolldie = () => (
Math.floor(Math.random() * 6) + 1
)
//也有更簡寫的寫法：
//先給個原版：
const add =(x,y) => {
return x + y
}
//縮減版：
const add =(x,y) => x + y
```
底下再來一組例子：
> 底下所有function都是執行相同的事情
```javascript=
//regular function expression
const isEven = function(num){
return num % 2 === 0
}
//arrow function with parens around param
const isEven = (num) => {
return num % 2 === 0
}
//no parens around param
const isEven = num => (
return num % 2 === 0
)
//one-liner implicit return
const isEven = num => num % 2 === 0
```
## 4.setTimeout() and setInterval()
### **setTimeout()**
setTimeout()方法設置一個定時器，該定時器在定時器到期後執行一個函式或指定的一段代碼。
* 範例：
```javascript=
//setTimeout()裡面會放兩個參數，前面是要執行的動作，後面是時間（ms）
//在3秒後印出 Hello!!!
setTimeout(() => {
console.log("Hello!!!")
}, 3000)
//先印出Hello!!!，過3秒印出 ...are youstill there?
console.log("Hello!!!")
setTimeout( () => {
console.log("...are youstill there?")
}, 3000)
```
****
### **setInterval()**
setInterval()此函式作用為重複地執行一個函式呼叫或一個程式碼片斷, 每一次執行間隔固定的延遲時間. 此函式呼叫時將傳回一個間隔代碼(Interval ID)用以識別該間隔程序, 因此後續您可以呼叫 clearInterval() 函式移除該間隔程序
* 範例：
```javascript=
//setTimeout()裡面會放兩個參數，前面是要執行的動作，後面是時間（ms）
//每隔2秒印出隨機數
const id = setInterval( () => {
console.log(Math.random())
} ,2000)
//想停止這個計時器就使用clearInterval()
clearInterval(id)
```
## 5.filter()
filter() 方法會建立一個經指定之函式運算後，由原陣列中通過該函式檢驗之元素所構成的新陣列。
* 範例：
有點像是篩選的概念，像底下filter()裡面做的動作就是要找word.length > 6，找到後篩選出來，就會成一個新陣列。而原本的陣列是不會被改變的。
```javascript=
const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present']
const result = words.filter(word => word.length > 6)
console.log(result)
//印出["exuberant", "destruction", "present"]
```
## 6.some() and every()
> 參考網址：[JavaScript 陣列中兩個冷門的方法：Every、Some](https://noob.tw/js-every-some/)
JavaScript 的陣列中，除了常用的 sort、map 以外，其實還有 every、some，但這兩個方法好像比較不常用到。
這兩個方法回傳的都是布林值。
### **some()**
Array.some 是用來檢查陣列裡面是否有一些符合條件。只要有一個以上符合條件就會回傳 true，全部都不是的話會回傳 false。
* 範例：
```javascript=
const students = [
{
name: 'Daniel',
age: 22,
country: 'Malaysia'
},
{
name: 'Noob',
age: 21,
country: 'Taiwan'
},
{
name: 'Coin',
age: 17,
country: 'Taiwan',
}
]
const result = students.some(x => x.age >= 18)
// 執行結果：result 為 true
const result2 = students.some(x => x.country === 'Singapore')
// 執行結果：result 為 false
```
****
### **every()**
Array.every 和 some 類似，不過要陣列裡面的所有東西都符合條件才會回傳 true，只要有一個不是就會回傳 false。
* 範例：
```javascript=
const students = [
{
name: 'Daniel',
age: 22,
country: 'Malaysia'
},
{
name: 'Noob',
age: 21,
country: 'Taiwan'
},
{
name: 'Coin',
age: 17,
country: 'Taiwan',
}
]
const result = students.every(x => x.age >= 18);
// 執行結果：result 為 false
```
## 7.reduce()
reduce() 方法將一個累加器及陣列中每項元素（由左至右）傳入回呼函式，將陣列化為單一值。
簡單來說就是 reduce 方法跟其他陣列方法（例如：map、filter）的差別是它會 return 一個值，而不是一個新陣列，這會連帶使 reduce 的語法結構跟邏輯與其他方法不太相同。
* 範例：
```javascript=
[3,5,7,9,11].reduce((accumulator, currentValue) => {
return accumulator + currentValue //最後return出35
})
```
| Callback | accumulator | currentValue | return value |
| --------- | ----------- | ------------ | ------------ |
| 1st. call | 3 | 5 | 8 |
| 2nd. call | 8 | 7 | 15 |
| 3rd. call | 15 | 9 | 24 |
| 4th. call | 24 | 11 | 35 |
> 參數說明：
> （1）accumulator：累加器
> （2）currentValue：當前元素
> （3）currentIndex：當前元素的索引（選擇性）
> （4）array: 呼叫 reduce() 方法的陣列（選擇性）
* 範例：
```javascript=
const prices = [1.99,1.50,19.99,49.99,30.50]
const total = prices.reduce((total, price) => {
return total + price
//return出111.97，也就是1.99+1.50+19.99+49.99+30.50
})
```
Sign in with Wallet
Connect another wallet