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

Question

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

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

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

Answer 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; подробности см. в ответе, указанном выше .)

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

Недостатки : Если вы используете this в содержащем коде и хотите использовать this в вашем forEach обратном вызове, вы должны либо A) Вставить его в переменную, чтобы вы моглииспользуйте его в функции, B) передайте его в качестве второго аргумента forEach, поэтому forEach устанавливает его как this во время обратного вызова, или C) используйте 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 означает что-то еще внутри функцииtion.

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

Answer 2

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
}

Foreach

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

Ресурсы

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

Answer 3

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

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

Answer 4

Вариант 1: Традиционный for -петл

Основы

Традиционный for -петл состоит из трех компонентов:

1. инициализация: , выполненная перед первым выполнением блока просмотра
2. условие: проверяет условие каждый раз перед выполнением блока цикла, ивыходит из цикла, если false
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);
}

---

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

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

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 -lolop является while -loop.Чтобы перебрать массив, вы можете сделать следующее:

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

Примечание:

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

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

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

---

Опция 3: for...in и for...of

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

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

Однако это следует использовать с осторожностью, поскольку оно не ведет себя так же, какtraditonal 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);
});

Answer 5

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

Вот пример:

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

Answer 6

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

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

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

Answer 7

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

$.grep(array, function(element) {

})

Answer 8

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

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

Answer 9

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

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

Answer 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