6种不同的方法循环遍历阵列

可以通过许多不同的方法循环遍历数组。我从上到下整理了我最喜欢的6种方法。

1.使用for循环

当它只是在数组中循环时，for循环是我的首选。

让数组=[1，2，3，4，5]；for（设i=0；i<array.length；i++）{console.log（array[i]）；}

2.使用forEach循环

forEach循环是一种在数组中循环的现代方式。此外，它还提供了对阵列和元素的更多灵活性和控制。

让数组=[1，2，3，4，5]；array.forEach（（元素）=>{console.log（元素）；});

3.用于。。。属于

对于of循环允许您直接访问数组元素。

让数组=[1，2，3，4，5]；for（数组的let元素）{console.log（元素）；}

4.用于。。。在回路中

对于中提供了一个键，您可以使用该键访问数组元素。

让数组=[1，2，3，4，5]；for（数组中的let索引）{console.log（array[index]）；}

5.使用while循环

而loop也可以用于循环通过阵列。

让数组=[1，2，3，4，5]；let length=array.length；而（长度>0）{console.log（array[array.length-length]）；长度--；}

6.使用do…while循环

同样，我使用do…while循环

让数组=[1，2，3，4，5]；let length=array.length；做{console.log（array[array.length-length]）；长度--；}而（长度>0）

它不是100%相同，但相似：

var myStringArray=['Hello'，'World']；//数组使用[]而不是｛｝for（myStringArray中的var i）{console.log（i+'->'+myStringArray[i]）；//我是索引/键，而不是项目}

似乎列出了所有变体，除了lodash的Each：

_.forEach([1, 2], (value) => {
  console.log(value);
});

深奥的

让a=[“你好”，“世界”]；while（a.length）{console.log（a.shift（））；}

性能测试

今天（2022-11-13），我在Chrome 107、Safari 15.2和Firefox 106上对选定的解决方案进行了测试。

结论

解决方案C和D在所有阵列的所有浏览器上都是快速或最快的。解决方案A和B在所有阵列的所有浏览器上都是最慢的

后果

细节

我执行3项测试：

small-用于2元素数组（如OP）-可以在此处运行中等-用于10K元素阵列-您可以在这里运行大-对于100K元素数组-您可以在这里运行

下面的代码段显示了测试中使用的代码。

函数A（A）{设r=0；而（a.length）r+=a.shift（）.length；返回r；}函数B（a）{设r=0；对于（i in a）r+=a[i]长度；返回r；}函数C（a）{设r=0；对于（a的x）r+=x.length；返回r；}函数D（a）{设r=0；对于（i=0；i<a.length；++i）r+=a[i].length；返回r；}函数E（a）{设r=0；a.对于每个（x=>r+=x.length）；返回r；}let arr=[“你好”，“世界！”]；[A，B，C，D，E].forEach（f=>console.log（`${f.name}:${f（[…arr]）}`））

以下是Chrome对于中等阵列的示例结果：

正式的（也许是旧的）方式是Array.protocol.forEach（…）：

var arr = ["apple", "banana", "cherry", "mango"];
arr.forEach(function(item, index, _) {
   console.log("[" + index + "] = '" + item + "'");
});

是的，假设您的实现包括for。。。在ECMAScript 2015（“Harmony”版本）中引入的功能。。。现在这是一个相当安全的假设。

它的工作原理如下：

// REQUIRES ECMASCRIPT 2015+
var s, myStringArray = ["Hello", "World"];
for (s of myStringArray) {
  // ... do something with s ...
}

或者更好，因为ECMAScript 2015还提供了块范围的变量：

// REQUIRES ECMASCRIPT 2015+
const myStringArray = ["Hello", "World"];
for (const s of myStringArray) {
  // ... do something with s ...
}
// s is no longer defined here

（变量s在每次迭代中都是不同的，但只要不在循环体中修改，它仍然可以在循环体内部声明为常量。）

关于稀疏数组的一个注意事项：JavaScript中的数组实际存储的项目可能不像其长度所报告的那么多；该数字仅比存储值的最高索引大一个。如果数组包含的元素少于其长度所指示的元素，则称为稀疏。例如，只有索引3、12和247处的项的数组是完全合法的；这种数组的长度是248，尽管它实际上只存储3个值。如果您试图访问任何其他索引处的项，则该数组将显示为具有未定义的值，但该数组与实际存储有未定义值的数组不同。您可以从许多方面看到这种差异，例如，在Node REPL显示阵列的方式中：

