js for...in和for...of的區別

首先，for-in是ES5標准，遍歷的是key（可遍歷對象、數組或字符串的key）；for-of是ES6標准，遍歷的是value（可遍歷對象、數組或字符串的value）。

for...in 循環

for...in 語句用於遍歷數組或者對象的屬性（對數組或者對象的屬性進行循環操作）。

for ... in 循環中的代碼每執行一次，就會對數組的元素或者對象的屬性進行一次操作。

使用for-in可以遍歷數組，但是會存在以下問題：

1.index索引為字符串型數字（注意，非數字），不能直接進行幾何運算。

2.遍歷順序有可能不是按照實際數組的內部順序（可能按照隨機順序）。

3.使用for-in會遍歷數組所有的可枚舉屬性，包括原型。原型方法method和name屬性都會被遍歷出來，通常需要配合hasOwnProperty()方法判斷某個屬性是否該對象的實例屬性，來將原型對象從循環中剔除。

for (var key in myObject) {
　　if（myObject.hasOwnProperty(key)){
　　　　console.log(key);
　　}
}

所以for-in更適合遍歷對象，通常是建議不要使用for-in遍歷數組。

for-of循環

for-of可以簡單、正確地遍歷數組（不遍歷原型method和name）。

var myArray = [1, 2, 4, 5, 6, 7];
myArray.name = "數組";
myArray.getName = function() { return this.name; }
for (var value of myArray) {
    console.log(value);
}

1.這是最簡潔、最直接的遍歷數組元素的語法。

2.這個方法避開了for-in循環的所有缺陷。

3.與forEach()不同的是，它可以正確響應break、continue和return語句。

因此建議是使用for-of遍歷數組，因為for-of遍歷的只是數組內的元素，而不包括數組的原型屬性method和索引name。

區別總結

簡單總結就是，for in遍歷的是數組的索引（即鍵名），而for of遍歷的是數組元素值。

for-in總是得到對象的key或數組、字符串的下標。

for-of總是得到對象的value或數組、字符串的值，另外還可以用於遍歷Map和Set。

var set = new Set();
set.add("a").add("b").add("d").add("c");

// 遍歷Set
for (let s of set) {
    console.log(s);
}

var map = new Map();
map.set("a", 1).set("b", 2).set(999, 3);

// 遍歷Map
for(let [k, v] of map) {
    console.log(k, v);
}