[JavaScript] for、forEach、for...of、for...in 的区别与比较
写在前面:本文不会写太多的细节例子,毕竟这些基本知识还是比较简单的。
-
for 与 forEach
1、forEach 虽然是 for 循环的简化版本,但是并不是说 forEach 就比 for 更好用,forEach 适用于循环次数未知,或者计算循环次数比较麻烦情况下使用效率更高,但是更为复杂的一些循环还是需要用到 for 循环效率更高。
2、forEach 不支持在循环中添加删除操作,因为在使用 forEach 循环的时候数组(集合)就已经被锁定不能被修改。(改了也没用)
var array=[]; array[0] = 1; array[5] = 5; console.log(foreach-------) array.forEach(function(v, i) { v = 11; console.log(v); }) console.log(foreach-------); for(var j in array) { console.log(array[j]) } foreach------- 11 11 foreach------- 1 5
3、在 for 循环中可以使用 continue,break 来控制循环和跳出循环,这个是 forEach 所不具备的。【在这种情况下,从性能的角度考虑,for 是要比 forEach 有优势的。(一个长度为100的数据,你for循环到35的时候,实现了功能,达到了目的的话,这个时候可以 break 跳出循环的;使用 forEach 的话,是不能退出循环本身的。)】
4、所以没有特殊情况我一般都用 for 循环,不会有坑,也没觉得写起来多麻烦,性能还最好,不用担心兼容性的问题( forEach 只支持 IE9 及以上)。最主要的是,for有一个好处是可以break。
-
for…in 作用在数组上【不推荐】
1、会跳过空位。
2、如果有原型属性,原型属性也会被访问
Array.prototype.test = function(){ } var array=[]; array[0] = 1; array[5] = 5; for(var i in array){ console.log(i, array[i]) } // 0 1 // 5 5 // test ƒ (){}
【会打印原型链上的属性】 !!如果不想被访问原型
Array.prototype.test = function(){ } var array=[]; array[0] = 1; array[5] = 5; for(var i in array){ if (array.hasOwnProperty(i) === true) { console.log(i, array[i]) } } // 0 1 // 5 5
【hasOwnProperty() 方法会返回一个布尔值,指示对象自身属性中是否具有指定的属性】 所有继承了 Object 的对象都会继承到 hasOwnProperty 方法。这个方法可以用来检测一个对象是否含有特定的自身属性;和 in 运算符不同,该方法会忽略掉那些从原型链上继承到的属性。
-
for…of
ES6 借鉴 C++、Java、C# 和 Python 语言,引入了 for...of 循环,作为遍历所有数据结构的统一的方法。
一个数据结构只要部署了 Symbol.iterator 属性,就被视为具有 iterator 接口,就可以用 for...of 循环遍历它的成员。也就是说,for...of 循环内部调用的是数据结构的 Symbol.iterator 方法。
for...of 循环可以使用的范围包括数组、Set 和 Map 结构、某些类似数组的对象(比如 arguments 对象、DOM NodeList 对象)、后文的 Generator 对象,以及字符串。
2、使用 for...of 作用在数组,或者类数组的对象上(比如 arguments 对象、DOM NodeList 对象)