for in是ES5标准,for of是ES6标准;
for in是遍历对象属性,for of是遍历对象元素。
for of兼容性还不够,移动端安卓微信浏览器貌似不支持,苹果的可以;web端IE支持也不够,chrome可以。
先说结论:
-
推荐在循环对象属性的时候,使用
for...in
,在遍历数组的时候的时候使用for...of
。 -
for...in
循环出的是key,for...of
循环出的是value -
注意,
for...of
是ES6新引入的特性。修复了ES5引入的for...in
的不足 -
for...of
不能循环普通的对象,需要通过和Object.keys()
搭配使用
var student={ name:'wujunchuan', age:22, locate:{ country:'china', city:'xiamen', school:'XMUT' } } for(let key in student){ console.log(key); //输出的是属性
console.log(student[key]); //输出的是属性值
} //name age locate
var student={ name:'wujunchuan', age:22, locate:{ country:'china', city:'xiamen', school:'XMUT' } } for(let key of Object.keys(student)){ console.log(key); //使用Object.keys()方法获取对象key的数组
console.log(student[key]) ;//输出的是属性值
}
var arr= ['a','b','c'] for(let key in arr){ console.log(key);//输出的是 键名 0 1 2 console.log(arr[key]);//输出的是 键值 a b c }
var arr= ['a','b','c','d','e'] for(let value of arr){ console.log(value);//输出的是 键值 a b c d e }
var arr= ['a','b','c','d','e'] for(let key of arr.keys()){ console.log(key);//输出的是键名 0 1 2 3 4 }
var arr= ['a','b'] for(let case of arr.entries()){ console.log(case);//输出的是键值对 [0,'a'] [1,'b'] }