# 7/13(二) 每日任務
https://hackmd.io/IuzJwv6QRyCDUliUGIRSqw
###### tags: `JavaScript` `六角四週帶你掌握 Vue.js 必要觀念`
2021.7.15（Thu.）
:::success
### ● 題目
****
從 for 到 forEach

>請將範例中 for 部分改為使用 forEach ，並達成相同效果

const array = ['100', '1500', '2000', '99']
const newArray = []
for (var i = 0; i < array.length; i++) {
  newArray.push(array[i] * 2)
}
console.log(newArray)

參考: JS 陣列方法 [Youtube 影音](https://www.youtube.com/watch?v=_vFuDQ_6Xt8)
:::

:::info
## ● 筆記：
****
1. forEach() 方法會將陣列內的每個元素，皆傳入並執行給定的函式一次。

▲ 用forEach()：

const numbers = [1,2,3,4,5]

numbers.forEach(function(el){
    console.log(el)
})
//印出1 2 3 4 5

▲ 用for迴圈：

const numbers = [1,2,3,4,5]

for(let el in numbers){
    console.log(el)
}

//或者
for(for( let i = 0 ; i < numbers.length ; i++ ){
 console.log(numbers[i]);
})

以上兩種方法得到的結果是相同的。但利用forEach( )就會更簡單明瞭，在原本的for迴圈中需要不斷透過 index 去取得陣列的對應 item，再將它傳遞進去打印的函數裡頭，我們也必須設定 index 的邊界條件，而forEach( )則不用檢查邊界條件。

:::

:::warning
## ● 答案：
****
▲ 一般寫法：

const array = ['100', '1500', '2000', '99']
const newArray = []
array.forEach(function(el){
  newArray.push((el) * 2)
})
console.log(newArray)

▲ arrow function寫法：

const array = ['100', '1500', '2000', '99']
const newArray = []
array.forEach((el)=>{
  newArray.push((el) * 2)
})
console.log(newArray)

**解釋：**
因為forEach( )會直接對陣列（array）中每一個元素抓去傳入函式執行，所以傳入的值並非index，而是value，因此必須將原本array[i]換成i即可。
:::

:::danger
## ● 參考資料：
****
1. [之前的課程筆記](https://hackmd.io/l7lgA6VBQd-1iALkJtorXA)
2. [Array 原型的 forEach 有多好用？ 學會高階函數之後都不想寫 JavaScript 以外的程式語言了](https://realdennis.medium.com/array-%E5%8E%9F%E5%9E%8B%E7%9A%84-foreach-%E6%9C%89%E5%A4%9A%E5%A5%BD%E7%94%A8-%E5%AD%B8%E6%9C%83%E9%AB%98%E9%9A%8E%E5%87%BD%E6%95%B8%E4%B9%8B%E5%BE%8C%E9%83%BD%E4%B8%8D%E6%83%B3%E5%AF%AB-javascript-%E4%BB%A5%E5%A4%96%E7%9A%84%E7%A8%8B%E5%BC%8F%E8%AA%9E%E8%A8%80%E4%BA%86-dc4b594a045a)

:::