js中的常见的循环迭代：for loop, forEach, for...in... for...

Leo_chen 发布于2019-08-23 12:44 / 760人阅读

摘要：下面就总结下中常见的几种循环方法。因为循环将遍历对象本身的所有可枚举属性，以及对象从其构造函数原型中继承的属性。上也明确提示不应该用于迭代一个，其中索引顺序很重要。

引言

平时工作中循环的使用场景可以说是非常之多了，昨天改别人代码时候有位同事非常喜欢用ES6等新特性，一个数组的遍历全部都是用for...of...，然后业务需求要用到数组中的序号index值，就很尴尬了，我只能改回forEach了。但是for...of...在很多情况下还是很强大的，比如中断之类的。下面就总结下js中常见的几种循环方法。

常见的循环方法 for loop

说起for循环，大家的思绪应该马上就回到第一次上计算机课时候的美好大一生活吧，几乎所有语言通用的循环方法：

for (var i = 0; i < 10; i++) {
  console.log(i);
}

for (let i = 0; i < products.length; i++) {
  console.log(products[i]);
}

简单易懂，如果你不知道es5和es6的循环方法, 就用这个来对数组进行遍历，并且可以用break中断。但是对数组进行循环包一层这个条件总归有些啰嗦，有没有更简洁的方法呢？当然，继续往下看。

forEach

forEach是Array.prototype上的方法，我们可以使用它对数组进行循环遍历。因此一个数组就可以直接如下调用此方法即可：

products.forEach(function(product) {
  console.log(product);
});

你不需要先去计算数组的总数才能循环，直接用就可以了。那么如果需要获取每项的序号呢？forEach方法第二个参数就是当前循环项的index值。

products.forEach(function(product，index) {
  console.log(index, product);
});

也就等价于for循环中的写法：
for (var i = 0; i < products.length; i++) {
console.log(i, products[i]);
}

唯一美中不足的就是forEach不支持中断循环，如果不需要条件中断循环数组的话，采用forEach是最好的选择，尤其是遍历一些嵌套数组双重循环时候，写起来代码可读性会好很多。

for...in...

var arr = [
  "a", 
  "b"
];
for (var i in arr) {
  console.log(i); //0 1
}

以任意顺序遍历一个对象的可枚举属性。大家不要忘了数组也是对象...我们经常用这个方法来遍历一个普通对象，其实也是可以迭代一个数组的，数组的索引就是0,1,2这样的数字。但是强烈建议不要这样用。因为循环将遍历对象本身的所有可枚举属性，以及对象从其构造函数原型中继承的属性。
MDN上也明确提示：for...in不应该用于迭代一个 Array，其中索引顺序很重要。
并且如果你为了过滤迭代继承的属性方法，又要用hasOwnProperty这些方法，非常繁琐。
总之通常情况下我们不会去要迭代继承而来的属性，因此不太推荐使用for...in...。
甚至你用forEach这样做都好一点：

Object.keys(obj).forEach(function(key) { console.log(obj[key]) });

for...of...

最后出场也是ES6最新支持的迭代方法就是for...of...。MDN上的定义：
在可迭代对象（包括 Array，Map，Set，String，TypedArray，arguments 对象等等）上创建一个迭代循环，调用自定义迭代钩子，并为每个不同属性的值执行语句。
可以看到它支持的种类非常多，最常用的就是Array和arguments了，但是注意虽然支持这么多并不能像for...in...用于普通Object的迭代。上面我们不推荐for...in...应用于数组，那么for...of...就非常合适了：

var arr = [
  "a", 
  "b"
];
for (var i in arr) {
  console.log(i); //a b
}

遍历数组，每项直接就是值，并且可以中断，如果不关心索引的话，强烈推荐。但是回到引言那里如果你需要索引值这就不是很方便了。但是ES6中有新的entries方法可以让for...in...也可以获取索引。

for (let [index, val] of arr.entries()) {
      console.log(index);   
}

总结

当遍历Array时候，在需要索引时候推荐用forEach，不需要索引时候用for...of...。

当迭代Object时候，虽然只能用for...in...配合hasOwnproperty过滤不需要的，但我还是推荐用Object.keys()配合forEach：

Object.keys(obj).forEach(function(key) { ... });

当迭代String、arguments等可迭代对象时候，也只能使用for...of...。

参考

MDN for...of

MDN for...in

for..of 获取索引

云服务器 GPU云服务器 for循环和foreach js如何for循环 js for循环回调 js for循环可以

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/98969.html

[学习笔记] ES6的数组遍历方式 for, forEach，for...in, for...of

摘要：有如果要遍历一个数组，我们有多个方式可以进行。循环循环的问题在于遍历的时候获得的是指针，要获取元素需要的方式取到。另外迭代的是对象所有的属性或函数都会被迭代。选用可以根据自己的实际需求。 javascript ES6有如果要遍历一个数组，我们有多个方式可以进行。下面我们来分析一下各自的利弊。 for循环 const langs = [java, php, c++, python] ...

rozbo 2019-08-21 16:43 评论0 收藏0
JavaScript的几种循环方式

摘要：本教程解释了现代中各种各样的循环可能性目录介绍提供了许多迭代循环的方法。引入了循环，它结合了的简洁性和破解能力注意使用。此循环在每次迭代中创建一个新范围，因此我们可以安全地使用它而不是。 JavaScript提供了许多通过LOOPS迭代的方法。本教程解释了现代JAVASCRIPT中各种各样的循环可能性 showImg(https://segmentfault.com/img/bVbfH...

Allen 2019-08-29 16:28 评论0 收藏0
JavaScript的几种循环方式

摘要：本教程解释了现代中各种各样的循环可能性目录介绍提供了许多迭代循环的方法。引入了循环，它结合了的简洁性和破解能力注意使用。此循环在每次迭代中创建一个新范围，因此我们可以安全地使用它而不是。 JavaScript提供了许多通过LOOPS迭代的方法。本教程解释了现代JAVASCRIPT中各种各样的循环可能性 showImg(https://segmentfault.com/img/bVbfH...

piapia 2019-08-26 12:19 评论0 收藏0
JavaScript的几种循环方式

摘要：本教程解释了现代中各种各样的循环可能性目录介绍提供了许多迭代循环的方法。引入了循环，它结合了的简洁性和破解能力注意使用。此循环在每次迭代中创建一个新范围，因此我们可以安全地使用它而不是。 JavaScript提供了许多通过LOOPS迭代的方法。本教程解释了现代JAVASCRIPT中各种各样的循环可能性 showImg(https://segmentfault.com/img/bVbfH...

ztyzz 2019-08-02 11:20 评论0 收藏0
ES6语法之可迭代协议和迭代器协议

摘要：有两个协议可迭代协议和迭代器协议。为了变成可迭代对象，一个对象必须实现或者它原型链的某个对象必须有一个名字是的属性迭代器协议该迭代器协议定义了一种标准的方式来产生一个有限或无限序列的值。 ECMAScript 2015的几个补充，并不是新的内置或语法，而是协议。这些协议可以被任何遵循某些约定的对象来实现。有两个协议：可迭代协议和迭代器协议。可迭代协议可迭代协议允许 JavaScri...

sarva 2019-08-22 11:23 评论0 收藏0