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

Как я могу просмотреть все записи в массиве с помощью JavaScript?

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

forEach(instance in theArray)

Где theArray - мой массив, но это кажется неправильным.

+4380
17 февр. '12 в 13:51
источник поделиться
35 ответов
  • 1
  • 2

TL; DR

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

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

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


JavaScript имеет мощную семантику для циклического перемещения по массивам и объектам, похожим на массивы. Я разделил ответ на две части: параметры для подлинных массивов и параметры для объектов, похожих на массивы, таких как объект 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 или что - то falsey)
  • 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 цикла for:

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

let a = ["a", "b", "c"];
for (let index = 0; index < a.length; ++index) {
    let value = a[index];
    console.log(index, value);
}
try {
    console.log(index);
} catch (e) {
    console.error(e);   // "ReferenceError: index is not defined"
}
try {
    console.log(value);
} catch (e) {
    console.error(e);   // "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 => {
        console.log("Index is: " + index);
    });
}

let divs = document.querySelectorAll("div");
for (let index = 0; index < divs.length; ++index) {
    divs[index].addEventListener('click', e => {
        console.log("Index is: " + index);
    });
}
<div>zero</div>
<div>one</div>
<div>two</div>
<div>three</div>
<div>four</div>

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

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

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

Единственные реальные варианты использования for-in в массиве:

  • Это редкие массивы с массивными пробелами в нем, или
  • Вы используете неэлементные свойства и хотите включить их в цикл

Рассматривая только этот первый пример: вы можете использовать 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 checks are
        /^0$|^[1-9]\d*$/.test(key) &&    // explained
        key <= 4294967294                // below
        ) {
        console.log(a[key]);
    }
}

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

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

  2. Что ключом являются все десятичные цифры (например, обычная строковая форма, а не научная запись), и

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

Конечно, вы бы не сделали этого в встроенном коде. Вы бы написали служебную функцию. Может быть:

// Utility function for antiquated environments without 'forEach'
var hasOwn = Object.prototype.hasOwnProperty;
var rexNum = /^0$|^[1-9]\d*$/;
function sparseEach(array, callback, thisArg) {
    var index;
    for (var key in array) {
        index = +key;
        if (hasOwn.call(a, key) &&
            rexNum.test(key) &&
            index <= 4294967294
            ) {
            callback.call(thisArg, array[key], index, array);
        }
    }
}

var a = [];
a[5] = "five";
a[10] = "ten";
a[100000] = "one hundred thousand";
a.b = "bee";

sparseEach(a, function(value, index) {
    console.log("Value at " + index + " is " + value);
});

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

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

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

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

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

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

const a = ["a", "b", "c"];
const it = a.values();
let 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 или Function#apply. (Смотрите Caveat для предоставленных хостом объектов в конце этого ответа, но это редкая проблема.)

    Предположим, вы хотите использовать forEach для свойства Node 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"));
    

    Посмотрите Caveat для предоставленных хостом объектов ниже. В частности, обратите внимание, что это не удастся в IE8 и более ранних версиях, которые не позволяют вам использовать предоставленные хостом объекты, как 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 с Array.prototype предоставляемыми хостом (списки DOM и другие вещи, предоставляемые браузером, а не механизмом JavaScript), вам необходимо обязательно протестировать в своих целевых средах, чтобы убедиться, что хост предоставлен. Объект ведет себя правильно. Большинство ведут себя правильно (сейчас), но это важно проверить. Причина в том, что большинство методов Array.prototype которые вы, вероятно, захотите использовать, полагаются на предоставленный хостом объект, дающий честный ответ на абстрактную [[HasProperty]]. На момент написания статьи браузеры отлично справлялись с этой задачей, но спецификация 5.1 действительно допускала вероятность того, что предоставленный хостом объект может быть не честным. Это в §8.6.2, несколько параграфов ниже большой таблицы в начале этого раздела), где говорится:

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

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

+6700
17 февр. '12 в 13:53
источник

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

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

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

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 -loop также будет перечисляться в устаревшем браузеры, или если дополнительные свойства определены как enumerable.

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

+487
17 февр. '12 в 13:55
источник

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

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

EDIT:

В соответствии с вопросом пользователь хочет код в javascript вместо jquery, поэтому редактирование

var length = yourArray.length;   
for (var i = 0; i < length; i++) {
  // Do something with yourArray[i].
}
+223
17 февр. '12 в 14:01
источник

Цикл назад

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

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.
  • It is печатать и читать меньше, чем некоторые другие доступные варианты. Хотя он проигрывает forEach() и ES6 for ... of.

Недостатки:

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

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

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

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

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

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

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

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

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

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

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

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

Теперь еще лучше использовать для... из!

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

