遍历JavaScript中的数组

您可以使用Array.prototype.forEach(...)：

var arr = ["apple", "banana", "cherry", "mango"];
arr.forEach((item, index)=>{
   //Some code...
});

或Array.prototype.map(...)：

var arr = ["apple", "banana", "cherry", "mango"];
arr.map((item, index)=>{
   //Some code...
});

或前面提到的jquery或for循环方式。

简短的回答：是的。您可以这样做：

var myArray = ["element1", "element2", "element3", "element4"];

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

在浏览器控制台中，您可以看到类似“ element1”，“ element2”等的内容。

var x = [4, 5, 6];
for (i = 0, j = x[i]; i < x.length; j = x[++i]) {
    console.log(i,j);
}

干净很多...

如果要使用jQuery，它在其文档中有一个很好的示例：

 $.each([ 52, 97 ], function( index, value ) {
      alert( index + ": " + value );
 });

优化的方法是缓存数组的长度，并使用单个var模式通过单个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]
}

我认为最好的方法是使用Array.forEach函数。如果您不能使用它，我建议您从MDN获取polyfill。要使其可用，这肯定是在JavaScript中遍历数组的最安全方法。

Array.prototype.forEach（）

因此，正如其他人所建议的那样，这几乎总是您想要的：

var numbers = [1,11,22,33,44,55,66,77,88,99,111];
var sum = 0;
numbers.forEach(function(n){
  sum += n;
});

这样可以确保在处理数组的范围内所需的任何内容都在该范围内，并且仅在处理数组的值，而不在处理对象属性和其他成员，这是for ..在做的事情。

使用常规C风格 for在大多数情况下，循环即可。重要的是要记住，循环中的所有内容都与程序的其余部分共享其作用域，{}不会创建新的作用域。

因此：

var sum = 0;
var numbers = [1,11,22,33,44,55,66,77,88,99,111];

for(var i = 0; i<numbers.length; ++i){
  sum += numbers[i];
}

alert(i);

将输出“ 11”-可能不是您想要的。

一个有效的jsFiddle示例：https ://jsfiddle.net/workingClassHacker/pxpv2dh5/7/

最优雅，最快捷的方式

var arr = [1, 2, 3, 1023, 1024];
for (var value; value = arr.pop();) {
    value + 1
}

http://jsperf.com/native-loop-performance/8

编辑（因为我错了）

比较用于遍历100000个项目的数组的方法，并每次使用新值进行最少的操作。

• http://jsben.ch/#/BQhED

制备：

<script src="//code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
<script>
    Benchmark.prototype.setup = function() {
        // Fake function with minimal action on the value
        var tmp = 0;
        var process = function(value) {
            tmp = value; // Hold a reference to the variable (prevent engine optimisation?)
        };

        // Declare the test Array
        var arr = [];
        for (var i = 0; i < 100000; i++)
            arr[i] = i;
    };
</script>

测试：

<a href="http://jsperf.com/native-loop-performance/16" 
   title="http://jsperf.com/native-loop-performance/16"
><img src="http://i.imgur.com/YTrO68E.png" title="Hosted by imgur.com" /></a>

在JavaScript中有两种方法可以做到这一点。前两个示例是JavaScript示例。第三个使用JavaScript库，即jQuery使用该.each()函数。

var myStringArray = ["hello", "World"];
for(var i in myStringArray) {
  alert(myStringArray[i]);
}

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

var myStringArray = ["hello", "World"];
$.each(myStringArray, function(index, value){
  alert(value);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

有一种方法可以仅对自己的对象属性进行迭代，而不包括原型的属性：

for (var i in array) if (array.hasOwnProperty(i)) {
    // Do something with array[i]
}

但是它仍然会遍历自定义属性。

在JavaScript中，可以将任何自定义属性分配给任何对象，包括数组。

如果想遍历数组疏林，for (var i = 0; i < array.length; i++) if (i in array)或array.forEach与es5shim要使用。

如果您使用的是jQuery库，请考虑使用 http://api.jquery.com/jQuery.each/

从文档中：

jQuery.each( collection, callback(indexInArray, valueOfElement) )

返回： 对象

说明： 通用迭代器函数，可用于无缝迭代对象和数组。具有长度属性的数组和类似数组的对象（例如函数的arguments对象）通过从0到length-1的数字索引进行迭代。其他对象通过其命名属性进行迭代。

该$.each()函数与$(selector).each()，专门用于在jQuery对象上进行迭代的函数不同。该$.each() 函数可用于遍历任何集合，无论它是映射（JavaScript对象）还是数组。对于数组，每次回调都会传递一个数组索引和一个对应的数组值。（也可以通过this关键字访问该值，但是即使它是简单的字符串或数字值，Javascript也会始终将其包装this为一个Object整数。）该方法返回其第一个参数，即被迭代的对象。

我会彻底建议您使用underscore.js库。它为您提供了各种功能，可用于遍历数组/集合。

例如：

_.each([1, 2, 3], function(num){ alert(num); });
=> alerts each number in turn...

数组循环：

for(var i = 0; i < things.length; i++){
    var thing = things[i];
    console.log(thing);
}

对象循环：

for(var prop in obj){
    var propValue = obj[prop];
    console.log(propValue);
}

有多种方法可以遍历JavaScript中的数组。

通用循环：

var i;
for (i = 0; i < substr.length; ++i) {
    // Do something with `substr[i]`
}

ES5的forEach：

substr.forEach(function(item) {
    // Do something with `item`
});

jQuery.each：

jQuery.each(substr, function(index, item) {
    // Do something with `item` (or `this` is also `item` if you like)
});

请查看此以获取详细信息，或者您也可以检查MDN以遍历JavaScript中的数组，并使用jQuery检查每个的jQuery。

如果您想用一种简洁的方式编写一个快速循环，可以反向进行迭代：

for (var i=myArray.length;i--;){
  var item=myArray[i];
}

这具有缓存的长度（类似于的利益for (var i=0, len=myArray.length; i<len; ++i)而不像for (var i=0; i<myArray.length; ++i)），同时更少的字符键入。

有时甚至需要反向迭代，例如在活动的NodeList上迭代时，您计划在迭代过程中从DOM中删除项目。

在JavaScript中，不建议使用for-in循环遍历数组，但最好使用如下for循环：

for(var i=0, len=myArray.length; i < len; i++){}

它还进行了优化（“缓存”阵列长度）。如果您想了解更多信息，请阅读我关于该主题的文章。

您可以使用map，这是一种功能编程技术，在其他语言（例如Python和Haskell）中也可以使用。

[1,2,3,4].map( function(item) {
     alert(item);
})

通用语法为：

array.map(func)

通常func会采用一个参数，它是数组的一项。但是对于JavaScript，它可以采用第二个参数（即项目的索引）和第三个参数（即数组本身）。

返回值array.map是另一个数组，因此您可以像这样使用它：

var x = [1,2,3,4].map( function(item) {return item * 10;});

现在x是[10,20,30,40]。

您不必内联编写函数。它可以是一个单独的功能。

var item_processor = function(item) {
      // Do something complicated to an item
}

new_list = my_list.map(item_processor);

这相当于：

 for (item in my_list) {item_processor(item);}

除非你不明白new_list。