详解JavaScript中for...in和for...of区别

前言

简单地说，for...in一般用来遍历对象的键名(key)，for...of一般用来遍历数组的键值(value)。

但这只是浅显的说法，需要更加深入的理解才能知道他们的区别。

for...in

for...in循环遍历的是可枚举属性（包括原型链上的可枚举属性）。

var obj = {a:1, b:2, c:3};
    
for (let key in obj) {
  console.log(key);
}

// a
// b
// c

使用for...in 也可以遍历数组，但是会存在以下问题：

• index索引为字符串型数字，不能直接进行几何运算
• 遍历顺序有可能不是按照实际数组的内部顺序
• 使用for in会遍历数组所有的可枚举属性，包括原型。例如上栗的原型方法method和name属性

for...of

for...of是ES6新引入的特性，for...of的出现是为了方便迭代器的使用。

for...of语句在可迭代对象（包括Array，Map，Set，String，TypedArray，arguments 对象等等）上创建一个迭代循环，对每个不同属性的属性值,调用一个自定义的有执行语句的迭代挂钩。

也就是说，for...of只可以循环可迭代对象的可迭代属性，不可迭代属性在循环中被忽略了。

for...of不可以遍历普通对象，想要遍历对象的属性，可以用for...in循环, 或内建的Object.keys()方法

const array1 = ['a', 'b', 'c'];

for (const val of array1) {
  console.log(val);
}

// a
// b
// c

for...in和for...of对比

for (var key in arr){
    console.log(arr[key]);
}

for (var value of arr){
    console.log(value);
}

这两者效果是一样的

Object.prototype.objCustom = function () {}; 
Array.prototype.arrCustom = function () {};

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

for (let i in iterable) {
  console.log(i); // logs 0, 1, 2, "foo", "arrCustom", "objCustom"
}

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

可以看到，对于array的不可迭代元属性objCustom、arrCustom和实例属性foo，在循环中都被忽略。 这是for...in迭代KEY，for of迭代value之外最大的区别

小结

• for...in以任意顺序迭代对象的可枚举属性，一般用于遍历对象的key
• for...of语句遍历可迭代对象定义要迭代的数据，一般用于遍历数组的value