Я пытаюсь перебрать массив. У меня есть следующий код:

 var currnt_image_list= '21,32,234,223';
 var substr = currnt_image_list.split(','); // array here

Я пытаюсь получить все данные из массива. Кто-нибудь может привести меня на правильный путь, пожалуйста?

(Обновление: в моем другом ответе здесь изложены параметры, не относящиеся к jQuery, гораздо более подробно. Третий вариант, приведенный ниже, jQuery.eachне включен в него.)

Четыре варианта:

Общий цикл:

var i;
for (i = 0; i < substr.length; ++i) {
    // do something with `substr[i]`
}

или в ES2015 +:

for (let i = 0; i < substr.length; ++i) {
    // do something with `substr[i]`
}

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

ES5 forEach:

Начиная с ECMAScript5, у массивов есть forEachфункция, которая упрощает цикл по массиву:

substr.forEach(function(item) {
    // do something with `item`
});

Ссылка на документы

(Примечание. Существует множество других функций, а не только forEach; подробности см. В ответе, указанном выше ).

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

Недостатки : если вы используете thisв содержащем коде и хотите использовать его thisв forEachобратном вызове, вы должны либо: A) вставить его в переменную, чтобы вы могли использовать его в функции, B) передать его в качестве второго аргумента, forEachчтобы forEachустанавливает его как thisво время обратного вызова, или C) Используйте функцию стрелки ES2015 + , которая закрывается this. Если вы не сделаете одну из этих вещей, в обратном вызове thisбудет undefined(в строгом режиме) или глобальный объект ( window) в свободном режиме. Раньше был второй недостаток, который forEachне был универсально поддержан, но здесь, в 2018 году, единственный браузер, с которым вы столкнетесь, не имеет forEachIE8 (и он не может быть должным образом там тоже заполнены).

ES2015 + for-of:

for (const s of substr) { // Or `let` if you want to modify it in the loop body
    // do something with `s`
}

См. Ответ в верхней части этого ответа, чтобы узнать, как это работает.

Преимущества : Простой, простой, предлагает переменную автономной области (или константу, как указано выше) для записи из массива.

Недостатки : не поддерживается ни в одной версии IE.

jQuery.each:

jQuery.each(substr, function(index, item) {
    // do something with `item` (or `this` is also `item` if you like)
});

( Ссылка на документы )

Преимущества : все те же преимущества, что forEachи плюс, вы знаете, что он есть, поскольку вы используете jQuery.

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

Вы можете избежать этого this, используя $.proxy:

jQuery.each(substr, $.proxy(function(index, item) {
    // do something with `item` (`this` is the same as it was outside)
}, this));

... или Function#bind:

jQuery.each(substr, function(index, item) {
    // do something with `item` (`this` is the same as it was outside)
}.bind(this));

... или в ES2015 ("ES6") функция стрелки:

jQuery.each(substr, (index, item) => {
    // do something with `item` (`this` is the same as it was outside)
});

Что НЕ нужно делать:

Не используйте for..inдля этого (или, если вы делаете, сделайте это с надлежащими мерами предосторожности). Вы увидите, что люди говорят (на самом деле, кратко, здесь был ответ, говорящий об этом), но for..inне делает то, что думают многие люди (это делает что-то еще более полезное!). В частности, for..inпроходит через перечисляемые имена свойств объекта (не индексы массива). Поскольку массивы являются объектами, а их единственными перечислимыми свойствами по умолчанию являются индексы, в основном это похоже на работу в обычном развертывании. Но это не безопасное предположение, что вы можете просто использовать его для этого. Вот исследование: http://jsbin.com/exohi/3

Я должен смягчить «не» выше. Если вы имеете дело с разреженными массивами (например, в массиве всего 15 элементов, но их индексы по какой-то причине разбросаны по диапазону от 0 до 150 000, и поэтому lengthэто 150 001), и если вы используете соответствующие защитные меры, такие как hasOwnPropertyи проверка имя свойства действительно числовое (см. ссылку выше), for..inможет быть вполне разумным способом избежать множества ненужных циклов, так как будут перечислены только заполненные индексы.

jQuery.each ()

jQuery.each ()

jQuery.each(array, callback)

итерация массива

jQuery.each(array, function(Integer index, Object value){});

итерация объекта

jQuery.each(object, function(string propertyName, object propertyValue){});

пример :

var substr = [1, 2, 3, 4];
$.each(substr , function(index, val) { 
  console.log(index, val)
});

