for..in和for...of的用法

for…in和for…of的用法

在JavaScript中，for…in和for…of是两种常用的循环结构,但是两者的用法和遍历的结果却有区别。

1、for…in循环

for…in循环用于遍历对象的可枚举属性。在每次迭代中，变量会被赋予一个属性名，而不是属性值。请注意，for…in不仅会枚举出对象自身的属性，还会枚举出其原型链上的属性（除非该对象使用Object.prototype的hasOwnProperty方法来过滤掉原型链上的属性）。

var arr={id:1,name:"a",value:9}
for(var i in arr){
    console.log(i)
}
//输出:id  name  value

若遍历对象为一个数组，变量值则为index

var arr=["桃子","西瓜","樱桃"]
for(var i in arr){
    console.log(i)
}
//0 1 2

for…in会枚举出对象自身以及原型链上的所有可枚举属性。如果只想遍历对象自身的属性，可以使用hasOwnProperty方法进行过滤。

2、for…of循环

for…of循环是ES6引入的一种新的遍历命令，适用于数组、字符串、Map、Set等可迭代对象。与for…in不同，for…of循环直接遍历的是值，而不是键。

var arr=["桃子","西瓜","樱桃"]
for(var i of arr){
    console.log(i)
}
//桃子 西瓜  樱桃

3. for…in和for…of的区别

• for…in遍历的是对象的属性名，而for…of遍历的是可迭代对象的元素值。
• for…in会遍历对象自身以及原型链上的属性，而for…of只遍历对象自身的元素。
• for…in适用于普通对象，而for…of适用于可迭代对象，如数组、字符串、Map、Set等。

for in 主要用于遍历Object对象的key，for of 遍历数组经常配合entries一起用，entries() 方法返回一个数组的迭代对象，该对象包含数组的键值对 (key/value)。