it-swarm.com.ru

Для каждого над массивом в JavaScript?

Как я могу перебрать все записи в массиве, используя JavaScript?

Я думал, что это было что-то вроде этого:

forEach(instance in theArray)

Где theArray - мой массив, но, похоже, это неверно.

4194
Dante1986

TL; DR

  • Не используйте for-in, если вы не используете его с мерами безопасности или, по крайней мере, не знаете, почему он может вас укусить.
  • Ваши лучшие ставки обычно

    • цикл for-of (только ES2015 +),
    • Array#forEach ( spec | MDN ) (или его родственники some и т. д.) (только ES5 +),
    • простой старомодный цикл for,
    • или for-in с защитой.

Но есть много больше, чтобы изучить, читать дальше ...


JavaScript имеет мощную семантику для циклического перемещения по массивам и объектам, похожим на массивы. Я разделил ответ на две части: параметры для подлинных массивов и параметры для элементов, представляющих собой просто массив -like, таких как объект arguments, другие итерируемые объекты (ES2015 +), коллекции DOM и т.д. на.

Я быстро отмечу, что вы можете использовать опции ES2015 сейчас, даже на двигателях ES5, с помощью транспортировка ES2015 для ES5. Искать "ES2015 transpiling"/"ES6 transpiling" для получения дополнительной информации ...

Хорошо, давайте посмотрим на наши варианты:

Для фактических массивов

У вас есть три параметра в ECMAScript 5 ("ES5"), наиболее широко поддерживаемая на данный момент версия, и еще две добавлены в ECMAScript 2015 ("ES2015", "ES6"):

  1. Используйте forEach и связанный (ES5 +)
  2. Используйте простой цикл for
  3. Используйте for-inправильно
  4. Используйте for-of (неявно используйте итератор) (ES2015 +)
  5. Используйте итератор явно (ES2015 +)

Подробности:

1. Используйте forEach и связанные

В любой неопределенно современной среде (например, не в IE8), где у вас есть доступ к функциям Array, добавленным ES5 (напрямую или с использованием полифилов), вы можете использовать forEach ( spec | MDN ):

var a = ["a", "b", "c"];
a.forEach(function(entry) {
    console.log(entry);
});

forEach принимает функцию обратного вызова и, необязательно, значение для использования в качестве this при вызове этого обратного вызова (не использовался выше). Обратный вызов вызывается для каждой записи в массиве, чтобы пропустить несуществующие записи в разреженных массивах. Несмотря на то, что я использовал только один аргумент выше, обратный вызов вызывается с тремя: значением каждой записи, индексом этой записи и ссылкой на массив, по которому вы перебираете (в случае, если ваша функция еще не имеет этого под рукой) ).

Если вы не поддерживаете устаревшие браузеры, такие как IE8 (на долю которого NetApps приходится чуть более 4% рынка на момент написания этой статьи в сентябре 2016 года), вы можете с радостью использовать forEach на универсальной веб-странице без прокладки. Если вам требуется поддержка устаревших браузеров, легко выполнить shimming/polyfilling forEach (найдите «es5 shim» для нескольких вариантов).

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

Если вас беспокоит стоимость выполнения вызова функции для каждой записи массива, не беспокойтесь; подробности .

Кроме того, forEach является функцией «проходить через них все», но ES5 определила несколько других полезных функций «прорабатывать массив и делать вещи», включая:

  • every (прекращает зацикливание в первый раз, когда обратный вызов возвращает false или что-то неверное)
  • some (прекращает цикл в первый раз, когда обратный вызов возвращает true или что-то правдивое)
  • filter (создает новый массив, включающий элементы, в которых функция фильтра возвращает true, и пропускает те, в которых она возвращает false)
  • map (создает новый массив из значений, возвращаемых обратным вызовом)
  • reduce (создает значение путем многократного вызова обратного вызова, передачи предыдущих значений; подробности см. в спецификации; полезно для суммирования содержимого массива и многих других)
  • reduceRight (подобно reduce, но работает в порядке убывания, а не в порядке возрастания)

2. Используйте простой цикл for

Иногда старые способы являются лучшими:

