for, for..in, for...of 和 forEach
for
JavaScript最原始的写法:
for (var index = 0; index < myArray.length; index++) {
console.log(myArray[index]);
}
复制代码
forEach
es5之后可以使用 forEach, 但是forEach不能中断循环。
myArray.forEach(function (value) {
console.log(value);
});
复制代码
for...in
for...in 最好是循环对象, 可以遍历到myObject的原型方法method,如果不想遍历原型方法和属性的话,可以在循环内部判断一下,hasOwnPropery方法可以判断某属性是否是该对象的实例属性.
for (var key in myObject) {
if(myObject.hasOwnProperty(key)){
console.log(key);
}
}
复制代码
如果使用for in 也可以遍历数组,但是会存在以下问题:
1.index索引为字符串型数字,不能直接进行几何运算
2.遍历顺序有可能不是按照实际数组的内部顺序
3.使用for in会遍历数组所有的可枚举属性,包括原型。例如上栗的原型方法method和name属性
for...of
在Array、Object、Set、Map中都可以使用。
let iterable = [10, 20, 30];
for (let value of iterable) {
console.log(value);
}
复制代码
总结
-
推荐在循环对象属性的时候,使用for...in,在遍历数组的时候的时候使用for...of。
-
for...in循环出的是key,for...of循环出的是value
-
注意,for...of是ES6新引入的特性。修复了ES5引入的for...in的不足
-
for...of不能循环普通的对象,需要通过和Object.keys()搭配使用
-
for...in 可以遍历到myObject的原型方法method,如果不想遍历原型方法和属性的话,可以在循环内部判断一下,hasOwnPropery方法可以判断某属性是否是该对象的实例属性