Próbuję przejść przez tablicę. Mam następujący kod:

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

Próbuję usunąć wszystkie dane z tablicy. Czy ktoś może poprowadzić mnie właściwą ścieżką?

(Aktualizacja: Moja inna odpowiedź tutaj znacznie dokładniej określa opcje inne niż jQuery. Trzecia opcja poniżej jQuery.eachnie jest jednak dostępna.)

Cztery opcje:

Pętla ogólna:

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

lub w ES2015 +:

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

Zalety : Prosto, bez zależności od jQuery, łatwy do zrozumienia, bez problemów z zachowaniem znaczenia thiswewnątrz ciała pętli, bez zbędnego narzutu wywołań funkcji (np. Teoretycznie szybciej, choć w rzeczywistości trzeba by było mieć tak wiele elementów, że są szanse, że będziesz mieć inne problemy; szczegóły ).

ES5 forEach:

Począwszy od ECMAScript5, tablice mają na sobie forEachfunkcję, która ułatwia zapętlenie tablicy:

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

Link do dokumentów

(Uwaga: Istnieje wiele innych funkcji, nie tylko forEach; szczegółowe informacje znajdują się w powyższej odpowiedzi ).

Zalety : Deklaratywny, można użyć wstępnie zbudowanej funkcji dla iteratora, jeśli masz jedną poręczną, jeśli ciało pętli jest złożone, określenie zakresu wywołania funkcji jest czasem przydatne, nie ma potrzeby izmiennej w swoim zawierającym zakresie.

Wady : Jeśli używasz thisw kodzie zawierającym i chcesz użyć thisw swoim forEachzwrotnego, trzeba albo) stick to w zmiennej, dzięki czemu można go używać wewnątrz funkcji, B) Przeciągnij go jako drugi argument na forEachtak forEachustawia go jak thispodczas oddzwaniania lub C) Użyj funkcji strzałki ES2015 + , która zamyka się this. Jeśli nie zrobisz żadnej z tych rzeczy, w wywołaniu zwrotnym thisbędzie undefined(w trybie ścisłym) lub obiekt globalny ( window) w trybie swobodnym. Kiedyś istniała druga wada, która forEachnie była powszechnie obsługiwana, ale tutaj w 2018 r. Jedyną przeglądarką, w której się natkniesz, której nie ma, forEachjest IE8 (i nie może być poprawnie tam też polifill).

ES2015 + for-of:

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

Zobacz odpowiedź na górze tej odpowiedzi, aby dowiedzieć się, jak to działa.

Zalety : Prosty, bezpośredni, oferuje zmienną o ograniczonym zakresie (lub stałą, jak wyżej) do wprowadzania z tablicy.

Wady : Nieobsługiwane w żadnej wersji IE.

jQuery.each:

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

( Link do dokumentów )

Zalety : Wszystkie te same zalety co forEachplus, że wiesz, że istnieje, ponieważ używasz jQuery.

Wady : Jeśli używasz thisw kodzie zawierającym, musisz umieścić go w zmiennej, abyś mógł używać go w funkcji, ponieważ thisoznacza to coś innego w funkcji.

Możesz jednak tego uniknąć this, używając $.proxy:

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

... lub Function#bind:

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

... lub w ES2015 („ES6”), funkcja strzałki:

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

Czego NIE robić:

Nie używaj for..indo tego (lub jeśli tak, rób to z odpowiednimi zabezpieczeniami). Zobaczysz ludzi, którzy to mówią (w rzeczywistości na chwilę była tu odpowiedź, że to mówi), ale for..innie robią tego, co wielu uważa, że ​​robi (robi coś jeszcze bardziej przydatnego!). W szczególności, for..inpętle przechodzą przez wymienne nazwy właściwości obiektu (nie indeksy tablicy). Ponieważ tablice są obiektami, a ich jedynymi domyślnymi właściwościami, które można wyliczyć, są indeksy, wydaje się, że przeważnie działa to trochę bezładnie. Ale nie jest to bezpieczne założenie, że możesz po prostu tego użyć. Oto eksploracja: http://jsbin.com/exohi/3

Powinienem złagodzić powyższe „nie”. Jeśli masz do czynienia z rzadkimi tablicami (np. Tablica ma w sumie 15 elementów, ale ich indeksy są z jakiegoś powodu rozrzucone w zakresie od 0 do 150 000, a więc lengthwynosi 150,001), i jeśli stosujesz odpowiednie zabezpieczenia, takie jak hasOwnPropertyi sprawdzanie nazwa właściwości jest naprawdę numeryczna (patrz link powyżej), for..inmoże być całkowicie rozsądnym sposobem na uniknięcie wielu niepotrzebnych pętli, ponieważ wyliczane będą tylko wypełnione indeksy.