> a              // array with only one item, at index 12
[ <12 empty items>, 1 ]
> a[0]           // appears to have undefined at index 0
undefined
> a[0]=undefined // but if we put an actual undefined there
undefined
> a              // it now looks like this
[ undefined, <11 empty items>, 1 ]

因此，当您想要“循环遍历”数组时，您需要回答一个问题：是要在其长度所指示的整个范围内循环，并为任何缺失的元素处理未定义的元素，还是只处理实际存在的元素？这两种方法都有大量的应用；这取决于您使用数组的目的。

如果使用for..遍历数组。。中，循环的主体执行长度次，并且对于数组中实际不存在的任何项，循环控制变量设置为undefined。根据“使用”代码的细节，这种行为可能是您想要的，但如果不是，您应该使用不同的方法。

当然，有些开发人员别无选择，只能使用不同的方法，因为无论出于什么原因，他们的目标是一个尚不支持的JavaScript版本。。。属于

只要您的JavaScript实现符合先前版本的ECMAScript规范（例如，它排除了9之前版本的Internet Explorer），那么您就可以使用Array#forEach迭代器方法而不是循环。在这种情况下，您将传递一个函数，对数组中的每个项进行调用：

var myStringArray = [ "Hello", "World" ];
myStringArray.forEach( function(s) { 
     // ... do something with s ...
} );

如果您的实现支持ES6+，当然可以使用箭头函数：

myStringArray.forEach( s => { 
     // ... do something with s ...
} );

不同于。。。of，.forEach只为数组中实际存在的元素调用函数。如果传递了具有三个元素且长度为248的假设数组，它将只调用函数三次，而不是248次。如果这是您想要处理稀疏数组的方式，那么即使您的解释器支持。。。属于

最后一个选项是显式计数循环，适用于所有版本的JavaScript。您只需从0到小于长度的1进行计数，并将计数器用作索引。基本循环如下所示：

var i, s, myStringArray = [ "Hello", "World" ], len = myStringArray.length;
for (i=0; i<len; ++i) {
  s = myStringArray[i];
  // ... do something with s ...
}

这种方法的一个优点是可以选择如何处理稀疏数组。上面的代码将运行循环体的整个长度，对于任何缺失的元素，s都设置为undefined，就像for。。属于如果您希望只处理稀疏数组中实际存在的元素，例如.forEach，则可以在索引上添加一个简单的in测试：

var i, s, myStringArray = [ "Hello", "World" ], len = myStringArray.length;
for (i=0; i<len; ++i) {
  if (i in myStringArray) {
    s = myStringArray[i];
    // ... do something with s ...
  }
}

根据实现的优化，将长度值分配给局部变量（而不是在循环条件中包含完整的myStringArray.length表达式）可以显著提高性能，因为它每次都会跳过属性查找。您可以在循环初始化子句中看到长度缓存，如下所示：

var i, len, myStringArray = [ "Hello", "World" ];
for (len = myStringArray.length, i=0; i<len; ++i) {

显式计数循环还意味着您可以访问每个值的索引（如果需要的话）。该索引还作为一个额外的参数传递给传递给forEach的函数，因此您也可以这样访问它：

myStringArray.forEach( (s,i) => {
   // ... do something with s and i ...
});

对于of不会为您提供与每个对象关联的索引，但只要您正在迭代的对象实际上是Array的实例（而不是..of的其他可迭代类型之一），您就可以使用Array#entries方法将其更改为[index，item]对的数组，然后对其进行迭代：

for (const [i, s] of myStringArray.entries()) {
  // ... do something with s and i ...
}

用于。。。在其他人提到的语法中，用于循环对象的财产；因为JavaScript中的Array只是一个具有数字属性名称（以及自动更新的长度属性）的对象，理论上可以用它循环Array。但问题是它并不局限于数字属性值（记住，即使是方法实际上也只是值为闭包的财产），也不能保证按数字顺序迭代。因此，对于。。。in语法不应用于循环数组。