javascript总for of和for in的区别？

Question

都是遍历，那有什么区别呢、？

Answer 1

先说结论：

1. 推荐在循环对象属性的时候，使用for...in,在遍历数组的时候的时候使用for...of。

2. for...in循环出的是key，for...of循环出的是value

3. 注意，for...of是ES6新引入的特性。修复了ES5引入的for...in的不足

4. for...of不能循环普通的对象，需要通过和Object.keys()搭配使用

假设我们要遍历一个数组的valuelet aArray = ['a',123,{a:'1',b:'2'}]

使用for...in循环：

for(let index in aArray){
    console.log(`${aArray[index]}`);
}

使用for...of循环：

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

咋一看好像好像只是写法不一样而已，那为什么说for...of修复了for...in的缺陷和不足。
假设我们往数组添加一个属性name:
aArray.name = 'demo',再分别查看上面写的两个循环：

for(let index in aArray){
    console.log(`${aArray[index]}`); //Notice!!aArray.name也被循环出来了
}
for(var value of aArray){
    console.log(value);
}

所以说，作用于数组的for-in循环除了遍历数组元素以外,还会遍历自定义属性。

for...of循环不会循环对象的key，只会循环出数组的value，因此for...of不能循环遍历普通对象,对普通对象的属性遍历推荐使用for...in

如果实在想用for...of来遍历普通对象的属性的话，可以通过和Object.keys()搭配使用，先获取对象的所有key的数组
然后遍历：

var student={
    name:'wujunchuan',
    age:22,
    locate:{
    country:'china',
    city:'xiamen',
    school:'XMUT'
    }
}
for(var key of Object.keys(student)){
    //使用Object.keys()方法获取对象key的数组
    console.log(key+": "+student[key]);
}

具体可以参考我这篇博客文章：JavaScript中的for-of循环

Answer 2

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

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之外最大的区别

Answer 3

for in是ES5标准,for of是ES6标准;for in是遍历对象属性,for of是遍历对象元素。for of兼容性还不够,移动端安卓微信浏览器貌似不支持，苹果的可以;web端IE支持也不够，chrome可以。

Answer 4

for-of是ES6引进的新语法，for-in循环是遍历对象的属性，for-of循环是遍历实现iterator接口的成员。可以参考阮一峰大神的es6入门里的Iterator和for...of循环。

Answer 5

简单说，for in是遍历键名，for of是遍历键值。
例如：

let arr = ["a","b"];
for (a in arr) {
    console.log(a);//1,2
}

for (a of arr) {
    console.log(a);//a,b
}

由于for of的这个特性，他还可以实现对iterator对象的遍历，而for in就是简单的遍历了。

Answer 6

以下两个输出结果是相通的

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

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

Answer 7

个人理解。for in是循环遍历对象；for of语法和for in语法很像，但它的功能却丰富的多，它能循环很多东西。推荐使用for of

Answer 8

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
}

MDN

Answer 9

for of是ES6的标准

Answer 10

这种问题，我推荐去看下规范，MDN 的就不错

Answer 11

for in遍厉数组无法保证输出值的顺序，而for of可以保证输出顺序，这个是本质也是最大的差别，es6后建议使用for of会避免许多小的不必要错误，之前的for in最好用于遍厉对象，因为对象是无序的

Answer 12

请类比Java中对List(的元素)和Map(的Key)的遍历。

Answer 13

for ... of循环和for ... in循环区别
for ... in循环遍历的实际上是对象的属性名称。
for ... of循环遍历的是对象的值
`
var a = ['A', 'B', 'C'];
var s = new Set(['A', 'B', 'C']);
var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
for (var x of a) { // 遍历Array

alert(x);

}
for (var x of s) { // 遍历Set

alert(x);

}
for (var x of m) { // 遍历Map

alert(x[0] + '=' + x[1]);

}`

Answer 14

1. for...in 循环遍历对象的键名。
2. 一个数据结构只要部署了Symbol.iterator属性，就被视为具有 iterator 接口，就可以用for...of循环遍历它的成员。也就是说，for...of循环内部调用的是数据结构的Symbol.iterator方法。对于普通的对象，for...of 结构不能直接使用，会报错，必须部署了 Iterator 接口后才能使用。
3. 注意，for...of是ES6新引入的特性。修复了ES5引入的 for...in的不足。
4. for...of 不能循环普通的对象，需要通过和Object.keys()搭配使用。
5. 数组提供内置的forEach方法，无法中途跳出forEach循环，break命令或return命令都不能奏效。

for...in循环有几个缺点：

• 数组的键名是数字，但是for...in循环是以字符串作为键名“0”、“1”、“2”等等。
• for...in循环不仅遍历数字键名，还会遍历手动添加的其他键，甚至包括原型链上的键。
• 某些情况下，for...in循环会以任意顺序遍历键名。

总之，for...in循环主要是为遍历对象而设计的，不适用于遍历数组。

for...of 循环相比上面几种做法，有一些显著的优点：

• 有着同 for...in 一样的简洁语法，但是没有 for...in 那些缺点。
• 不同于 forEach方法，它可以与 break、continue和return配合使用。
• 提供了遍历所有数据结构的统一操作接口。

参考自阮老师的ES6 教程：https://wangdoc.com/es6/itera...

Answer 15

参考MDN
https://developer.mozilla.org...