var index;
var a = ["a", "b", "c"];
for (index = 0; index < a.length; ++index) {
    console.log(a[index]);
}

Если длина массива не изменится во время цикла, и он находится в чувствительном к производительности коде (маловероятно), то немного более сложная версия, в которой длина заранее указана, может бытькрошечнаянемного быстрее:

var index, len;
var a = ["a", "b", "c"];
for (index = 0, len = a.length; index < len; ++index) {
    console.log(a[index]);
}

И/или считая в обратном направлении:

var index;
var a = ["a", "b", "c"];
for (index = a.length - 1; index >= 0; --index) {
    console.log(a[index]);
}

Но с современными JavaScript-движками вам редко приходится вытаскивать последний кусок сока.

В ES2015 и выше вы можете сделать ваши переменные индекса и значения локальными для цикла for:

let a = ["a", "b", "c"];
for (let index = 0; index < a.length; ++index) {
    let value = a[index];
}
//console.log(index); // Would cause "ReferenceError: index is not defined"
//console.log(value); // Would cause "ReferenceError: value is not defined"

И когда вы делаете это, для каждой итерации цикла создается не только value, но и index, то есть замыкания, созданные в теле цикла, сохраняют ссылку на indexvalue), созданную для этой конкретной итерации:

let divs = document.querySelectorAll("div");
for (let index = 0; index < divs.length; ++index) {
    divs[index].addEventListener('click', e => {
        alert("Index is: " + index);
    });
}

Если бы у вас было пять делений, вы получили бы «Индекс: 0», если щелкнули по первому, и «Индекс: 4», если щелкнули по последнему. Это не работает, если вы используете var вместо let.

3. Используйте for-inправильно

Вы получите людей, которые скажут вам использовать for-in, но это не то, для чего for-in - . for-in просматривает перечисляемые свойства объекта, а не индексы массива. Заказ не гарантируется , даже в ES2015 (ES6). ES2015 действительно определяет порядок свойств объекта (через [[OwnPropertyKeys]] , [[Enumerate]] и вещи, которые используют их как Object.getOwnPropertyKeys ), но это не определяет, что for-in будет следовать этот порядок. (Подробности в это другой ответ .)

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

// `a` is a sparse array
var key;
var a = [];
a[0] = "a";
a[10] = "b";
a[10000] = "c";
for (key in a) {
    if (a.hasOwnProperty(key)  &&        // These are explained
        /^0$|^[1-9]\d*$/.test(key) &&    // and then hidden
        key <= 4294967294                // away below
        ) {
        console.log(a[key]);
    }
}

Обратите внимание на две проверки:

  1. Что объект имеет свое свойство own с этим именем (не то, которое он наследует от своего прототипа), и

  2. Что ключ является числовой строкой из 10 в ее обычной строковой форме, и его значение равно <= 2 ^ 32 - 2 (что составляет 4 294 967 294). Откуда этот номер? Это часть определения индекса массива в спецификации . Другие числа (нецелые числа, отрицательные числа, числа больше 2 ^ 32 - 2) не являются индексами массива. Причина, по которой это 2 ^ 32 - 2 , заключается в том, что наибольшее значение индекса становится на единицу меньше, чем 2 ^ 32 - 1 , что является максимальным значением, которое может иметь массив length. (Например, длина массива соответствует 32-разрядному целому числу без знака.) (Попросите RobG указать на комментарий в моем сообщении в блоге что мой предыдущий тест был не совсем правильным.)

Это незначительная часть дополнительных затрат на каждую итерацию цикла в большинстве массивов, но если у вас есть массив sparse, это может быть более эффективным способом зацикливания, поскольку он выполняет циклы только для реально существующих записей. Например, для приведенного выше массива мы зацикливаемся всего три раза (для ключей "0", "10" и "10000" - помните, что они являются строками), а не 10,001 раз.

Теперь вам не захочется писать это каждый раз, поэтому вы можете поместить это в свой инструментарий:

function arrayHasOwnIndex(array, prop) {
    return array.hasOwnProperty(prop) && /^0$|^[1-9]\d*$/.test(prop) && prop <= 4294967294; // 2^32 - 2
}

И тогда мы будем использовать это так:

