JavaScript中for...in和for...of的区别

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/s2152637/article/details/90932588

先看一段js代码

[code]var data = [{"id":"1","name":"admin","password":"123456"},
{"id":"2","name":"user1","password":"111111"},
{"id":"3","name":"张三","password":"333333"}
];
//for...in循环
for (var d in data){
console.log(d);
}
console.log("------------");
//for...of循环
for (var d of data){
console.log(d);
}

结果:

 

结论:

for...in

循环出的是key，

for...of

循环出的是value

如果for...in想达到与for...of的效果,则将上述代码改为:

[code]var data = [{"id":"1","name":"admin","password":"123456"},
{"id":"2","name":"user1","password":"111111"},
{"id":"3","name":"张三","password":"333333"}
];
//for...in循环
for (var d in data){
console.log(data[d]);
}
console.log("------------");
//for...of循环
for (var d of data){
console.log(d);
}

总结:

1. 推荐在循环对象属性的时候，使用

   for...in

   ,在遍历数组的时候的时候使用

   for...of

   。

2. for...of

   不能循环普通的对象，需要通过和

   Object.keys()

   搭配使用

for...of语句在可迭代对象(包括 Array, Map, Set, String, TypedArray，arguments 对象等等)上创建一个迭代循环，对每个不同属性的属性值,调用一个自定义的有执行语句的迭代挂钩。也就是说，for of只可以循环可迭代对象的可迭代属性，不可迭代属性在循环中被忽略了。

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

let iterable = [3, 19, 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,19,7
}

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