Estoy tratando de recorrer una matriz. Tengo el siguiente código:

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

Estoy tratando de sacar todos los datos de la matriz. ¿Puede alguien guiarme en el camino correcto, por favor?

(Actualización: mi otra respuesta aquí presenta las opciones que no son jQuery mucho más a fondo. Sin jQuery.eachembargo , la tercera opción a continuación no está incluida).

Cuatro opciones:

Bucle genérico:

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

o en ES2015 +:

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

Ventajas : directo, sin dependencia de jQuery, fácil de entender, sin problemas para preservar el significado thisdentro del cuerpo del bucle, sin sobrecarga innecesaria de llamadas a funciones (por ejemplo, en teoría más rápido, aunque de hecho tendría que tiene tantos elementos que lo más probable es que tenga otros problemas ( detalles ).

ES5 forEach:

A partir de ECMAScript5, las matrices tienen una forEachfunción en ellas que facilita el bucle a través de la matriz:

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

Enlace a documentos

(Nota: hay muchas otras funciones, no solo forEach; consulte la respuesta mencionada anteriormente para obtener más detalles).

Ventajas : declarativo, puede usar una función preconstruida para el iterador si tiene uno a mano, si su cuerpo de bucle es complejo, el alcance de una llamada de función a veces es útil, no necesita una ivariable en su ámbito de contención.

Desventajas : Si usted está usando thisen el código que contiene y que desea utilizar thisdentro de su forEachdevolución de llamada, que tienen que o bien A) Pegúela en una variable, de forma que se puede utilizar dentro de la función, B) lo pasa como segundo argumento a forEachpor lo forEachlo configura como thisdurante la devolución de llamada, o C) Use una función de flecha ES2015 + , que se cierra this. Si no hace una de esas cosas, la devolución de llamada thisserá undefined(en modo estricto) o el objeto global ( window) en modo suelto. Solía ​​haber una segunda desventaja que forEachno era universalmente compatible, pero aquí en 2018, el único navegador con el que se encontrará que no tiene forEaches IE8 (y no puede ser correctamente) polirellenado allí, tampoco

ES2015 + for-of:

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

Vea la respuesta vinculada en la parte superior de esta respuesta para obtener detalles sobre cómo funciona.

Ventajas : Simple, directo, ofrece una variable de alcance contenido (o constante, en lo anterior) para la entrada de la matriz.

Desventajas : No es compatible con ninguna versión de IE.

jQuery.each:

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

( Enlace a documentos )

Ventajas : todas las mismas ventajas que forEach, además, sabes que está ahí ya que estás usando jQuery.

Desventajas : si está usando thisel código que lo contiene, debe pegarlo en una variable para poder usarlo dentro de la función, ya que thissignifica algo más dentro de la función.

Sin thisembargo, puedes evitarlo usando $.proxy:

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

... o Function#bind:

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

... o en ES2015 ("ES6"), una función de flecha:

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

Qué NO hacer:

No lo use for..inpara esto (o si lo hace, hágalo con las garantías adecuadas). Verá gente que dice (de hecho, brevemente hubo una respuesta aquí que dice eso), pero for..inno hace lo que mucha gente piensa que hace (¡hace algo aún más útil!). Específicamente, for..inrecorre los nombres de propiedades enumerables de un objeto (no los índices de una matriz). Dado que las matrices son objetos, y sus únicas propiedades enumerables de forma predeterminada son los índices, en su mayoría parece funcionar en una implementación suave. Pero no es una suposición segura de que solo puede usarlo para eso. Aquí hay una exploración: http://jsbin.com/exohi/3

Debería suavizar el "no" anterior. Si se trata de matrices dispersas (p. Ej., La matriz tiene 15 elementos en total, pero sus índices están esparcidos en el rango de 0 a 150,000 por alguna razón, por lo que lengthes 150,001), y si usa las salvaguardas apropiadas, como hasOwnPropertyy verificando El nombre de la propiedad es realmente numérico (consulte el enlace anterior), for..inpuede ser una forma perfectamente razonable de evitar muchos bucles innecesarios, ya que solo se enumerarán los índices poblados.