for (key in a) {
    if (arrayHasOwnIndex(a, key)) {
        console.log(a[key]);
    }
}

Или, если вы заинтересованы в тесте «достаточно хорошо для большинства случаев», вы можете использовать его, но пока он близок, он не совсем корректен:

for (key in a) {
    // "Good enough" for most cases
    if (String(parseInt(key, 10)) === key && a.hasOwnProperty(key)) {
        console.log(a[key]);
    }
}

4. Используйте for-of (неявно используйте итератор) (ES2015 +)

ES2015 добавляет итераторы в JavaScript. Самый простой способ использовать итераторы - это новый оператор for-of. Это выглядит так:

var val;
var a = ["a", "b", "c"];
for (val of a) {
    console.log(val);
}

Результат:

 А 
 Б 
 C 

Под прикрытием он получает iterator из массива и проходит по нему, получая из него значения. В этом нет проблемы, связанной с использованием for-in, поскольку он использует итератор, определенный объектом (массивом), а массивы определяют, что их итераторы выполняют итерацию через свои записи (а не их свойства). В отличие от for-in в ES5, порядок посещения записей является порядком номеров их индексов.

5. Используйте итератор явно (ES2015 +)

Иногда вам может понадобиться использовать итератор явно. Вы можете сделать это тоже, хотя это намного более грубое, чем for-of. Это выглядит так:

var a = ["a", "b", "c"];
var it = a.values();
var entry;
while (!(entry = it.next()).done) {
    console.log(entry.value);
}

Итератор - это объект, соответствующий определению Итератора в спецификации. Его метод next возвращает новый объект результата каждый раз, когда вы вызываете его. У результирующего объекта есть свойство done, сообщающее нам, сделано ли оно, и свойство value со значением для этой итерации. (done является необязательным, если он будет false, value является необязательным, если он будет undefined.)

Значение value варьируется в зависимости от итератора; Массивы поддерживают (как минимум) три функции, которые возвращают итераторы:

  • values(): это та, которую я использовал выше. Он возвращает итератор, где каждая value является записью массива для этой итерации ("a", "b" и "c" в предыдущем примере).
  • keys(): возвращает итератор, где каждая value является ключом для этой итерации (так для нашей a выше, это будет "0", затем "1", затем "2").
  • entries(): возвращает итератор, где каждый value является массивом в форме [key, value] для этой итерации.

Для массивоподобных объектов

Помимо истинных массивов, существуют также объекты подобные массиву, которые имеют свойство length и свойства с числовыми именами: экземпляры NodeList, объект arguments и т.д. Как мы перебираем их содержимое?

Используйте любой из параметров выше для массивов

По крайней мере, некоторые, и, возможно, большинство или даже все вышеописанные подходы к массивам часто одинаково хорошо применимы к объектам, подобным массивам:

  1. Использовать forEach и связанные с ним (ES5 +)

    Различные функции в Array.prototype являются «преднамеренно общими» и обычно могут использоваться в объектах, подобных массивам, через Function#call или Function#apply . (См. Предостережение для предоставленных хостом объектов в конце этого ответа, но это редкая проблема.)

    Предположим, вы хотите использовать forEach для свойства Node's childNodes. Вы бы сделали это:

    Array.prototype.forEach.call(node.childNodes, function(child) {
        // Do something with `child`
    });
    

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

    // (This is all presumably in some scoping function)
    var forEach = Array.prototype.forEach;
    
    // Then later...
    forEach.call(node.childNodes, function(child) {
        // Do something with `child`
    });
    
  2. Использовать простой цикл for

    Очевидно, простой цикл for применяется к объектам, подобным массиву.

  3. Используйте for-inправильно

    for-in с теми же мерами защиты, что и с массивом, должен работать и с массивоподобными объектами; может применяться предостережение для объектов, предоставленных хостом, на # 1 выше.

  4. Использовать for-of (неявно использовать итератор) (ES2015 +)

    for-of будет использовать итератор, предоставленный объектом (если есть); мы должны увидеть, как это работает с различными объектами, похожими на массивы, особенно с хост-объектами. Например, спецификация для NodeList из querySelectorAll была обновлена ​​для поддержки итерации. Спецификации для HTMLCollection от getElementsByTagName не было.

  5. Использовать итератор явно (ES2015 +)

    Смотрите # 4, мы должны увидеть, как разыгрываются итераторы.

