for循环 forEach for…in for…of的对比分析

  • 内容
  • 评论
  • 相关
刚接触前端的时候,数组的循环遍历方式都是下面这种:
var a = ["a", "b", "c"];
for(var index = 0;index < a.length;index++){
console.log(a[index]);
console.log(typeof index); //number
}
自从ES5发布以后,可以用自带的forEach来遍历数组:
var a = ["a", "b", "c"];
a.forEach(function(element, index) {
console.log(element);
console.log(typeof index); //number
});
这种方式虽然简洁了很多,但是不能使用break来退出循环,也不能使用return语句来返回到外层。
既然用forEach有上面的问题,那么ES5里有for...in循环:
var a = ["a", "b", "c"];
for(var index in a){
console.log(a[index]);
console.log(typeof index); //string
}
但是也有一个问题就是以上typeof index,只有for...in出来的值是string,其它两个都是number,这样如果在做数值计算的时候会带来不便,再者鉴于此,也不推荐用for...in来循环一个数组,因为,不像对象,数组的index跟普通的对象属性不一样,是重要的数值序列指标,总之,for...in是用来循环带有字符串key的对象的方法。
那么下面详细说说for...in。
for...in语句是以任意顺序遍历一个对象的可枚举属性,这块需要注意两点:
1.以任意顺序遍历,for...in遍历数组无法保证输出值的顺序,所以for...in最好用于遍历对象,因为对象是无序的。(注:MDN上就有提示,for...in不应该用于迭代一个Array,其中索引顺序很重要,最好用for循环或者使用Array.prototype.forEach()或者for...of循环)
2.只可遍历可枚举属性,像 Array和 Object使用内置构造函数所创建的对象都会继承自Object.prototype和String.prototype的不可枚举属性,例如 String 的 indexOf()  方法或 ObjecttoString()方法。循环将遍历对象本身的所有可枚举属性,以及对象从其构造函数原型中继承的属性(更接近原型链中对象的属性覆盖原型属性)。
下面说说for...of,它是ES6里引入的一种新的循环方法,所以它的兼容性目前来说是有些问题的,但是不能否认它的优点,比传统的for循环简洁,同时也弥补了forEach和for...in循环的以上讲到的短板,它的功能很丰富,可以迭代很多东西,比如数组、对象(结合Object.keys()使用)、字符串、DOM NodeList、Map、Set、arguments等。详见传送门(https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/for...of

评论

0条评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注