jQuery.each ()

jQuery.each ()

jQuery.each(array, callback)

iteración de matriz

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

iteración de objeto

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

ejemplo :

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 loops para array

en bucle

for (initialExpression; condition; incrementExpression)
  statement

ejemplo

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

para en

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

para de

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

para cada

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

Recursos

MDN bucles e iteradores

No hay necesidad de jquery aquí, solo un forbucle funciona:

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

Opción 1: el forbucle tradicional

Los basicos

Un forbucle tradicional tiene tres componentes:

1. la inicialización: ejecutada antes de que se ejecute el bloque look por primera vez
2. la condición: comprueba una condición cada vez antes de que se ejecute el bloque de bucle y abandona el bucle si es falso
3. la idea de último momento: se realiza cada vez que se ejecuta el bloque de bucle

Estos tres componentes están separados entre sí por un ;símbolo. El contenido de cada uno de estos tres componentes es opcional, lo que significa que el siguiente es el forbucle más mínimo posible:

for (;;) {
    // Do stuff
}

Por supuesto, deberá incluir un if(condition === true) { break; } o un if(condition === true) { return; }lugar dentro de ese forbucle para que deje de funcionar.

Por lo general, sin embargo, la inicialización se usa para declarar un índice, la condición se usa para comparar ese índice con un valor mínimo o máximo, y la idea de último momento se usa para incrementar el índice:

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

Usando un forbucle tradicional para recorrer una matriz

La forma tradicional de recorrer una matriz es esta:

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

O, si prefiere hacer un bucle hacia atrás, haga esto:

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

Sin embargo, hay muchas variaciones posibles, como por ejemplo. éste :

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

... o este ...

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

... o este :

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

Lo que funcione mejor depende en gran medida del gusto personal y del caso de uso específico que está implementando.

Cada una de estas variaciones es compatible con todos los navegadores, incluidos los más antiguos.

Opción 2: el whilebucle

Una alternativa a un forbucle es un whilebucle. Para recorrer una matriz, puede hacer esto:

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

Al igual que los forbucles tradicionales , los whilebucles son compatibles incluso con los navegadores más antiguos.

Además, cada bucle while se puede reescribir como un forbucle. Por ejemplo, el while-loop aquí arriba se comporta exactamente de la misma manera que este for-loop:

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

Opción 3: for...inyfor...of

En JavaScript, también puedes hacer esto:

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

Sin embargo, esto debe usarse con cuidado, ya que no se comporta igual que un forbucle tradicional en todos los casos, y hay posibles efectos secundarios que deben considerarse. Vea ¿Por qué usar "for ... in" con iteración de matriz es una mala idea? para más detalles.

Como alternativa a for...in, ahora también hay para for...of. El siguiente ejemplo muestra la diferencia entre un for...ofbucle y un for...inbucle:

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
}

También debe tener en cuenta que ninguna versión de Internet Explorer es compatible for...of( Edge 12+ lo hace) y eso for...inrequiere al menos IE10.

Opcion 4: Array.prototype.forEach()

Una alternativa a For-loops es Array.prototype.forEach(), que usa la siguiente sintaxis:

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

Array.prototype.forEach() es compatible con todos los navegadores modernos, así como con IE9 +.

Opcion 5: jQuery.each()

Además de las otras cuatro opciones mencionadas, jQuery también tenía su propia foreachvariación.

Utiliza la siguiente sintaxis:

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

Utiliza la each()función de jQuery.

Aquí hay un ejemplo:

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

Usa jQuery each(). Hay otras formas, pero cada una está diseñada para este propósito.

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

Y no coloque la coma después del último número.

Puedes usar un for()bucle:

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

Sintaxis ES6 con función de flecha e interpolación:

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

Prueba esto:

$.grep(array, function(element) {

})

Formas alternativas de iteración a través de una matriz / cadena con efectos secundarios

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