Создать истинный массив

В других случаях вы можете захотеть преобразовать подобный массиву объект в истинный массив. Делать это на удивление легко:

  1. Используйте slice метод массивов

    Мы можем использовать метод массивов slice, который, как и другие методы, упомянутые выше, является «преднамеренно общим» и может использоваться с объектами, похожими на массивы, например:

    var trueArray = Array.prototype.slice.call(arrayLikeObject);
    

    Так, например, если мы хотим преобразовать NodeList в истинный массив, мы можем сделать это:

    var divs = Array.prototype.slice.call(document.querySelectorAll("div"));
    

    См. Предостережение для объектов, предоставляемых хостом ниже. В частности, обратите внимание, что это не удастся в IE8 и более ранних версиях, которые не позволяют вам использовать предоставленные Host объекты как this как этот.

  2. Использовать Синтаксис распространения (...)

    Также возможно использовать распространенный синтаксис ES2015 с движками JavaScript, которые поддерживают эту функцию:

    var trueArray = [...iterableObject];
    

    Так, например, если мы хотим преобразовать NodeList в истинный массив, с распространенным синтаксисом это становится довольно кратким:

    var divs = [...document.querySelectorAll("div")];
    
  3. Используйте Array.from(spec) | (MDN)

    Array.from (ES2015 +, но легко заполняемый) создает массив из массива-подобного объекта, опционально сначала пропуская записи через функцию отображения. Так:

    var divs = Array.from(document.querySelectorAll("div"));
    

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

    // Arrow function (ES2015):
    var divs = Array.from(document.querySelectorAll(".some-class"), element => element.tagName);
    
    // Standard function (since `Array.from` can be shimmed):
    var divs = Array.from(document.querySelectorAll(".some-class"), function(element) {
        return element.tagName;
    });
    

Предостережение для объектов, предоставляемых хостом

Если вы используете функции Array.prototype с предоставляемыми хостом объектами, похожими на массивы (списки DOM и другие вещи, предоставляемые браузером, а не механизмом JavaScript), необходимо убедиться, что вы тестировали в своих целевых средах, чтобы убедиться, что Хост-объект ведет себя правильно. Большинство ведут себя правильно (сейчас), но это важно проверить. Причина в том, что большинство методов Array.prototype, которые вы, вероятно, захотите использовать, полагаются на предоставленный Host объект, дающий честный ответ на абстрактную операцию [[HasProperty]] . На момент написания статьи браузеры очень хорошо справлялись с этой задачей, но спецификация 5.1 действительно допускала возможность, что объект, предоставленный хостом, может быть не честным. Он находится в §8.6.2 , несколько абзацев ниже большой таблицы в начале этого раздела), где написано:

Хост-объекты могут реализовывать эти внутренние методы любым способом, если не указано иное; например, одна возможность состоит в том, что [[Get]] и [[Put]] для конкретного объекта Host действительно выбирают и сохраняют значения свойств, но [[HasProperty]] всегда генерирует false .

(Я не смог найти эквивалентного словоблудия в спецификации ES2015, но он все равно будет иметь место.) Опять же, на момент написания этой статьи общие современные объекты, подобные массиву, в современных браузерах [например, NodeList экземпляры] do обрабатывать [[HasProperty]] правильно, но важно проверить.)

6345
T.J. Crowder

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

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

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

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

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

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

473
PatrikAkerstrand

Если вы используете библиотеку 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].
}
214
Poonam

Петля назад

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

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

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

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

Недостатки:

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

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

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

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

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

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

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

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

В целом, для кода более высокого уровня, где ясность и безопасность более важны, я бы рекомендовал использовать Array::forEach в качестве шаблона по умолчанию:

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

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

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


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

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

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

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

  • Как это может начаться с array.length без взрыва?

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

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

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

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

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

    [5, 5, 4]

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

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


Пустяки

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

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

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

94
joeytwiddle

