<font color="#8A2BE2">[JS筆記]</font> for in 與 for of 的差異
===
> 結論
> for of可使用的對象有Array、Map、Set、String、TypedArray、arguments
> for in會遍歷自定義屬性，甚至原型鏈上的屬性也會遍歷到，反而又不是我們所想要的
> forEach 是沒有停止運行break的，相反的for就可以使用 for loop 搭配 break。
範例一 基礎for迴圈
---
```javascript=
let arr = ['小明', '小華', {name: '小陳', gender: '女'}]
for(let i=0; i<=arr.length-1; i++) {
console.log(arr[i])
}
```
範例二 for in 印出陣列index
---
```javascript=
let arr = ['小明', '小華', {name: '小陳', gender: '女'}]
for(let index in arr) {
console.log(index)
}
```
範例三 for of 印出陣列value
---
```javascript=
let arr = ['小明', '小華', {name: '小陳', gender: '女'}]
for (let value of arr) {
console.log(value)
}
```
範例四 修正後for in也可以印出value
---
```javascript=
let arr = ['小明', '小華', {name: '小陳', gender: '女'}]
for(let index in arr) {
console.log(arr[index])
}
```
範例五 陣列中新增for in會不小心印到自己定義的key
---
```javascript=
let arr = ['小明', '小華', {name: '小陳', gender: '女'}]
arr.color = '藍色'
console.log(arr) //[ '小明', '小華', { name: '小陳', gender: '女' }, color: '藍色' ]
console.log(arr[3]) //undefined
for(let index in arr) {
console.log(index)
}
/*
0
1
2
color
*/
```
---
for迴圈與for Each比較
===
範例一 for
---
```javascript=
const items = ['item1', 'item2', 'item3'];
const copy = [];
for (let i=0; i<items.length; i++) {
copy.push(items[i])
}
console.log(copy)
```
範例二 for Each
---
```javascript=
const items = ['item1', 'item2', 'item3'];
const copy = [];
items.forEach(function(item) {
copy.push(item)
});
console.log(copy)
```
範例三 參考MDN標準版本forEach （兩個參數）
---
```javascript=
const man = [
{name: '川普', age: 70, id: 'USA01' },
{name: '拜登', age: 80, id: 'USA02' },
{name: '蔡英文', age: 63, id: 'TW01' },
]
man.forEach(function(value, index){
console.log(index + ':' + value.name)
})
```
範例四 參考MDN標準版本forEach（一個參數value）
---
```javascript=
const man = [
{name: '川普', age: 70, id: 'USA01' },
{name: '拜登', age: 80, id: 'USA02' },
{name: '蔡英文', age: 63, id: 'TW01' },
]
man.forEach(function(value){
console.log(value.name)
})
```
範例五 forEach搭配function函示
---
```javascript=
data = [10, 20, 30];
total = 0;
data.forEach(function (item) {
total += item;
});
console.log(total);//60
```
範例六 forEach 搭配箭頭函示 (function拿掉，加上箭頭)
---
```javascript=
data = [10, 20, 30];
total = 0;
data.forEach( (item) => {
total += item;
});
console.log(total);//60
```
範例七 forEach 箭頭函示寫成一行 （範例六縮減版）
---
```javascript=
data = [10, 20, 30];
total = 0;
//如果寫成一行長這樣
data.forEach( (item) => {total += item;});
console.log(total);//60
```
---
AC電影清單中範例 for of 怎麼把電影一步一步加入空陣列變數中
===
```javascript=
const movies = []
const array1 = ['a', 'b', 'c'];
for (const movie of array1) {
console.log(movie)
movies.push(movie)
}
console.log(movies)
```
參考連結
===
參考：
[連結：Ryan部落格](https://blog.typeart.cc/JavaScript中for%20of和for%20in的差別/)
[連結：kanboo部落格](https://kanboo.github.io/2018/01/30/JS-for-of-forin/)
[連結：安地斯波羅影片](https://www.youtube.com/watch?v=7OCEiYC6H8Y)
[連結：unayo部落格 (AC)](https://hackmd.io/@unayojanni/HyzWz9R0u/%2F%40unayojanni%2FBJRcdDCWK)
###### tags: `[JS]`
Sign in with Wallet
Connect another wallet