for...in与for...of的区别

109 阅读1分钟

for...in

  • 用于数组的循环
Array.prototype.sayHello = function(){
   console.log('hello')
}
Array.prototype.str = 'world'
var myArray = [1,2,3,10]
myArray.name = '数组'

for(let index in myArray){
   console.log(index)
}
// 输出结果
0123,name,str,sayHello

for in应用于数组循环返回的是数组的下标和数组的属性、原型上的方法和属性

使用for in可以遍历数组,但是会存在问题:

1:index索引为字符串型数字,不能直接进行几何运算 2:遍历顺序有可能不是按照实际数组的内部顺序 3:使用for in会遍历数组所有的可枚举属性,包括原型

  • 用于对象的循环
Object.prototype.sayHello = function(){
   console.log('hello')
}
Object.prototype.str = 'world'
var myObject = {name:'zhangsan',age:100}
for(let index in myObject){
   console.log(index)
}
//输出结果
name,age,str,sayHello

for in 应用于对象循环返回的是对象的属性名、原型中的方法和属性

for of

Array.prototype.sayHello = function(){
   console.log('hello')
}
var myArray = [1,200,3,400,100]
for(let key of myArray){
   console.log(key)
}
// 输出结果
1,200,3,400,100

总结

for in 遍历的是数组的索引,for of遍历的是数组元素值

for in总是得到对象的key或数组、字符串的下标

for of总是得到对象的value或数组、字符串的值

for in可以用在可枚举的数据,如:对象、数组、字符串

for of用于可迭代的数据,如:数组、字符串、Map、Set

推荐遍历对象时用for in

推荐遍历数组时用for of