Некоторые языки в стиле 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 добавил в метод Array.prototype метод forEach , который можно использовать для перечисления по массиву с помощью функции обратного вызова (полифилл находится в документации, поэтому его можно использовать для старых браузеров):

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

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

75
zzzzBov

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

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

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

34
Quentin

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

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

Существуют разные способы использования цикла 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 будет использовать цикл ES5 forEach. Теперь я доберусь до эффективности в разделе «против», поскольку циклы 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
        }
    }
}

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

Минусы

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

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

28
user2359695

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

var x;

while(x = y.pop()){ 

    alert(x); //do something 

}

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

27
gaby de wilde

A 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
  }
);
27
nmoliveira

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

Пример CodePen о том, как это работает:

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

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

24
Micka

Существует три реализации 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
24
Rajesh Paul

Вероятно, цикл 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
//!!!
22
Federico Piragua

Начиная с ES6:

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

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

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

21
Zaz

Это итератор для не разреженного списка, где индекс начинается с 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-тегов заменены на зеленые.

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

17
Tim

В нативном JavaScript нет цикла for each. Вы можете использовать библиотеки, чтобы получить эту функциональность (я рекомендую Underscore.js ), используйте простой цикл for.

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

Однако обратите внимание, что могут быть причины использовать еще более простой цикл for (см. Вопрос переполнения стекаПочему использование «for… in» с итерацией массива является плохой идеей?)

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

Есть несколько способов для обхода массива в JavaScript, как показано ниже:

для - это самый распространенный. Полный блок кода для зацикливания

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: отображение, фильтрация и уменьшение.

16
Alireza

ECMAScript5 (версия на Javascript) для работы с массивами.

forEach - Перебирает каждый элемент в массиве и делает все, что вам нужно, с каждым элементом.

