for...of 與 for...in 區別

一、for...of

1.定義

for...of 語句遍歷可迭代對象（包括數組、Set 和 Map 結構、arguments 對象、DOM NodeList 對象、字符串等）。

2.語法

for (variable of iterable) {
    //statements
}

3.示例

<ul>
    <li>mazey</li>
    <li>luna</li>
    <li>cherrie</li>
</ul>
<script>
// 數組
let arr = ['mazey', 'luna', 'cherrie'];
for (let v of arr) {
    console.log(v);
}
// mazey luna cherrie

// 字符串
let str = 'mlc';
for (let v of str) {
    console.log(v);
}
// m l c

// 類數組對象
let obj = {
    0: 'mazey',
    1: 'luna',
    2: 'cherrie',
    length: 3
};
// 需使用Array.from轉換成可迭代對象
for (let v of Array.from(obj)) {
    console.log(v);
}
// mazey luna cherrie

// Set
let s = new Set(['mazey', 'luna', 'cherrie']);
for (let v of s) {
    console.log(v);
}
// mazey luna cherrie

// Map
let m = new Map([
    ['name0', 'mazey'],
    ['name1', 'luna'],
    ['name2', 'cherrie']
]);
for (let [i, v] of m) {
    console.log(v);
}
// mazey luna cherrie

// DOM NodeList
let domList = document.querySelectorAll('li');
for (let v of domList) {
    console.log(v.innerText);
}
// mazey luna cherrie
</script>

二、for...of 與 for...in 區別

1.for...in 遍歷鍵名，for...of 遍歷鍵值

let arr = ['mazey', 'luna', 'cherrie'];
for (let k in arr) {
    console.log(k);
}
// 0 1 2
for (let v of arr) {
    console.log(v);
}
// mazey luna cherrie

2.for...in 會把對象上手動添加的屬性和原型上的屬性暴露出來

let obj = {
    0: 'mazey',
    1: 'luna',
    2: 'cherrie',
    length: 3
};
obj.name = 'objName';
for (let k in obj) {
    console.log(k);
}
// 0 1 2 length name
for (let v of Array.from(obj)) {
    console.log(v);
}
// mazey luna cherrie

三、for...of 其它優點

1.相對於數組自帶的 forEach 方法，for...of 可以與 break、continue 和 return 配合使用。
2.正確識別32位 UTF-16 字符。

for…of 與 for…in 區別