for...in和for...of有什么区别

在JavaScript中遍历数组通常是使用for...i循环，在ES5具有遍历数组功能的还有forEach、map、filter、some、every、reduce、reduceRight等。

for...in和for...of是两种增强型循环，for...in是ES5标准，在ES6中新增了for...of的循环方式。

1.for...in

for...in可以遍历对象、数组。

遍历数组：

Array.prototype.method=function(){
　　console.log(this.length);
}
let arr = [1, 2, 4, 5, 7];
for (let index in arr) {
    console.log(arr[index]);
    console.log(typeof index);
}

var arr1 = [1,2,3]
Array.prototype.a = 123
Array.prototype.b = "for...in...会遍历原型哎"
for(let index in arr1){
    console.log(arr1,arr1[index],index)
}

 

 

有上段代码可以总结出for...in遍历数组的特点：

• 遍历的索引为字符串类型
• 遍历顺序可能不是按照数组顺序（随机顺序）
• 使用for in会遍历数组所有的可枚举属性，包括原型。

所以for...in更适合遍历对象，不要使用for in遍历数组。

 遍历对象：

Object.prototype.method = function () {
    console.log(this);
}
let obj = {
    name: "张三",
    age: 22
}
for (let key in obj) {
    console.log(key);
    console.log(obj[key]);
}

遍历的索引值即key值。 

2.for...of

for-of可以简单、正确地遍历数组（不遍历原型method和name）。

let myArray = [1, 2, 4, 5, 6, 7];
myArray.name = "数组";
myArray.getName = function () { return this.name; }
for (let value of myArray) {
    console.log(value);
    console.log(typeof value)
}

 

 从上面输出结果可以看出，使用for...of遍历数组得到了正确的值和索引。

 3.JavaScript中可迭代对象

• Set
• Map
• String
• Array
• Arguments
• NodeList

如何判断是否有迭代能力？

Array.prototype.hasOwnProperty(Symbol.iterator)

4.总结

• for...in可以遍历对象和数组，for...of不能遍历对象
• for...in 循环不仅遍历数字键名，还会遍历手动添加的其它键，甚至包括原型链上的键
• for...in遍历的索引为字符串类型
• for..of适用遍历数/数组对象/字符串/map/set等拥有迭代器对象的集合，但是不能遍历对象
• for...of与forEach()不同的是，它可以正确响应break、continue和return语句
• 具有迭代器对象才可以使用for...of

总结一句话就是遍历数组使用for...of，遍历对象使用for...in。