jQuery.each ()

jQuery.each ()

jQuery.each(array, callback)

iteracja tablicy

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

iteracja obiektu

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

przykład :

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>

Pętle javascript dla tablicy

dla pętli

for (initialExpression; condition; incrementExpression)
  statement

przykład

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])
}

dla w

//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
}

z dnia

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

dla każdego

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

Zasoby

Pętle i iteratory MDN

Nie ma tu potrzeby jquery, fordziała tylko pętla:

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

Opcja 1: Tradycyjna forpętla

Podstawy

Tradycyjna forpętla składa się z trzech elementów:

1. inicjalizacja: wykonywana przed pierwszym uruchomieniem bloku look
2. warunek: sprawdza warunek za każdym razem przed wykonaniem bloku pętli i kończy pętlę, jeśli jest fałszem
3. przemyślenie: wykonywane za każdym razem po wykonaniu bloku pętli

Te trzy elementy są oddzielone od siebie ;symbolem. Treść każdego z tych trzech składników jest opcjonalna, co oznacza, że ​​następujące jest najbardziej minimalna formożliwa pętla:

for (;;) {
    // Do stuff
}

Oczywiście, musisz dołączyć if(condition === true) { break; } lub if(condition === true) { return; }gdzieś wewnątrz tej forpętli, aby przestała działać.

Zwykle jednak inicjacja służy do deklarowania indeksu, warunek służy do porównania tego indeksu z wartością minimalną lub maksymalną, a przemyślenie służy do zwiększenia indeksu:

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

Używanie tradycyjnej forpętli do przechodzenia przez tablicę

Tradycyjny sposób przechodzenia przez tablicę jest następujący:

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

Lub, jeśli wolisz zapętlać wstecz, wykonaj następujące czynności:

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

Istnieje jednak wiele możliwych wariantów, np. ten :

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

... albo ten ...

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

... albo ten :

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

To, co działa najlepiej, zależy w dużej mierze zarówno od osobistego gustu, jak i konkretnego przypadku zastosowania, który wdrażasz.

Każda z tych odmian jest obsługiwana przez wszystkie przeglądarki, w tym bardzo stare!

Opcja 2: whilepętla

Jedną alternatywą dla forpętli jest whilepętla. Aby przejść przez tablicę, możesz to zrobić:

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

Podobnie jak tradycyjne forpętle, whilepętle są obsługiwane nawet przez najstarszą przeglądarkę.

Ponadto pętla while może być przepisana jako pętla for. Na przykład whilepowyższa pętla zachowuje się dokładnie tak samo jak ta forpętla:

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

Opcja 3: for...inifor...of

W JavaScript możesz także to zrobić:

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

Należy tego jednak używać ostrożnie, ponieważ nie zachowuje się tak samo jak tradycyjna forpętla we wszystkich przypadkach i należy wziąć pod uwagę potencjalne skutki uboczne. Zobacz: Dlaczego używanie „dla ... w” z iteracją tablicy jest złym pomysłem? po więcej szczegółów.

Alternatywą dla for...injest teraz także for...of. Poniższy przykład pokazuje różnicę między for...ofpętlą a for...inpętlą:

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
}

Należy również wziąć pod uwagę, że żadna wersja programu Internet Explorer nie obsługuje for...of( Edge 12+ ) i for...inwymaga co najmniej IE10.

Opcja 4: Array.prototype.forEach()

Alternatywą dla opcji For-loops jest Array.prototype.forEach()użycie następującej składni:

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

Array.prototype.forEach() jest obsługiwany przez wszystkie nowoczesne przeglądarki, a także IE9 +.

Opcja 5: jQuery.each()

Oprócz czterech innych wymienionych opcji, jQuery również miało swoją własną foreachodmianę.

Wykorzystuje następującą składnię:

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

Skorzystaj z each()funkcji jQuery.

Oto przykład:

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

Użyj jQuery each(). Istnieją inne sposoby, ale każdy jest przeznaczony do tego celu.

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

I nie wstawiaj przecinka po ostatnim numerze.

Możesz użyć for()pętli:

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

Składnia ES6 z funkcją strzałki i interpolacją:

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

Spróbuj tego:

$.grep(array, function(element) {

})

Alternatywne sposoby iteracji poprzez tablicę / ciąg znaków z efektami ubocznymi

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