Я намагаюся провести цикл через масив. У мене є такий код:

 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-лопа, щоб змусити його перестати працювати.

Однак зазвичай ініціалізація використовується для оголошення індексу, умова використовується для порівняння цього індексу з мінімальним або максимальним значенням, а наступна думка використовується для збільшення індексу:

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

Використання традиційного 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: The while-loop

Однією з альтернатив for-loop є while-loop. Щоб пройти цикл через масив, ви можете зробити це:

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

Як і традиційні for-loops, while-loops підтримуються навіть найстарішими браузерами.

Крім того, цикл у той час, як цикл може бути переписаний як 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...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); 
});

І не ставити кому після останнього числа.

Ви можете використовувати for()цикл:

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

Синтаксис ES6 з функцією стрілки та інтерполяцією:

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

Спробуйте це:

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