先说结论:
推荐在循环对象属性的时候,使用
for...in
,在遍历数组的时候的时候使用for...of
。for...in
循环出的是key,for...of
循环出的是value注意,
for...of
是ES6新引入的特性。修复了ES5引入的for...in
的不足for...of
不能循环普通的对象,需要通过和Object.keys()
搭配使用
假设我们要遍历一个数组的valuelet aArray = ['a',123,{a:'1',b:'2'}]
使用for...in
循环:
for(let index in aArray){
console.log(`${aArray[index]}`);
}
使用for...of
循环:
for(var value of aArray){
console.log(value);
}
咋一看好像好像只是写法不一样而已,那为什么说for...of
修复了for...in
的缺陷和不足。
假设我们往数组添加一个属性name:aArray.name = 'demo'
,再分别查看上面写的两个循环:
for(let index in aArray){
console.log(`${aArray[index]}`); //Notice!!aArray.name也被循环出来了
}
for(var value of aArray){
console.log(value);
}
所以说,作用于数组的for-in
循环除了遍历数组元素以外,还会遍历自定义属性。
for...of
循环不会循环对象的key,只会循环出数组的value,因此for...of
不能循环遍历普通对象,对普通对象的属性遍历推荐使用for...in
如果实在想用for...of
来遍历普通对象的属性的话,可以通过和Object.keys()
搭配使用,先获取对象的所有key的数组
然后遍历:
var student={
name:'wujunchuan',
age:22,
locate:{
country:'china',
city:'xiamen',
school:'XMUT'
}
}
for(var key of Object.keys(student)){
//使用Object.keys()方法获取对象key的数组
console.log(key+": "+student[key]);
}
迭代器和for-of循环
最早的数组遍历方式
var a = ["a", "b", "c"];
for(var index = 0;index < a.length;index++){
console.log(a[index]);
}
自从ES5发布以后,可以用内建的forEach
来遍历数组
var a = ["a", "b", "c"];
a.forEach(function(element) {
console.log(element);
});
简洁了许多不是,但是你不能使用
break
来退出循环, 不能使用return语句来返回到外层
当然你也可以使用for
循环语法来遍历数组,那么你一定会想到for-in
var a = ["a", "b", "c"];
for(var index in a){
// console.log(a[index]);
console.log(typeof index);
}
这是一个糟糕的选择!
- 赋值给index并不是一个数字,而是一个
String
,可能无意进行字符串计算,这给编程带来不便- 作用于数组的
for-in
循环除了遍历数组元素以外,还会遍历自定义属性,举个例子,如果你的数组中有一个课枚举的类型a.name
,那么循环将额外执行一次,遍历到名为name
的索引,甚至数组原型链上的属性都能被访问到- 这段代码可能按照 随机顺序遍历数组
for-in
这个代码是为普通对象设计的,不适用于数组的遍历
var a = ["a", "b", "c"];
for(var value of a){
console.log("for of:"+value);
}
这个方法是最简洁的,并且修复了for-in
循环的所有缺点,与forEach()
不同的是,它可以正确的响应break,contine,return
语句
不仅如此,for-of
还可以支持大部分的类数组对象 注意:for-of
循环不支持普通对象,但是如果你想迭代一个对象的属性,可以使用for-in
循环(这也是它的本职工作)或者内建的Object.keys()方法
var student={
name:'wujunchuan',
age:22,
locate:{
country:'china',
city:'xiamen',
school:'XMUT'
}
}
for(var key of Object.keys(student)){
//使用Object.keys()方法获取对象key的数组
console.log(key+": "+student[key]);
}
那还不如用
for-in
for(var prop in student){ console.log(prop+': '+student[prop]); }