Лично я склонен использовать все, что выглядит проще для чтения, если только производительность или минимизация не стали серьезной проблемой. Поэтому в настоящее время я предпочитаю использовать for..of вместо forEach(), но я всегда буду использовать map или filter или find или some, когда это применимо ,  (Ради своих коллег я редко использую 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]

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

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


Общая

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

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

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

+102
02 мая '14 в 14:21
источник

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

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

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

+77
17 февр. '12 в 14:00
источник

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

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

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

+38
17 февр. '12 в 13:55
источник

Я знаю, что это старый пост, и есть много замечательных ответов. Для немного более полноты я решил, что я бы выбрал другой, используя 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.

Pros

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

Рассмотрим следующие два вложенных цикла, которые делают то же самое. Скажем, что у нас есть 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 на самом деле поддерживается авария", чтобы продолжить в angular.forEach, вы просто положили оператор return; в функцию типа angular.forEach(array, function(item) { if (someConditionIsTrue) return; });, который приведет к тому, что он продолжит работу для этой итерации. Это также связано с тем, что нативный forEach не поддерживает разрыв или продолжается либо.

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

+30
20 июн. '14 в 22:56
источник

Если вы не против опустошения массива:

var x;

while(x = y.pop()){ 

    alert(x); //do something 

}

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

+28
10 мар. '13 в 2:37
источник

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
  }
);
+28
10 апр. '13 в 0:26
источник

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

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

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

См. также

+25
17 июл. '13 в 9:07
источник

В 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
+25
25 дек. '13 в 16:14
источник

Начиная с ECMAScript 6:

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

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

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

+25
26 мая '16 в 16:14
источник

Вероятно, цикл 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
//!!!
+24
02 нояб. '13 в 2:23
источник

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

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

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

var instance;
for (var i=0; i < objects.length; i++) {
    var instance = objects[i];
    ...
}
+19
17 февр. '12 в 13:58
источник

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

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

+18
30 янв. '14 в 15:25
источник

Существует несколько способов перебрать массив в 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: сопоставление, фильтрация и уменьшение.

+17
10 мая '17 в 14:32
источник

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

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

карта - создает новый массив с результатом функции обратного вызова. Этот метод хорошо использовать, когда вам нужно отформатировать элементы вашего массива.

// Let 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

каждые - возвращает значение 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

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

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

// Output: [2,4,6]
+16
09 апр. '17 в 16:51
источник

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

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

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

+14
27 июл. '15 в 7:07
источник

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

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

Плюсы:

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

Минусы:

Это будет прерываться всякий раз, когда ссылка ложна - false (undefined и т.д.). Однако это можно использовать как преимущество. Однако, это сделало бы его немного труднее читать. А также в зависимости от браузера он может быть "не" оптимизирован для работы быстрее оригинального.

+11
28 авг. '15 в 7:27
источник

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
01 апр. '14 в 11:15
источник

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

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

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

Examples 6, 7, и 8 can be used with any functional loops like .map, .filter, .reduce, .sort, .every, .some. For more information about these methods, check out the 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 does not work on Internet Explorer  unless it 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 parentheses
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);
});

+7
09 окт. '18 в 20:19
источник

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

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

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

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

console.log(myArray); // [2, 3, 4]
+6
09 нояб. '17 в 15:31
источник

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

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

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

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

$("#ul>li").each(function(**index, value**){
    console.log("value of the looped element" + value);
    console.log("index of the looped element" + index);
});
+5
11 нояб. '17 в 6:16
источник

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

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');
})

+5
08 мар. '19 в 14:04
источник

Вы можете позвонить forEach так:

let Array = [1,3,2];

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

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

Выход:

1
3
2

Объяснение:

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

Прототип:

Прототипы в JavaScript

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

for (let i=0; i<theArray.length; i++) {
  console.log(i); // i will have the value of each index
}
+4
17 июл. '18 в 12:30
источник

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

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

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

Преобразуйте свой обычный массив в итератор, используя метод 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 по умолчанию не iterable. Используйте для for..in в этом случае, потому что вместо значений он работает с ключами.

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

+3
06 июл. '18 в 7:11
источник

Резюме:

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

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

    Array.prototype.map

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

    Array.prototype.forEach

    for..of loop

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

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

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

+3
08 сент. '18 в 7:55
источник

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

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

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

for(let idx = 0; idx < theArray.length; idx++){
    let element = theArray[idx];
    console.log(element);
}
+2
30 мая '18 в 9:05
источник

// Looping through arrays using the foreach ECMAScript 6 way

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

+2
21 янв. '19 в 13:08
источник

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

theArray.map(instance => do_something);

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

+2
02 февр. '19 в 15:13
источник
  • 1
  • 2

Посмотрите другие вопросы по меткам или Задайте вопрос