Примечание. Этот ответ безнадежно устарел. Для более современного подхода просмотрите методы, доступные на массив. Интересующие методы могут быть:

• для каждого
• карта
• фильтр
• застегивать
• уменьшать
• каждый
• некоторые

Стандартный способ перебора массива в JavaScript - это простой for-цикл:

var length = arr.length,
    element = null;
for (var i = 0; i < length; i++) {
  element = arr[i];
  // Do something with element
}

Обратите внимание, однако, что этот подход хорош только в том случае, если у вас есть плотный массив, и каждый индекс занят элементом. Если массив разреженный, то при таком подходе вы можете столкнуться с проблемами производительности, поскольку вы будете перебирать множество индексов, которые действительно не существуют в массиве. В этом случае лучше использовать for .. in-loop. Однако вы должны использовать соответствующие меры безопасности, чтобы гарантировать, что действуют только желаемые свойства массива (то есть элементы массива), поскольку for..in-цикл также будет перечисляться в старых браузерах, или если дополнительные свойства определены как enumerable.

В ECMAScript 5 будет метод forEach для прототипа массива, но он не поддерживается в устаревших браузерах. Таким образом, чтобы иметь возможность использовать его постоянно, у вас должна быть среда, которая его поддерживает (например, Node. js для серверного JavaScript) или используйте "Polyfill". Однако полифил для этой функции является тривиальным и, поскольку он упрощает чтение кода, это хороший полифилл для включения.

Если вы используете библиотеку jQuery, вы можете использовать jQuery.each:

$.each(yourArray, function(index, value) {
  // do your stuff here
});

РЕДАКТИРОВАТЬ:

Согласно вопросу, пользователю нужен код в javascript вместо jquery, поэтому редактирование

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

Петля назад

Я думаю, что здесь стоит упомянуть цикл reverse for:

for (var i = array.length; i--; ) {
     // process array[i]
}

Преимущества:

• Вам не нужно объявлять временную len переменную или сравнивать с array.length на каждой итерации, что может быть минутной оптимизацией.
• Удаление братьев и сестер из модели DOM в обратном порядке обычно более эффективно. (Браузеру нужно меньше перемещать элементы во внутренних массивах.)
• Если вы измените массив во время цикла, в индексе i или после него (например, вы удаляете или вставляете элемент в array[i]), то прямой цикл пропустит элемент, который сдвинулся left в позицию i, или повторно обработать i -й элемент, который был сдвинут вправо. В традиционном цикле for вы можете обновить i так, чтобы он указывал на следующий элемент, который требует обработки - 1, но просто изменить направление итерации на обратное часто бывает проще и более элегантное решение .
• Аналогичным образом, при изменении или удалении вложенных элементов DOM обратная обработка может избежать ошибок. Например, рассмотрите возможность изменения innerHTML родительского узла перед обработкой его дочерних узлов. К тому времени, когда дочерний узел будет достигнут, он будет отсоединен от DOM, будучи заменен вновь созданным дочерним узлом при записи родительского innerHTML.
• Он короче для ввода и для чтения, чем некоторые другие доступные варианты. Хотя проигрывает forEach() и for ... of от ES6.

Недостатки:

• Он обрабатывает элементы в обратном порядке. Если вы строили новый массив из результатов или выводили данные на экран, естественно, вывод будет обратным относительно исходного порядка.
• Неоднократная вставка братьев и сестер в DOM в качестве первого дочернего элемента, чтобы сохранить их порядок, менее эффективна. (Браузеру все равно придется сдвигать вещи правильно.) Чтобы создавать узлы DOM эффективно и по порядку, просто выполните цикл вперед и добавьте как обычно (а также используйте «фрагмент документа»).
• Обратный цикл сбивает с толку младших разработчиков. (Вы можете считать это преимуществом, в зависимости от вашего мировоззрения.)

Должен ли я всегда его использовать?

Некоторые разработчики используют обратный цикл for по умолчанию, если нет веской причины для перехода вперед.

Хотя прирост производительности обычно незначительный, он вроде кричит:

«Просто проделайте это с каждым элементом в списке, меня не волнует порядок!»

Однако на практике это не на самом деле является надежным признаком намерения, поскольку его невозможно отличить от тех случаев, когда вы действительно заботитесь о порядке, и действительно нужно использовать цикл в обратном порядке. Так что на самом деле потребуется другая конструкция для точного выражения намерения «безразлично», что в настоящее время недоступно в большинстве языков, включая ECMAScript, но которое можно было бы назвать, например, forEachUnordered().

Если порядок не имеет значения, а эффективность вызывает беспокойство (в самом внутреннем цикле игры или движка анимации), то может быть приемлемым использование обратного цикла for в качестве шаблона перехода. Просто помните, что наличие обратного цикла for в существующем коде не обязательно означает, что порядок не имеет значения!

Лучше было использовать forEach ()

В общем, для кода более высокого уровня, где ясность и безопасность являются более важными, я ранее рекомендовал использовать _ 8_ в качестве шаблона по умолчанию для цикла (хотя в наши дни я предпочитаю использовать for..of). Причины предпочесть forEach обратному циклу:

