# ForEach 搭配箭頭函式寫法

### ForEach 原本的寫法：

data = [10, 20, 30];
total = 0;

data.forEach(function (item) {
  total += item;
});
console.log(total);//60

### 箭頭函式的寫法：
1. function 拿掉
2. 並在參數後補上 `=>` 符號，就完成囉。

data = [10, 20, 30];
total = 0;

data.forEach((item)=>{
  total += item;
});
console.log(total);//60

:::warning
雖然一個參數的情況下可以不用在參數外加 () 小括號，但兩個參數以上就會報錯，所以還是建議不管有幾個參數都建議習慣性加上小括號唷！
:::

### 箭頭函式再精簡：
把 {} 大括號拿掉後，縮成一行也是可以辦到的唷！
此種更精簡寫法適用於函式內程式碼不多時，程式碼較多的情況不建議使用。

data = [10, 20, 30];
total = 0;

data.forEach((item)=> total += item );
console.log(total);//60

#### 範例： findIndex 大括號自帶 return

<iframe height="300" style="width: 100%;" scrolling="no" title="findIndex 獲取索引值" src="https://codepen.io/unayo/embed/zYzBQyR?default-tab=js&theme-id=dark" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/unayo/pen/zYzBQyR">
findIndex 獲取索引值</a> by unayo (<a href="https://codepen.io/unayo">@unayo</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

:::danger
大括號拿掉會自動加上 return
:::

###### tags: `JS`
{%hackmd @unayojanni/H1Qq0uKkK %}