Ответ 1

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

Ответ 2

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

• 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.

Ответ 3

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

Ответ 4

Цикл назад

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

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

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

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

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

Лично я склонен использовать все, что выглядит проще для чтения, если только производительность или минимизация не стали серьезной проблемой. Поэтому в настоящее время я предпочитаю использовать 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 для того, чтобы показать мне преимущества и ужасы обратного цикла.

Ответ 5

Некоторые 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, чтобы обеспечить петли, которые могут быть закорочены.

Ответ 6

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

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

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

Ответ 7

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

Ответ 8

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

var x;

while(x = y.pop()){ 

    alert(x); //do something 

}

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

Ответ 9

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

Ответ 10

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

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

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

См. также

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

Ответ 11

В 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

Ответ 12

Начиная с ECMAScript 6:

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

Ответ 13

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

Ответ 14

Для 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];
    ...
}

Ответ 15

Это итератор для нерезкого списка, где индекс начинается с 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 как функции: функция создается вне контекста и должна использоваться только там, где вы уверены в переменном охвате. В противном случае лучше передать функции, где область обзора более интуитивно понятна.

Ответ 16

Существует несколько способов перебрать массив в 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>

Ответ 17

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]

Ответ 18

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

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

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

Ответ 19

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

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

Плюсы:

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

Минусы:

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

Ответ 20

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];

Ответ 21

Использование циклов с 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);
}

Ответ 22

Наиболее близким к вашей идее было бы использование 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]

Ответ 23

Лямбда-синтаксис обычно не работает в 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);
});

Ответ 24

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

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

Ответ 25

Вы можете позвонить 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
}

Ответ 26

Если у вас массивный массив, вы должны использовать 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());

Ответ 27

Резюме:

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

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

Ответ 28

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

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

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

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

Ответ 29

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

Ответ 30

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

theArray.map(instance => do_something);

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