• Понятнее читать.
• Это указывает на то, что i не будет сдвигаться внутри блока (что всегда может быть неожиданностью, скрывающейся в длинных for и while циклах).
• Это дает вам свободный простор для закрытия.
• Это уменьшает утечку локальных переменных и случайное столкновение с внешними переменными (и их изменение).

Затем, когда вы видите обратный цикл for в своем коде, это намек на то, что он отменен по уважительной причине (возможно, одна из причин, описанных выше). И видение традиционного прямого цикла может указывать на то, что может происходить переключение.

(Если обсуждение намерения для вас не имеет смысла, тогда вам и вашему коду может быть полезно посмотреть лекцию Крокфорда на Стиль программирования и ваш мозг.)

Теперь даже лучше использовать for..of!

Ведутся споры о том, что предпочтительнее: for..of или forEach():

• Для максимальной поддержки браузера for..of требуется полифилл для итераторов, что делает ваше приложение немного медленнее для выполнения и немного больше для загрузки.

• По этой причине (и для поощрения использования map и filter) некоторые руководства по стилю интерфейса забанить for..of полностью!

• Но вышеуказанные проблемы не применимы к приложениям Node.js, где for..of теперь хорошо поддерживается.

• Кроме того, await не работает внутри forEach(). Использование for..of - это самый ясный шаблон в этом случае.

Лично я предпочитаю использовать то, что кажется наиболее легким для чтения, если только производительность или минимизация не стали серьезной проблемой. Поэтому сейчас я предпочитаю использовать for..of вместо forEach(), но всегда буду использовать map, filter или _ 27_ или _ 28_, если применимо. (Ради своих коллег я редко использую reduce.)

Как это работает?

for (var i = 0; i < array.length; i++) { ... }   // Forwards

for (var i = array.length; i--; )    { ... }   // Reverse

Вы заметите, что i-- - это среднее предложение (где мы обычно видим сравнение), а последнее предложение пустое (где мы обычно видим i++). Это означает, что i-- также используется как условие для продолжения. Что особенно важно, он выполняется и проверяется перед каждой итерацией.

• Как он может начаться с array.length, не взорвавшись?

  Поскольку i-- запускается перед каждой итерацией, на первой итерации мы фактически будем обращаться к элементу в array.length - 1, что позволяет избежать каких-либо проблем с элементами за пределами массива undefined.

• Почему он не прекращает итерацию до индекса 0?

  Цикл прекратит итерацию, когда условие i-- оценивается как ложное значение (когда оно дает 0).

  Уловка заключается в том, что, в отличие от --i, завершающий оператор i-- уменьшает i, но возвращает значение перед декрементом. Ваша консоль может продемонстрировать это:

  > var i = 5; [i, i--, i];

  [5, 5, 4]

  Таким образом, на последней итерации i ранее было 1, а выражение i-- изменяет его на 0, но фактически возвращает 1. (правда), и поэтому условие проходит. На следующей итерации i-- изменяет i на -1, но возвращает 0 (ложь), в результате чего выполнение немедленно прекращается из нижней части цикла. .

  В традиционном цикле форвардов i++ и ++i взаимозаменяемы (как указывает Дуглас Крокфорд). Однако в обратном цикле for, поскольку наш декремент также является выражением нашего условия, мы должны придерживаться i--, если мы хотим обработать элемент с индексом 0.

Мелочи

Некоторым нравится рисовать маленькую стрелочку в обратном for цикле, а в конце подмигивать:

