# <font class="h2">列舉- for...in與for...of的差別</font>

###### tags: `javascript`
<style>
.h2 {
background: linear-gradient(135deg,#fff,#537479) ;
color: #537479;
display:block;
padding: 6px 5px;
border-radius: 4px;
}
.h3 {
background: linear-gradient(180deg,#fff 50%,#c9d5d4) ;
color: #537479;
display:block;
padding: 6px 5px;
border-bottom: 3px solid #537479;
}
.h4 {
color: #537479;
font-weight:bold;
font-size:1.1em;
}
</style>
<br>

1. 建議：在<font color="#f00">迭代物件屬性</font>時使用 for...in；在<font color="#f00">迭代陣列</font>時使用 for...of。

2. for...in 輸出的是<font color="#f00">屬性名稱(key)</font>，for...of輸出的是<font color="#f00">值(value)</font>

3. for...of 是 ES6 的新語法。修復了ES5 for…in 的不足

4. for...of 不能迭代物件，需要透過和 Object.keys() 搭配使用

| 語法 | 建議用途 | 迭代陣列 | 迭代物件 |
| ------ | ------------ | ------------- | -------- |
| for…in | 迭代物件屬性 | 屬性名稱(key) | ○ |
| for…of | 迭代陣列 | 值(value) | X (需搭配Object.keys()) |

<br><br><br><br>

### <font class="h4">➤迭代陣列 範例</font>
單純迭代陣列的話，for...in 輸出的是屬性名稱(key)，for...of 輸出的是值(value)

let iterable = [3, 5, 7];
for (let i in iterable) {
  console.log(i); // "0", "1", "2"
}

let iterable = [3, 5, 7];
for (let i of iterable) {
  console.log(i); // 3, 5, 7
}

<br><br>

let iterable = [3, 5, 7];
iterable.foo = 'hello';
for (let i in iterable) {
  console.log(i); // "0", "1", "2", "foo"
}

let iterable = [3, 5, 7];
iterable.foo = 'hello';
for (let i of iterable) {
  console.log(i); //  3, 5, 7
}

<br><br><br><br><br><br>

### <font class="h4">➤原型鍊 範例</font>
在物件和陣列的原型鍊上，分別各新增function，一樣可看到 for...in 也將原型鋉上的function名稱也輸出了。

Object.prototype.objCustom = function(){}; //物件 原型鋉
Array.prototype.arrCustom = function(){};  //陣列 原型鋉

let iterable = [3, 5, 7];
iterable.foo = 'hello';

// 回傳「key」，且同時會讀取到 物件、陣列 原型鍊上的function
for (let i in iterable) {
  console.log(i); // "0", "1", "2", "foo", "arrCustom", "objCustom"
}

// 回傳「值」
for (let i of iterable) {
  console.log(i); // 3, 5, 7
}

<br><br>

:::info
in運算子，可以查詢屬性名稱(key)

const car = { make: 'Honda',
             model: 'Accord',
             year: 1998 };
if('make' in car){
    console.log('true') //true
}

:::

<br><br><br><br><br><br>

### <font class="h4">➤for..of 迭代 物件(object)</font>

var student = {
    name:'kanboo',
    age:16,
    locate:{
        country:'tw',
        city:'taipei',
        school:'CCC'
    }
}

for(var key of Object.keys(student)){
    console.log(key+": "+student[key]);
}

// "name: kanboo"
// "age: 16"
// "locate: [object Object]"