for in、for of、for区别

1. for in

<!-- 形式 -->
for (variable in iterable) {
    statement
 }

<!-- 例子 -->
// 遍历数组
var arr = [1, 2, 3, 4, 5];
for (var key in arr) {
    console.log(arr[key]); // 1 2 3 4 5
}
// 遍历对象
var obj = {
    name: "Lucy",
    age: 17,
    major: "English"
}
for (var key in obj) {
    console.log(obj[key]); // Lucy 17 English
}

2. for of

<!-- 形式 -->
for (variable of iterable) {
    statement
 }

<!-- 例子 -->
// 遍历数组
var arr = [1, 2, 3, 4, 5];
for (var item of arr) {
    console.log(item); // 1 2 3 4 5
}
// 遍历字符串
var str = "OK";
for (var val of str) {
    console.log(val);  // 'O' 'K'
}
// 遍历Map
var map = new Map([['name','Andy'], ['age', 17]]);
for (var entry of map) {
    console.log(entry); // ["name", "Andy"] ["age", 17]
}
for (var [key, value] of map) {
    console.log(key + '->' + value); // name->Andy age->17
}
// 遍历Set
var set = new Set([1,1,2,3]);
for (var val of set) {
    console.log(val); // 1 2 3
}
// 遍历DOM
/* -- html --*/
<div>
    <ul>
        <li>Apple</li>
        <li>Banana</li>
        <li>Orange</li>
    </ul>
</div>
/* -- js -- */
var $li = document.querySelectorAll('li');
for (let item of $li) {
    console.log(item.innerHTML); // Apple Banana Orange
}

3. for

<!-- 形式 -->
for ([initialization]; [condition]; [final-expression])
        statement

<!-- 例子 -->
var arr = [1, 2, 3, 4, 5];
for (var i = 0; i < arr.length; i++) {
    console.log(arr[i]); // 1 2 3 4 5
}

共同点：
都可使用break 跳出循环；
区别：
for in 遍历的是索引； for of 遍历的是数组的元素；
for in 用来遍历数组时，遍历顺序可能不是数组中的实际顺序。
注意：
遍历数组时for效率较高，for in 更适合遍历对象。（遍历enumerable的对象），for of可遍历多种如数组、Map、Set、enumerable属性的对象、Dom collection、generators。