关于javascript:javaScript的for-of和for-in-的区别总结

53次阅读

共计 1551 个字符，预计需要花费 4 分钟才能阅读完成。

先说论断：

举荐在循环对象属性的时候，应用for...in, 在遍历数组的时候的时候应用for...of。
for...in循环出的是 key，for...of循环出的是 value
留神，for...of是 ES6 新引入的个性。修复了 ES5 引入的 for...in 的有余
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]);
}

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

正文完