for循环
for (var index = 0; index < array.length; index++) {
console.log(array[index]);
}
循环的最原始的写法,相比较下面的几种循环,写法较为麻烦
forEach
forEach循环是数组内置的循环方法,其会对数组的每个元素执行一次提供的函数
arr.forEach(function(element) {
console.log(element);
});
forEach在使用中需要注意,我们是无法中止或者跳出forEach循环的,除非抛出一个异常,像下面这样:
var array = [1,2,3,4,5]
try{
array.forEach(function(item){
if(item == 3){
throw "error";
}
console.log(item)
})
}catch(e){
console.log(e)
}
打印结果:
1
2
error
所以如果你的需求是这样,那么使用forEach时不明智的,可以选用其他的训话方法
for-in
for...in以任意顺序遍历一个对象的可枚举属性。所以for-in不适合用来迭代一个Array。同时,for-in是可以遍历对象中所有可枚举属性的,包括原型链上的可枚举属性。
let ret = [];
array.num = 6; // 对象上直接添加属性
Array.prototype.num = 6; // 原型链中添加属性
for(let i in array){
ret.push(array[i])
}
console.log(ret) // [ 1, 2, 3, 4, 5, 6, 7 ]
如果可以地设置属性为不可枚举,那么for-in循环将不会遍历到这个属性
let ret = [];
Object.defineProperty(array,"num",{
enumerable: false, // 设置属性不可遍历
value: 8
})
for(let i in array){
ret.push(array[i])
}
console.log(ret) // [ 1, 2, 3, 4, 5 ]
for-of
一个数据结构只要部署了Symbol.iterator属性,就被视为具有 iterator 接口,就可以用for...of循环遍历它的成员。也就是说,for...of循环内部调用的是数据结构的Symbol.iterator方法。
for-of是ES6规范中的内容,其适用范围包括Array、Map、Set、String、TypedArray、arguments和DOM NodeList 对象等;下面借助MDN中例子,我们来比较下for-of和for-in的区别。
Object.prototype.objCustom = function() {};
Array.prototype.arrCustom = function() {};
let iterable = [3, 5, 7];
iterable.foo = 'hello';
for (let i in iterable) {
console.log(i); // logs 0, 1, 2, "foo", "arrCustom", "objCustom"
}
for (let i in iterable) {
if (iterable.hasOwnProperty(i)) {
console.log(i); // logs 0, 1, 2, "foo"
}
}
for (let i of iterable) {
console.log(i); // logs 3, 5, 7
}
上例中,iterable是一个数组,是Array对象的一个实例,Array继承自Object。所以当使用for-in去迭代数组时,原型链中的内容也被遍历出来;而for-of循环只会遍历自身的属性
参考
1、阮一峰ES6入门
2、for...in MDN