在JavaScript中遍历数组（for each循环）

截至ECMAScript 6版本：

list = [0, 1, 2, 3]
for (let obj of list) {
    console.log(obj)
}

of避免了与in相关的怪异情况，并使其像其他语言的for循环一样工作，而let则将i绑定在循环内，而不是函数内部。

当只有一个命令时（例如上面的示例），可以省略括号（{}）。

以下是 jQuery 中三种 foreach 实现方式。

var a = [3,2];

$(a).each(function(){console.log(this.valueOf())}); //Method 1
$.each(a, function(){console.log(this.valueOf())}); //Method 2
$.each($(a), function(){console.log(this.valueOf())}); //Method 3

可能循环for(i = 0; i < array.length; i++)不是最佳选择。为什么？如果你有这个：

var array = new Array();
array[1] = "Hello";
array[7] = "World";
array[11] = "!";

这个方法将会从array[0]调用到array[2]。首先，它将引用您甚至没有的变量，其次，您在数组中也没有这些变量，第三，它会使代码更加粗糙。看这里，这是我使用的：

for(var i in array){
    var el = array[i];
    //If you want 'i' to be INT just put parseInt(i)
    //Do something with el
}

如果你想把它变成一个函数，你可以这样做：

function foreach(array, call){
    for(var i in array){
        call(array[i]);
    }
}

如果你想要更加合理地打破某个事物：

function foreach(array, call){
    for(var i in array){
        if(call(array[i]) == false){
            break;
        }
    }
}

foreach(array, function(el){
    if(el != "!"){
        console.log(el);
    } else {
        console.log(el+"!!");
    }
});

它返回：

//Hello
//World
//!!!

现在一个简单的解决方案是使用underscore.js库。它提供了许多有用的工具，比如each，如果可用，它会自动委派任务给本地的forEach。

这里是一个CodePen示例，展示了它的工作原理：

var arr = ["elemA", "elemB", "elemC"];
_.each(arr, function(elem, index, ar)
{
...
});

参见

• 本地Array.prototype.forEach()文档。
• for_each...in(MDN)解释了for each (variable in object)已作为ECMA-357 (EAX)标准的一部分而被弃用。
• for (variable of object)迭代的下一个方式(MDN)， 是Harmony (ECMAScript 6)提案的一部分。

在原生的JavaScript中，没有任何for each循环。你可以使用库来获取这个功能（我推荐Underscore.js），或者使用简单的for循环。

for (var instance in objects) {
   ...
}

请注意，可能有理由使用更简单的for循环（请参见Stack Overflow问题 为什么在数组迭代中使用“for…in”是一个坏习惯？）。

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

ECMAScript 5（JavaScript的版本）可用于处理数组：

forEach - 遍历数组中的每个项目并对每个项目执行所需操作。

['C', 'D', 'E'].forEach(function(element, index) {
  console.log(element + " is #" + (index+1) + " in the musical scale");
});

// Output
// C is the #1 in musical scale
// D is the #2 in musical scale
// E is the #3 in musical scale

如果您对使用一些内置功能在数组上进行操作更感兴趣。

map - 它会使用回调函数的结果创建一个新的数组。 当您需要格式化数组元素时，可以使用此方法。

// Let's upper case the items in the array
['bob', 'joe', 'jen'].map(function(elem) {
  return elem.toUpperCase();
});

// Output: ['BOB', 'JOE', 'JEN']

reduce - 正如其名，通过调用给定的函数将当前元素和上一次执行的结果传递进去，将数组减少为单个值。

[1,2,3,4].reduce(function(previous, current) {
  return previous + current;
});
// Output: 10
// 1st iteration: previous=1, current=2 => result=3
// 2nd iteration: previous=3, current=3 => result=6
// 3rd iteration: previous=6, current=4 => result=10

every - 如果数组中的所有元素都通过回调函数中的测试，则返回true或false。

// Check if everybody has 18 years old of more.
var ages = [30, 43, 18, 5];
ages.every(function(elem) {
  return elem >= 18;
});

// Output: false

filter - 与 every 非常相似，但 filter 返回一个数组，其中包含返回给定函数为 true 的元素。

// Finding the even numbers
[1,2,3,4,5,6].filter(function(elem){
  return (elem % 2 == 0)
});

// Output: [2,4,6]

在JavaScript中，有几种方法可以循环数组，如下所示：
for是其中最常见的一种。它可以循环整个代码块。

var languages = ["Java", "JavaScript", "C#", "Python"];
var i, len, text;
for (i = 0, len = languages.length, text = ""; i < len; i++) {
    text += languages[i] + "<br>";
}
document.getElementById("example").innerHTML = text;

<p id="example"></p>

while - 当条件为真时循环执行。它似乎是最快的循环方式。

var text = "";
var i = 0;
while (i < 10) {
    text +=  i + ") something<br>";
    i++;
}
document.getElementById("example").innerHTML = text;

<p id="example"></p>

do/while - 在条件为真的情况下循环执行一段代码块，至少会运行一次

var text = ""
var i = 0;

do {
    text += i + ") something <br>";
    i++;
}
while (i < 10);

document.getElementById("example").innerHTML = text;

<p id="example"></p>

功能性循环- forEach, map, filter, 还有 reduce (它们遍历函数，但当你需要对数组做一些操作时使用)

// For example, in this case we loop through the number and double them up using the map function
var numbers = [65, 44, 12, 4];
document.getElementById("example").innerHTML = numbers.map(function(num){return num * 2});

<p id="example"></p>

了解有关数组函数式编程的更多信息和示例，请查看博客文章JavaScript中的函数式编程：map，filter和reduce。

这是一个非稀疏列表的迭代器，索引从0开始，这是在处理document.getElementsByTagName或document.querySelectorAll时的典型情况。

function each( fn, data ) {

    if(typeof fn == 'string')
        eval('fn = function(data, i){' + fn + '}');

    for(var i=0, L=this.length; i < L; i++) 
        fn.call( this[i], data, i );   

    return this;
}

Array.prototype.each = each;  

使用示例：

示例 #1

var arr = [];
[1, 2, 3].each( function(a){ a.push( this * this}, arr);
arr = [1, 4, 9]

例子 #2

each.call(document.getElementsByTagName('p'), "this.className = data;",'blue');

每个 p 标签都添加 class="blue"

示例 #3

each.call(document.getElementsByTagName('p'), 
    "if( i % 2 == 0) this.className = data;",
    'red'
);

每隔一个 p 标签添加 class="red" 属性。

示例 #4

each.call(document.querySelectorAll('p.blue'), 
    function(newClass, i) {
        if( i < 20 )
            this.className = newClass;
    }, 'green'
);

最后，前20个蓝色 p 标签将被更改为绿色。

当使用字符串作为函数时要小心：该函数是在上下文之外创建的，应仅在您确定变量作用域的情况下使用。否则，最好传递那些作用域更直观的函数。

尽可能使用for...of

正如上表所示，应在适当的位置使用for...of。由于它支持异步函数、跳过非数字属性并防止通过意外修改循环索引而弄乱循环。

语法

const nums = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
for (const num of nums) {
  /* Do something with num */
}

查看for...of参考文档以获取更多示例，链接到规范和for...of与for...in之间的区别。或者可以查看教程以了解它们的区别。

在forEach中没有内置的打断执行的能力。要打断执行，请使用以下方式：Array#some：

[1,2,3].some(function(number) {
    return number === 1;
});