['C', 'D', 'E'].forEach(function(element, index) {
  console.log(element + " is the #" + (index+1) + " in 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']

уменьшить - Как следует из названия, он сводит массив к одному значению, вызывая данную функцию, передавая элемент тока и результат предыдущего выполнения.

[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 - Очень похоже на все, за исключением того, что filter возвращает массив с элементами, которые возвращают true данной функции.

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

// Output: [2,4,6]

Надеюсь, это будет полезно.

14
Anil Kumar Arya

Нет встроенной возможности взломать forEach. Чтобы прервать выполнение, используйте Array#some, как показано ниже:

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

Это работает, потому что some возвращает true, как только любой из обратных вызовов, выполненных в порядке массива, возвращает true, замыкая выполнение остальных. Оригинальный ответ См. Прототип массива для некоторые

14
Priyanshu Chauhan

Я также хотел бы добавить это как композицию обратного цикла и ответ выше для кого-то, кто также хотел бы этот синтаксис.

var foo = [object,object,object];
for (var i = foo.length, item; item = foo[--i];) {
    console.log(item);
}

Плюсы:

Преимущество для этого: у вас есть ссылка уже в первом, как, что не нужно будет объявлять позже с другой строкой. Это удобно при цикле через массив объектов.

Минусы:

Это будет прерываться всякий раз, когда ссылка неверна - Falsey (неопределенный и т.д.). Это может быть использовано как преимущество, хотя. Тем не менее, это будет немного сложнее для чтения. А также, в зависимости от браузера, его можно «не» оптимизировать, чтобы он работал быстрее оригинального.

11
Volkan Seçkin Akbayır

способ jQuery с использованием $.map:

var data = [1, 2, 3, 4, 5, 6, 7];

var newData = $.map(data, function(element) {
    if (element % 2 == 0) {
        return element;
    }
});

// newData = [2, 4, 6];
10
DanFromGermany

Наиболее близким к вашей идее было бы использование Array.forEach(), которая принимает функцию clojure, которая будет выполняться для каждого элемента массива.

myArray.forEach(
  (item) => {
    // do something 
    console.log(item);
  }
);

Другим жизнеспособным способом было бы использовать Array.map(), который работает таким же образом, но также mutates каждый элемент и возвращает его следующим образом:

var myArray = [1, 2, 3];
myArray = myArray.map(
  (item) => {
    return item + 1;
  }
);

console.log(myArray); // [2, 3, 4]
6
Ante Jablan Adamović

Использование циклов с ES6 деструктуризация и оператор распространения

Разрушение и использование оператора распространения оказались весьма полезными для новичков в ES6 как более удобочитаемые/эстетичные, хотя некоторые ветераны javascript могут посчитать это грязным, юниоры или некоторые другие люди могут найти его полезным.

В следующих примерах будет использоваться метод for...of и .forEach .

Примеры 6, 7 и 8 могут использоваться с любыми функциональными циклами, такими как .map, .filter, .reduce, .sort, .every, .some, для получения дополнительной информации об этих методах проверьте Array Object .

Пример 1: Обычный цикл for...of - здесь нет хитростей.

let arrSimple = ['a', 'b', 'c'];

for (let letter of arrSimple) {
  console.log(letter);
}

Пример 2: Разделить слова на символы

let arrFruits = ['Apple', 'orange', 'banana'];

for (let [firstLetter, ...restOfTheWord] of arrFruits) {
  // Create a shallow copy using the spread operator
  let [lastLetter] = [...restOfTheWord].reverse();
  console.log(firstLetter, lastLetter, restOfTheWord);

}

Пример 3: Циклы с key и value 

// let arrSimple = ['a', 'b', 'c'];

// Instead of keeping an index in `i` as per example `for(let i = 0 ; i<arrSimple.length;i++)`
// this example will use a multi-dimensional array of the following format type: 
// `arrWithIndex: [number, string][]`

let arrWithIndex = [
  [0, 'a'],
  [1, 'b'],
  [2, 'c'],
];

// Same thing can be achieved using `.map` method
// let arrWithIndex = arrSimple.map((i, idx) => [idx, i]);

// Same thing can be achieved using `Object.entries`
// NOTE: `Object.entries` method doesn't work on internet Explorer unless it's polyfilled
// let arrWithIndex = Object.entries(arrSimple);

for (let [key, value] of arrWithIndex) {
  console.log(key, value);
}

Пример 4: Получить свойства объекта встроенными

let arrWithObjects = [{
    name: 'Jon',
    age: 32
  },
  {
    name: 'Elise',
    age: 33
  }
];

for (let { name, age: aliasForAge } of arrWithObjects) {
  console.log(name, aliasForAge);
}

Пример 5: Получить глубокие свойства объекта того, что вам нужно

let arrWithObjectsWithArr = [{
    name: 'Jon',
    age: 32,
    tags: ['driver', 'chef', 'jogger']
  },
  {
    name: 'Elise',
    age: 33,
    tags: ['best chef', 'singer', 'dancer']
  }
];

for (let { name, tags: [firstItemFromTags, ...restOfTags] } of arrWithObjectsWithArr) {
  console.log(name, firstItemFromTags, restOfTags);
}

Пример 6: Is Пример 3 используется с .forEach

let arrWithIndex = [
  [0, 'a'],
  [1, 'b'],
  [2, 'c'],
];

// Not to be confused here, `forEachIndex` is the real index
// `mappedIndex` was created by "another user", so you can't really trust it

arrWithIndex.forEach(([mappedIndex, item], forEachIndex) => {
  console.log(forEachIndex, mappedIndex, item);
});

Пример 7: Is Пример 4 используется с .forEach

let arrWithObjects = [{
    name: 'Jon',
    age: 32
  },
  {
    name: 'Elise',
    age: 33
  }
];
// NOTE: Destructuring objects while using shorthand functions 
// are required to be surrounded by parenthesis
arrWithObjects.forEach( ({ name, age: aliasForAge }) => {
  console.log(name, aliasForAge)
});

Пример 8: Is Пример 5 используется с .forEach

let arrWithObjectsWithArr = [{
    name: 'Jon',
    age: 32,
    tags: ['driver', 'chef', 'jogger']
  },
  {
    name: 'Elise',
    age: 33,
    tags: ['best chef', 'singer', 'dancer']
  }
];

arrWithObjectsWithArr.forEach(({
  name,
  tags: [firstItemFromTags, ...restOfTags]
}) => {
  console.log(name, firstItemFromTags, restOfTags);
});

6
darklightcode

Лямбда-синтаксис обычно не работает в IE 10 или ниже.

Я обычно использую

[].forEach.call(arrayName,function(value,index){
    console.log("value of the looped element" + value);
    console.log("index of the looped element" + index);
});


If you are a jQuery Fan and already have a jQuery file running, you should reverse the positions of the index and value parameters

$("#ul>li").each(function(**index,value**){
    console.log("value of the looped element" + value);
    console.log("index of the looped element" + index);
});
5
Murtuza Husain

Вы можете позвонить для каждого как:

let Array = [1,3,2];

theArray.forEach((element)=>{ 
  // use the element of the array
  console.log(element) 
}

элемент будет иметь значение каждого индекса от 0 до длины массива.

Результат:

1    
3    
2

Explaination:

forEach находится в классе прототипов. Вы также можете вызвать это как theArray.prototype.forEach (...);

прототип: https://hackernoon.com/prototypes-in-javascript-5bba2990e04b

Вы также можете изменить массив следующим образом:

for(let i=0;i<theArray.length;i++){
  console.log(i); //i will have the value of each index
}
4
Nouman Dilshad

если вы хотите перебрать массив объектов с помощью функции стрелки:

let arr=[{name:'john',age:50},{name:'clark',age:19},{name:'mohan',age:26}];

arr.forEach((person)=>{
  console.log('i am '+person.name+' and i am '+person.age+ ' old');
})
3
subhashish negi

Резюме:

При переборе массива мы часто хотим достичь одной из следующих целей:

  1. Мы хотим перебрать массив и создать новый массив:

    Array.prototype.map 

  2. Мы хотим перебрать массив и не создавать новый массив:

    Array.prototype.forEach 

    for..of цикл

В JS есть много способов достижения обеих этих целей. Однако некоторые из них более удобны, чем другие. Ниже вы можете найти некоторые часто используемые методы (наиболее удобный imo) для выполнения итерации массива в javascript.

Создание нового массива: Map

map() - это функция, расположенная в Array.prototype, которая может преобразовывать каждый элемент массива, а затем возвращает new array. map() принимает в качестве аргумента функцию обратного вызова и работает следующим образом:

let arr = [1, 2, 3, 4, 5];

let newArr = arr.map((element, index, array) => {
  return element * 2;
})

console.log(arr);
console.log(newArr);

Обратный вызов, который мы передали в map() в качестве аргумента, выполняется для каждого элемента. Затем возвращается массив, который имеет ту же длину, что и исходный массив. В этом новом элементе массива преобразовывается функция обратного вызова, переданная в качестве аргумента функции map().

Различия между map и другим механизмом цикла, таким как forEach и циклом for..of, заключаются в том, чтоmap возвращается как новый массив и оставляет старый массив без изменений (за исключением случаев, когда вы явно управляете им с помощью мыслящих слов, как splice). 

Также обратите внимание, что обратный вызов функции map предоставляет в качестве второго аргумента порядковый номер текущей итерации. Кроме того, третий аргумент предоставляет массив, для которого был вызван map. Иногда эти свойства могут быть очень полезны.

Цикл с использованием forEach

forEach - это функция, расположенная в Array.prototype, которая принимает функцию обратного вызова в качестве аргумента. Затем он выполняет эту функцию обратного вызова для каждого элемента в массиве. В отличие от функции map() функция forEach ничего не возвращает (undefined). Например:

let arr = [1, 2, 3, 4, 5];

arr.forEach((element, index, array) => {

  console.log(element * 2);

  if (index === 4) {
    console.log(array)
  }
  // index, and oldArray are provided as 2nd and 3th argument by the callback

})

console.log(arr);

Как и функция map, обратный вызов forEach предоставляет в качестве второго аргумента порядковый номер текущей итерации. Также третий аргумент предоставляет массив, для которого был вызван forEach

Проходить по элементам с помощью for..of

Цикл for..of проходит через каждый элемент массива (или любой другой итерируемый объект). Это работает следующим образом:

let arr = [1, 2, 3, 4, 5];

for(let element of arr) {
  console.log(element * 2);
}

В приведенном выше примере element обозначает элемент массива, а arr - массив, который мы хотим зациклить. Не то чтобы имя element было произвольным, и мы могли бы выбрать любое другое имя, например «el», или что-то более декларативное, когда это применимо. 

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

let arr = [1, 2, 3, 4, 5];

arr.foo = 'foo';

for(let element of arr) {
  console.log(element);
}

for(let element in arr) {
  console.log(element);
}

2
Willem van der Veen

Если у вас есть массивный массив, вы должны использовать iterators , чтобы получить некоторую эффективность. Итераторы являются свойством определенных коллекций JavaScript (например, Map , Set , String , Array ). Четный, for..of используетiteratorпод капотом.

Итераторы повышают эффективность, позволяя вам использовать элементы списка по одному, как если бы они были потоком. Что делает итератор особенным, так это то, как он пересекает коллекцию. Другие циклы должны загружать всю коллекцию заранее, чтобы выполнить итерацию по ней, тогда как итератору нужно знать только текущую позицию в коллекции. 

Вы получаете доступ к текущему элементу, вызывая метод next итератора. Следующий метод вернетvalueтекущего элемента и aboolean, чтобы указать, когда вы достигли конца коллекции. Ниже приведен пример создания итератора из массива. 

Преобразуйте ваш обычный массив в итератор, используя values() метод так: 

    const myArr = [2,3,4]

let it = myArr.values();

console.log(it.next());
console.log(it.next());
console.log(it.next());
console.log(it.next());

Вы также можете преобразовать свой обычный массив в итератор, используя Symbol.iterator вот так: 

const myArr = [2,3,4]

let it = myArr[Symbol.iterator]();

console.log(it.next());
console.log(it.next());
console.log(it.next());
console.log(it.next());

Вы также можете преобразовать свой обычный array в iterator вот так: 

let myArr = [8, 10, 12];

function makeIterator(array) {
    var nextIndex = 0;
    
    return {
       next: function() {
           return nextIndex < array.length ?
               {value: array[nextIndex++], done: false} :
               {done: true};
       }
    };
};

var it = makeIterator(myArr);

console.log(it.next().value);   // {value: 8, done: false}
console.log(it.next().value);   // {value: 10, done: false}
console.log(it.next().value);   // {value: 12, done: false}
console.log(it.next().value);   // {value: undefined, done: true}

ПРИМЕЧАНИЕ

  • Итераторы носят исчерпывающий характер. 
  • Объекты не являются iterable по умолчанию. Используйте for..in в этом случае, потому что вместо значений он работает с ключами.

Вы можете прочитать больше о iteration protocolздесь

1
BlackBeard
var a = ["car", "bus", "truck"]
a.forEach(function(item, index) {
    console.log("Index" + index);
    console.log("Element" + item);
})
1
John

// Looping through arrays using foreach  ES6 way

var data = new Array(1,2,3,4,5);
data.forEach((val,index) => {
    console.log("index :",index); // index
	console.log("value :", val); // value
});

0
arul prince

Вы можете использовать API forEach () (предоставляемый Javascript), который принимает функцию в качестве обратного вызова и запускается один раз для каждого элемента, присутствующего в массиве.

https://fullstackgeek.blogspot.com/2019/01/arrays-in-javascript-part-2.html

0
Ayush Jain

Я пришел с питона, и я нашел этот путь намного яснее.
theArray - массив, экземпляр - элемент массива.

for(let instance of theArray)
{
    console.log("The instance",instance);
}

или же

for( instance in theArray)
{
  console.log("The instance",instance);
}

сравнить с:

theArray.forEach(function(instance) {
    console.log(instance);
});

но в конце дня оба делают одно и то же

0
Peko Chan

Если вы хотите сохранить функциональность своего кода, используйте map:

theArray.map(instance => do_something);

Таким образом, вы создадите новый массив для будущей работы и пропустите любой нежелательный побочный эффект.

0
alejoko

Если вы хотите использовать forEach(), это будет выглядеть так - 

theArray.forEach ( element => {
    console.log(element);
});

Если вы хотите использовать for(), это будет выглядеть так - 

for(let idx = 0; idx < theArray.length; idx++){
    let element = theArray[idx];
    console.log(element);
}
0
Harunur Rashid