JavaScript中的数组遍历作弊表

给定一个数组，可以通过以下多种方式之一遍历它。

1.经典for loop

const myArray=['Hello'，'World']；for（设i=0；i<myArray.length；i++）{console.log（myArray[i]）；}

2.用于。。。属于

const myArray=['Hello'，'World']；for（myArray的常量项）{console.log（项）；}

3.Array.prototype.forEach（）

const myArray=['Hello'，'World']；myArray.forEach（项=>{console.log（项）；});

4.while循环

const myArray=['Hello'，'World']；设i=0；while（i＜myArray.length）{console.log（myArray[i]）；i++；}

5.do…while循环

const myArray=['Hello'，'World']；设i=0；做{console.log（myArray[i]）；i++；}而（i＜myArray.length）；

6.队列样式

const myArray=['Hello'，'World']；while（myArray.length）{console.log（myArray.shift（））；}

7.堆栈样式

注：该列表在本页中以相反的方式打印。const myArray=['Hello'，'World']；while（myArray.length）{console.log（myArray.pop（））；}

优化的方法是缓存数组长度，并使用单变量模式，用一个var关键字初始化所有变量。

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

    // Do something
}

如果迭代的顺序无关紧要，那么您应该尝试反向循环。它是最快的，因为它减少了开销条件测试，并且减少了一个声明：

var i,myStringArray = ["item1","item2"];
for (i =  myStringArray.length; i--) {
    alert(myStringArray[i]);
}

或者使用while循环更好更干净：

var myStringArray = ["item1","item2"],i = myStringArray.length;
while(i--) {
   // Do something with fruits[i]
}

当然，这是低效的，很多人都鄙视它，但它是最接近上述的一种：

var myStringArray = ["Hello","World"];
myStringArray.forEach(function(f){
    // Do something
})

var array=['hai'，'hello'，'how'，'are'，'you']$（文档）.ready（函数（）{$（'#clickButton'）.click（函数（）{对于（var i=0；i<array.length；i++）{警报（阵列[i]）}})})<script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js“></script><input id=“clickButton”value=“click Me”type=“button”/><div id=“show”></div>

深奥的

让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对于中等阵列的示例结果：

我还没有看到这种变化，我个人最喜欢这种变化：

给定一个数组：

var someArray = ["some", "example", "array"];

您可以在不访问长度属性的情况下对其进行循环：

for (var i=0, item; item=someArray[i]; i++) {
  // item is "some", then "example", then "array"
  // i is the index of item in the array
  alert("someArray[" + i + "]: " + item);
}

请参阅本JsFidle演示：http://jsfiddle.net/prvzk/

这只适用于非稀疏阵列。这意味着数组中的每个索引实际上都有一个值。然而，我发现在实践中我几乎从未在JavaScript中使用过稀疏数组。。。在这种情况下，通常更容易将对象用作映射/哈希表。如果您有一个稀疏数组，并且希望在0上循环。。length-1，您需要for（vari=0；i<someArray.length；++i）构造，但仍需要在循环内使用if来检查当前索引处的元素是否已实际定义。

此外，正如CMS在下面的注释中所提到的，您只能在不包含任何错误值的数组上使用它。示例中的字符串数组是有效的，但如果您有空字符串或0或NaN等数字，则循环将提前中断。在实践中，这对我来说几乎从来都不是问题，但这是一件需要记住的事情，这使得在使用它之前，这是一个需要考虑的循环……这可能会使某些人失去资格：）

我喜欢这个循环的地方是：

写起来很短无需访问（更不用说缓存）长度属性要访问的项在循环中自动定义你选择的名字下的身体。与array.push和array.please非常自然地结合，使用列表/堆栈等数组

这种方法之所以有效，是因为数组规范规定，当您从索引中读取一个项>=数组长度时，它将返回undefined。当你写到这样的位置时，它实际上会更新长度。

对我来说，这个构造最接近于我喜欢的Java5语法：

for (String item : someArray) {
}

…还有一个额外的好处，那就是了解循环内的当前索引