web前端学习扣qun：584226069免费领取全套教学视频资料！
相信大部分搬砖工作者都写过类似的代码：
var arr = ['element1', 'element2', 'element3'];
for (var i = 0, len = arr.length; i < len; i++) {
console.log(arr[i]);
}
// element1
// element2
// element3
这是一段标准的for循环代码，通过变量i去追踪数组arr的索引，达到访问数组中每一位元素的目的。
但不得不说，这是非常原始的一种方法，存在着几个显著缺点：
无法只关注元素本身，需要花费精力去维护变量i以及边界len；
当存在着多重嵌套时，将需要跟踪维护多个变量i，代码会非常复杂；
需要花费精力去处理越界问题，一些编译型语言在遇到数组索引越界时会报错，而JavaScript引擎将不会告诉你任何错误信息，错误定位成本会比较高。
数组自带方法forEach
当然我们可以使用数组自带的forEach方法进行数组的遍历：
var arr = ['element1', 'element2', 'element3'];
arr.forEach(function(value, index, arr) {
console.log(value);
});
// element1
// element2
// element3
一切看起来都是那样的完美，即不需要花费精力去追踪索引，又无需担心越界问题，简直美滋滋。But，如果遍历到某个特定条件想退出咋整？
var arr = ['element1', 'element2', 'element3'];
arr.forEach(function(value, index, arr) {
if (index === 1) {
break;
} else {
console.log(value);
}
});
// Uncaught SyntaxError: Illegal break statement
比较遗憾的是以上的代码未能按照我们的预期运行（break、continue等语句跨越了函数边界），所以这个看似完美的办法实际上只能一条道走到黑，像吃了炫迈一样根本停不下来。当数组很大，没办法通过提前终止遍历来节省资源。
for in循环
饭要一口一口的吃（饭桶请忽略），我们可以先解决花费时间防止数组越界的问题，例如可以使用for in循环：
var arr = ['element1', 'element2', 'element3'];
for (var i in arr) {
console.log(arr[i]);
}
// element1
// element2
// element3
for in语句是一种精准的迭代语句，可以枚举对象的所有可枚举属性(可以使用Object.getOwnPropertyDescriptor(targetObj, attrName)方法来查看对象的某个属性是否可枚举)。It means that，可以用它来遍历对象：
var obj = {
a: 1,
b: 1,
c: 1
};
for (let attr in obj) {
console.log(attr, obj[attr]);
}
// a 1
// b 1
// c 1
除了遍历对象、数组之外，for in循环还可兼职遍历字符串：
var str = 'I am a handsome boy!';
for (var i in str) {
console.log(str[i]);
}
// 太帅(chang)了，结果就不打印了
当然，也支持break、continue的操作，例子我就不写了。
这玩意看起来非常的牛*，简直就是万能的。But，一般看上去什么都会的人，实际上什么都做不精（我就不一样了，我不仅看上去什么都不会，还做不好），这个玩意也是一样的，看看例子：
var father = {
fatherAttr: 1
};
// 以father为原型创建对象实例instance
var instance = Object.create(father);
instance.a = 1;
instance.b = 1;
instance.c = 1;
for (var attr in instance) {
console.log(attr, instance[attr]);
}
// a 1
// b 1
// c 1
// fatherAttr 1
// 获取instance实例的自有属性名
console.log(Object.getOwnPropertyNames(instance));
// ["a", "b", "c"]
上面这个例子中，首先以father对象为原型创建了一个对象实例instance，然后为这个实例instance添加了a、b、c三个属性，接着使用for in循环遍历这个对象。通过查看instance的自有属性可以发现，fatherAttr并不是instance的属性，而是其原型father的属性，for in循环会将对象的原型属性也一并列举出来。
网友评论