for (var i = array.length; i --> 0 ;) {

Благодарим WYL за то, что он показал мне преимущества и ужасы обратного цикла for.

Некоторые языки в стиле C используют foreach для циклического перебора перечислений. В JavaScript это делается с помощью for..in структуры цикла:

var index,
    value;
for (index in obj) {
    value = obj[index];
}

Тут есть загвоздка. for..in будет перебирать каждый из перечислимых членов объекта и членов его прототипа. Чтобы избежать чтения значений, которые наследуются через прототип объекта, просто проверьте, принадлежит ли свойство объекту:

for (i in obj) {
    if (obj.hasOwnProperty(i)) {
        //do stuff
    }
}

Кроме того, ECMAScript 5 добавил _ 6_ к Array.prototype, который можно использовать для перечисления по массиву с помощью обратного вызова (полифилл находится в документации так что вы все еще можете использовать его для старых браузеров):

arr.forEach(function (val, index, theArray) {
    //do stuff
});

Важно отметить, что Array.prototype.forEach не прерывается, когда обратный вызов возвращает false. jQuery и Underscore.js предоставляют свои собственные варианты each для создания циклов, которые можно замкнуть накоротко.

Если вы хотите перебрать массив, используйте стандартный трехэлементный цикл for.

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

Вы можете добиться некоторой оптимизации производительности, кэшируя myArray.length или повторяя его в обратном порядке.

Если вы не против очистить массив:

var x;

while(x = y.pop()){ 

    alert(x); //do something 

}

x будет содержать последнее значение y и будет удалено из массива. Вы также можете использовать shift(), который предоставит и удалит первый элемент из y.

Я знаю, что это старый пост, и уже есть так много отличных ответов. Для большей полноты я решил добавить еще один, используя AngularJS. Конечно, это применимо только в том случае, если вы используете Angular, очевидно, тем не менее, я все равно хотел бы это поставить.

angular.forEach принимает 2 аргумента и необязательный третий аргумент. Первый аргумент - это объект (массив), по которому выполняется итерация, второй аргумент - это функция итератора, а третий необязательный аргумент - это контекст объекта (обычно называемый внутри цикла как «это».

Есть разные способы использования цикла forEach в angular. Самым простым и, вероятно, наиболее используемым является

var temp = [1, 2, 3];
angular.forEach(temp, function(item) {
    //item will be each element in the array
    //do something
});

Другой способ копирования элементов из одного массива в другой -

var temp = [1, 2, 3];
var temp2 = [];
angular.forEach(temp, function(item) {
    this.push(item); //"this" refers to the array passed into the optional third parameter so, in this case, temp2.
}, temp2);

Хотя вам не обязательно этого делать, вы можете просто сделать следующее, что эквивалентно предыдущему примеру:

angular.forEach(temp, function(item) {
    temp2.push(item);
});

Теперь есть плюсы и минусы использования функции angular.forEach в отличие от встроенного ванильного цикла for.

Плюсы

• Легкая читаемость
• Легкая запись
• Если возможно, angular.forEach будет использовать цикл forEach ES5. Теперь я перейду к эффективности в разделе cons, поскольку циклы forEach намного медленнее, чем циклы for. Я упоминаю это как профессионал, потому что хорошо быть последовательным и стандартизированным.

Рассмотрим следующие 2 вложенных цикла, которые делают то же самое. Допустим, у нас есть 2 массива объектов, и каждый объект содержит массив результатов, каждый из которых имеет свойство Value, которое представляет собой строку (или что-то еще). Допустим, нам нужно перебрать каждый из результатов и, если они равны, выполнить какое-то действие:

angular.forEach(obj1.results, function(result1) {
    angular.forEach(obj2.results, function(result2) {
        if (result1.Value === result2.Value) {
            //do something
        }
    });
});

//exact same with a for loop
for (var i = 0; i < obj1.results.length; i++) {
    for (var j = 0; j < obj2.results.length; j++) {
        if (obj1.results[i].Value === obj2.results[j].Value) {
            //do something
        }
    }
}

Конечно, это очень простой гипотетический пример, но я написал тройной встроенный цикл for, используя второй подход, и его было очень трудно читать и писать в этом отношении.

Минусы

• Эффективность. angular.forEach и нативный forEach, если на то пошло, оба намного медленнее, чем обычный цикл for .... about на 90% медленнее. Поэтому для больших наборов данных лучше всего придерживаться собственного цикла for.
• Никаких перерывов, продолжения или возврата поддержки. continue на самом деле поддерживается "аварией", чтобы продолжить angular.forEach простое обращение оператор return; в функции, например angular.forEach(array, function(item) { if (someConditionIsTrue) return; });, который заставит его продолжить выполнение функции для этой итерации. Это также связано с тем, что родной forEach не поддерживает ни break, ни continue.

Я уверен, что есть и другие плюсы и минусы, и, пожалуйста, не стесняйтесь добавлять все, что считаете нужным. Я считаю, что в конечном итоге, если вам нужна эффективность, придерживайтесь только родного цикла for для ваших нужд. Но если ваши наборы данных меньше и от некоторой эффективности можно отказаться в обмен на удобочитаемость и возможность записи, тогда непременно бросьте angular.forEach в этого плохого парня.

Реализация forEach (см. В jsFiddle):

function forEach(list,callback) {
  var length = list.length;
  for (var n = 0; n < length; n++) {
    callback.call(list[n]);
  }
}

var myArray = ['hello','world'];

forEach(
  myArray,
  function(){
    alert(this); // do something
  }
);

Начиная с ECMAScript 6:

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

Где of избегает странностей, связанных с in, и заставляет его работать как цикл for любого другого языка, а let связывает i внутри цикла, а не внутри функции.

Скобки ({}) можно опустить, когда есть только одна команда (например, в примере выше).

Возможно, петля 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
//!!!

Ниже приведены три реализации foreach в jQuery.

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

Теперь простое решение - использовать библиотеку underscore.js. Он предоставляет множество полезных инструментов, таких как each, и автоматически делегирует задание родному forEach, если доступно.

Пример работы CodePen:

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

Смотрите также

• Документация для встроенного Array.prototype.forEach().
• В for_each ... в < / em> (MDN) поясняется, что for each (variable in object) устарел как часть ECMA-357 (EAX ) стандарт.
• for ... of (MDN) описывает следующий способ итерации с использованием for (variable of object) как части предложения Harmony (ECMAScript 6).