1.遍历Array时候,需要索引时候推荐用forEach,不需要索引时候用for...of...。
2.遍历Array时候,不需要中断时候推荐用forEach,需要中断时候用for...of...。
3.迭代普通Object时候,虽然能用for...in...配合hasOwnproperty过滤原型上不需要的属性,推荐用Object.keys()配合forEach:
4.迭代String、arguments等可迭代对象时候,也只能使用
js中的for loop: for forEach, for...in... for...of...
for
for (let i = 0; i < 10; i++) {
console.log(i);
}
for (let i = 0; i < products.length; i++) {
console.log(products[i]);
}
简单易懂,如果你不知道es5和es6的for loop方法, 就用这个来对数组进行遍历,并且可以用break中断。但是对于数组进行循环包一层这个条件总归有些啰嗦,有没有更简洁的方法。
-
forEach
forEach是Array.prototype上的方法,可以使用它对数组进行循环遍历;不需要计算数组的总数,直接用。第二个参数是当前循环项的下标(index)的值
products.forEach(product=> {
console.log(product);
});
// index 索引值
products.forEach((product,index) =>{
console.log(index, product);
});
forEach不支持中断循环,若不需要条件中断循环数组,采用forEach是最好的选择,尤其是遍历一些嵌套数组双重循环时候,写起来代码可读性会好很多。
for...in...
let arr = ['a', 'b'];
for (let i in arr) {
console.log(i); //0 1
}
以任意顺序遍历对象的可枚举属性。数组也是对象,用这个方法来遍历普通对象,也是可以迭代数组的,数组的索引就是0,1,2这样的数字,不建议用。因循环将遍历对象本身的所有可枚举属性,以及对象从其构造函数原型中继承的属性。
MDN上提示:for...in不应该用于迭代一个 Array,其中索引顺序很重要。并且如果你为了过滤迭代继承的属性方法,又要用hasOwnProperty这些方法,非常繁琐。通常情况下我们不会去这样处理迭代继承而来的属性,不推荐使用for...in...。可以用forEach:
Object.keys(obj).forEach(key=> { console.log(obj[key]) });
for...of...
for...of...是ES6支持的迭代方法。
MDN上的定义:
在可迭代对象(包括 Array,Map,Set,String,TypedArray,arguments 对象等等)上创建一个迭代循环,调用自定义迭代钩子,并为每个不同属性的值执行语句。
它支持的种类多,常用的是Array和arguments了。虽支持这么多并不能像for...in...用于普通Object的迭代。推荐for...of...应用于数组:
遍历数组每项就是值,支持中断,若不关心索引推荐。你需要索引值这就不是很方便。但是ES6中的entries方法可以让for...in...获取索引。
let arr = [ 'a', 'b'];
for (let i of arr) {
console.log(i); //a b
}
// 获取索引
for (let [index, val] of arr.entries()) {
console.log(index);
}