var myObj = { firstName: "skyfoot"};
$.each(myObj, function(propName, propVal) {
  console.log(propName, propVal);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

циклы JavaScript для массива

для цикла

for (initialExpression; condition; incrementExpression)
  statement

пример

var substr = [1, 2, 3, 4];

//loop from 0 index to max index
for(var i = 0; i < substr.length; i++) {
  console.log("loop", substr[i])
}

//reverse loop
for(var i = substr.length-1; i >= 0; i--) {
  console.log("reverse", substr[i])
}

//step loop
for(var i = 0; i < substr.length; i+=2) {
  console.log("step", substr[i])
}

для в

//dont really wnt to use this on arrays, use it on objects
for(var i in substr) {
    console.log(substr[i]) //note i returns index
}

для из

for(var i of subs) {
    //can use break;
    console.log(i); //note i returns value
}

для каждого

substr.forEach(function(v, i, a){
    //cannot use break;
    console.log(v, i, a);
})

Ресурсы

Циклы MDN и итераторы

Здесь нет необходимости в jquery, просто работает forцикл:

var substr = currnt_image_list.split(',');
for(var i=0; i< substr.length; i++) {
  alert(substr[i]);
}

Вариант 1: традиционная forпетля

Основы

Традиционный for-loop имеет три компонента:

1. инициализация: выполняется перед первым выполнением блока просмотра
2. условие: проверяет условие каждый раз перед выполнением блока цикла и выходит из цикла, если ложно
3. запоздалая мысль: выполняется каждый раз после выполнения цикла цикла

Эти три компонента отделены друг от друга ;символом. Содержимое для каждого из этих трех компонентов является необязательным, что означает, что следующее является самым минимальным forвозможным циклом:

for (;;) {
    // Do stuff
}

Конечно, вам нужно будет включить if(condition === true) { break; } или if(condition === true) { return; }где-то внутри этого for-loop, чтобы заставить его перестать работать.

Обычно, однако, инициализация используется для объявления индекса, условие используется для сравнения этого индекса с минимальным или максимальным значением, а запоздалая мысль используется для увеличения индекса:

for (var i = 0, length = 10; i < length; i++) {
    console.log(i);
}

Использование tradtional for-loop для обхода массива

Традиционный способ перебрать массив, это:

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

Или, если вы предпочитаете цикл в обратном направлении, вы делаете это:

for (var i = myArray.length - 1; i > -1; i--) {
    console.log(myArray[i]);
}

Однако возможны многие варианты, например, например. вот этот :

for (var key = 0, value = myArray[key], var length = myArray.length; key < length; value = myArray[++key]) {
    console.log(value);
}

... или этот ...

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

... или этот:

var key = 0, value;
for (; value = myArray[key++];){ 
    console.log(value);
}

То, что работает лучше всего, в значительной степени зависит как от личного вкуса, так и от конкретного варианта использования, который вы реализуете.

Каждый из этих вариантов поддерживается всеми браузерами, включая самые старые!

Вариант 2: while-петл

Одной альтернативой for-loop является while-loop. Чтобы перебрать массив, вы можете сделать это:

var key = 0;
while(value = myArray[key++]){
    console.log(value);
}

Как и традиционные for-loops, while-loops поддерживаются даже в самых старых браузерах.

Кроме того, каждый цикл while может быть переписан как for-loop. Например, while-loop здесь ведет себя точно так же, как этот for-loop:

for(var key = 0;value = myArray[key++];){
    console.log(value);
}

Вариант 3: for...inиfor...of

В JavaScript вы также можете сделать это:

for (i in myArray) {
    console.log(myArray[i]);
}

Однако это следует использовать с осторожностью, поскольку forво всех случаях он ведет себя не так, как традиционная петля, и существуют потенциальные побочные эффекты, которые необходимо учитывать. См. Почему использование «for ... in» с итерацией массива - плохая идея? Больше подробностей.

Как альтернатива for...in, теперь есть и для for...of. В следующем примере показана разница между for...ofциклом и for...inциклом:

var myArray = [3, 5, 7];
myArray.foo = "hello";

for (var i in myArray) {
  console.log(i); // logs 0, 1, 2, "foo"
}

for (var i of myArray) {
  console.log(i); // logs 3, 5, 7
}

Вы также должны учитывать, что ни одна версия Internet Explorer не поддерживает for...of( Edge 12+ ) и for...inтребует как минимум IE10.

Вариант 4: Array.prototype.forEach()

Альтернативой For-loops является Array.prototype.forEach()следующий синтаксис:

myArray.forEach(function(value, key, myArray) {
    console.log(value);
});

Array.prototype.forEach() поддерживается всеми современными браузерами, а также IE9 +.

Вариант 5: jQuery.each()

В дополнение к четырем другим упомянутым опциям, у jQuery также была своя foreachвариация.

Он использует следующий синтаксис:

$.each(myArray, function(key, value) {
    console.log(value);
});

Используйте each()функцию jQuery.

Вот пример:

$.each(currnt_image_list.split(','), function(index, value) { 
  alert(index + ': ' + value); 
});

Используйте jQuery each(). Есть и другие способы, но каждый предназначен для этой цели.

$.each(substr, function(index, value) { 
  alert(value); 
});

И не ставьте запятую после последнего номера.

Синтаксис ES6 с функцией стрелки и интерполяцией:

var data=["a","b","c"];
$(data).each((index, element) => {
        console.log(`current index : ${index} element : ${element}`)
    });

Вы можете использовать for()цикл:

var things = currnt_image_list.split(','); 
for(var i = 0; i < things.length; i++) {
    //Do things with things[i]
}

Попробуй это:

$.grep(array, function(element) {

})

Альтернативные способы итерации по массиву / строке с побочными эффектами

var str = '21,32,234,223';
var substr = str.split(',');

substr.reduce((a,x)=> console.log('reduce',x), 0)        // return undefined

substr.every(x=> { console.log('every',x); return true}) // return true

substr.some(x=> { console.log('some',x); return false})  // return false

substr.map(x=> console.log('map',x));                    // return array
 
str.replace(/(\d+)/g, x=> console.log('replace',x))      // return string