Как перебрать массив в jQuery?

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

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

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

Ответы

Ответ 1

(Обновление: в моем другом ответе здесь изложены параметры, не относящиеся к 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 во время обратного вызова, или с) Используйте ES2015+ функцию стрелки, которая закрывает над this. Если вы не сделаете ни одной из этих вещей, в обратном вызове this будет undefined (в строгом режиме) или глобальным объектом (window) в свободном режиме. Раньше был второй недостаток, заключающийся в том, что forEach не был универсально поддерживаемым, но здесь, в 2018 году, единственный браузер, с которым вы собираетесь работать, не имеющий forEach - это IE8 (и он не может быть должным образом заполнен там, либо).

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

Ответ 2

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>

Ответ 3

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

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

Ответ 4

Вариант 1: традиционный `for` -loop

Основы

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

инициализация:, выполняемая до того, как блок look будет выполнен в первый раз
условие: проверяет условие каждый раз до того, как выполняется цикл цикла, и завершает цикл, если false
afterthought: выполняется каждый раз после выполнения цикла.

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

for (;;) {
    // Do stuff
}

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

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

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` -loop

Одной из альтернатив 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 -loop во всех случаях, и есть потенциальные побочные эффекты, которые необходимо учитывать. См. Почему используется "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);
});

Ответ 5

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

Вот пример:

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

Ответ 6

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

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

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

Ответ 7

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

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

Ответ 8

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

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

Ответ 9

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

$.grep(array, function(element) {

})

Ответ 10

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

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

Как перебрать массив в jQuery?

Ответы

Ответ 1

Общий цикл:

ES5 forEach:

ES2015+ for-of:

jQuery.each:

Что НЕ делать:

Ответ 2

jQuery.each()

Ответ 3

Ответ 4

Вариант 1: традиционный for -loop

Основы

Использование tradtional for -loop для циклического перемещения массива

Вариант 2: while -loop

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

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

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

Ответ 5

Ответ 6

Ответ 7

Ответ 8

Ответ 9

Ответ 10

ES5 `forEach`:

ES2015+ `for-of`:

Вариант 1: традиционный `for` -loop

Использование tradtional `for` -loop для циклического перемещения массива

Вариант 2: `while` -loop

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

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

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