js for...in和for...of的区别

for...in 循环

遍历的是key（可遍历对象、数组或字符串的key）

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-of循环

遍历的是value（可遍历对象、数组或字符串的value）

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);
}