JS-Learning | for in和for of的区别

遍历数组

遍历数组我们常用for循环，ES5中新增了forEach、every、filter、map、some、reduce和reduceRight等具有遍历数组功能的方法。

使用foreach遍历数组的话，使用break不能中断循环，使用return也不能返回到外层函数。

还可以使用for in来遍历数组，但是会出现一些我们不希望的场景。

for in遍历

遍历数组

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

Array.prototype.method=function(){
　　console.log(this.length);
}
var myArray=[1,2,3,4,5,6,7]
myArray.name="数组"
for (var index in myArray) {
  console.log(myArray[index]);
}

所以for in更适合遍历对象

遍历对象

通常用for in来遍历对象的键名

Object.prototype.method=function(){
　　console.log(this);
}
var myObject={
　　a:1,
　　b:2,
　　c:3
}
for (var key in myObject) {
  console.log(key);
}

for in 可以遍历到myObject的原型方法method,如果不想遍历原型方法和属性的话，可以在循环内部判断一下,hasOwnPropery方法可以判断某属性是否是该对象的实例属性

for (var key in myObject) {
　　if（myObject.hasOwnProperty(key)){
　　　　console.log(key);
　　}
}

for of遍历

遍历数组

for of遍历的只是数组内的元素，而不包括数组的原型属性method和索引name

Array.prototype.method=function(){
　　console.log(this.length);
}
var myArray=[1,2,3,4,5,6,7]
myArray.name="数组";
for (var value of myArray) {
  console.log(value);
}

遍历对象

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

for (var key of Object.keys(someObject)) {
  console.log(key + ": " + someObject[key]);
}

总结

for…in循环出的是key，for…of循环出的是value。

for…of适用遍历数/数组对象/字符串/map/set等拥有迭代器对象的集合.但是不能遍历对象,因为没有迭代器对象；
与forEach()不同的是，它可以正确响应break、continue和return语句。

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