JS数组遍历for vs for-in vs for-of vs forEach

今天我们来对比一下JavaScript中的数组遍历：

for (let index=0; index < someArray.length; index++) {
  const elem = someArray[index];
  // ···
}

for循环是一个古老的遍历器，从ECMAScript 1就存在了，应该是大家最熟悉的遍历方式。最大的优势在于我们可以指定从数组的哪个下标开始遍历。

for (const key in someArray) {
  // ···
}

for-in是用key来遍历，准确地说它遍历的不是数组，而是对象。会访问对象的所有可枚举属性（包括继承的属性）。例如：

for-in loop

我们给数组添加了一个k1的属性，也被遍历出来了。当我们打印数组长度的时候，依然是5。遍历数组的时候不推荐使用for-in，虽然正常的情况下也是能够完成遍历，但是还是会出现意外情况，而且key是string类型，与整数类型的index也不相符。

someArray.forEach((elem, index) => {
  // ···
});

ECMAScript 5中提出了forEach来让我们更加方便地遍历数组，在回调函数里直接给我们value和index。目前forEach已经成为了遍历数组最常用的方法。但是forEach也有缺陷：

因此，array方法也推出了一些增强的工具函数，比如some、find等等。

for (const elem of someArray) {
  // ···
}

在ES6中，又增加了一个新的遍历器for-of。不仅可以遍历数组，还可以使用await、break、continue等。

从遍历数组的角度来说，for-in和for-of区别在一个是给你数组下标，一个直接返回给你数组元素。从实现原理上说，for-in利用的是对连续内存区域的读取，for-of使用的是迭代器。也就是说for-of不仅可以遍历数组，一切实现了迭代器的对象，都可以使用for-of遍历，例如Set、Map等。

for-of配合Array的keys()、entries()、values()等实例方法，能轻松变换出对数组的不同遍历方式。

如果你对js的这些基本功、细节感兴趣，不要忘了给我点赞和关注哦。也欢迎你在留言区和我分享交流！

相关推荐