Я пытаюсь перебрать массив. У меня есть следующий код:
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 в теле цикла, нет ненужных накладных расходов на вызовы функций (например, теоретически быстрее, хотя на самом деле вы бы имели иметь так много элементов, что, скорее всего, у вас возникнут другие проблемы; детали).
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 (и он не может быть должным образом заполнен там, либо).
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(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(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>Нет необходимости в jquery здесь работает только цикл for:
var substr = currnt_image_list.split(',');
for(var i=0; i< substr.length; i++) {
alert(substr[i]);
}
for -loopТрадиционный for -loop имеет три компонента:
Эти три компонента отделены друг от друга символом ;. Контент для каждого из этих трех компонентов является необязательным, а это означает, что наиболее минимальным 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);
}
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);
}
Чем лучше все работает, это в основном вопрос личного вкуса и конкретного варианта использования, который вы реализуете.
Примечание:Каждый из этих вариантов поддерживается всеми браузерами, в том числе старыми!
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);
}
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.
Array.prototype.forEach()Альтернативой for -loops является Array.prototype.forEach(), который использует следующий синтаксис:
myArray.forEach(function(value, key, myArray) {
console.log(value);
});
Array.prototype.forEach() поддерживается всеми современными браузерами, а также IE9 +.
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(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