¿Cómo puedo recorrer todas las entradas de una matriz usando JavaScript?
Pensé que era algo como esto:
forEach(instance in theArray)
Donde theArray
es mi matriz, pero esto parece ser incorrecto.
24 respuestas
Si tiene una matriz masiva, debe usar {{X0 }} para ganar algo de eficiencia. Los iteradores son propiedad de ciertas colecciones de JavaScript (como {{X1 }}, Set
, String
, < a href = "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" rel = "noreferrer"> Array
). Incluso, {{X5} } usa iterator
bajo el capó.
Los iteradores mejoran la eficiencia al permitirle consumir los elementos de una lista uno a la vez como si fueran una secuencia. Lo que hace que un iterador sea especial es cómo atraviesa una colección. Otros bucles necesitan cargar toda la colección por adelantado para iterar sobre ella, mientras que un iterador solo necesita conocer la posición actual en la colección.
Accede al elemento actual llamando al método next
del iterador. El siguiente método devolverá el value
del elemento actual y un boolean
para indicar cuándo ha llegado al final de la colección. El siguiente es un ejemplo de creación de un iterador a partir de una matriz.
Transforme su matriz regular en iterador usando {{X0} } método como este:
const myArr = [2,3,4]
let it = myArr.values();
console.log(it.next());
console.log(it.next());
console.log(it.next());
console.log(it.next());
También puede transformar su matriz regular en iterador usando { {X0}} así:
const myArr = [2,3,4]
let it = myArr[Symbol.iterator]();
console.log(it.next());
console.log(it.next());
console.log(it.next());
console.log(it.next());
También puede transformar su array
regular en un {{ X1}} así:
let myArr = [8, 10, 12];
function makeIterator(array) {
var nextIndex = 0;
return {
next: function() {
return nextIndex < array.length ?
{value: array[nextIndex++], done: false} :
{done: true};
}
};
};
var it = makeIterator(myArr);
console.log(it.next().value); // {value: 8, done: false}
console.log(it.next().value); // {value: 10, done: false}
console.log(it.next().value); // {value: 12, done: false}
console.log(it.next().value); // {value: undefined, done: true}
NOTA :
- Los iteradores son de naturaleza agotable.
- Los objetos no son
iterable
por defecto. Utilicefor..in
en ese caso porque en lugar de valores funciona con claves.
Puede leer más sobre iteration protocol
aquí.
Una forma más cercana a su idea sería utilizar Array.forEach()
, que acepta una función de cierre que se ejecutará para cada elemento de la matriz.
myArray.forEach(
(item) => {
// Do something
console.log(item);
}
);
Otra forma viable sería utilizar Array.map()
que funciona de la misma manera, pero también toma todos los valores que devuelve y los devuelve en una nueva matriz (esencialmente asignando cada elemento a uno nuevo), de esta manera:
var myArray = [1, 2, 3];
myArray = myArray.map(
(item) => {
return item + 1;
}
);
console.log(myArray); // [2, 3, 4]
ECMAScript 5 (la versión en JavaScript) para trabajar con matrices:
forEach : repite cada elemento de la matriz y hace lo que necesite con cada elemento.
['C', 'D', 'E'].forEach(function(element, index) {
console.log(element + " is #" + (index+1) + " in the musical scale");
});
// Output
// C is the #1 in musical scale
// D is the #2 in musical scale
// E is the #3 in musical scale
En el caso, más interesado en la operación en matriz utilizando alguna característica incorporada.
mapa : crea una nueva matriz con el resultado de la función de devolución de llamada. Este método es bueno para usar cuando necesita formatear los elementos de su matriz.
// Let's upper case the items in the array
['bob', 'joe', 'jen'].map(function(elem) {
return elem.toUpperCase();
});
// Output: ['BOB', 'JOE', 'JEN']
reducir : como su nombre lo indica, reduce la matriz a un solo valor llamando a la función dada que pasa el elemento actual y el resultado de la ejecución anterior.
[1,2,3,4].reduce(function(previous, current) {
return previous + current;
});
// Output: 10
// 1st iteration: previous=1, current=2 => result=3
// 2nd iteration: previous=3, current=3 => result=6
// 3rd iteration: previous=6, current=4 => result=10
cada : devuelve verdadero o falso si todos los elementos de la matriz pasan la prueba en la función de devolución de llamada.
// Check if everybody has 18 years old of more.
var ages = [30, 43, 18, 5];
ages.every(function(elem) {
return elem >= 18;
});
// Output: false
filtro : muy similar a todos excepto que el filtro devuelve una matriz con los elementos que devuelven fiel a la función dada.
// Finding the even numbers
[1,2,3,4,5,6].filter(function(elem){
return (elem % 2 == 0)
});
// Output: [2,4,6]
Si desea utilizar forEach()
, se verá así:
theArray.forEach ( element => {
console.log(element);
});
Si desea utilizar for()
, se verá así:
for(let idx = 0; idx < theArray.length; idx++){
let element = theArray[idx];
console.log(element);
}
Forma jQuery usando $.map
:
var data = [1, 2, 3, 4, 5, 6, 7];
var newData = $.map(data, function(element) {
if (element % 2 == 0) {
return element;
}
});
// newData = [2, 4, 6];
Probablemente el bucle for(i = 0; i < array.length; i++)
no sea la mejor opción. ¿Por qué? Si tienes esto:
var array = new Array();
array[1] = "Hello";
array[7] = "World";
array[11] = "!";
El método llamará de array[0]
a array[2]
. Primero, esto primero hará referencia a variables que ni siquiera tiene, segundo no tendría las variables en la matriz, y tercero esto hará que el código sea más audaz. Mira aquí, es lo que uso:
for(var i in array){
var el = array[i];
//If you want 'i' to be INT just put parseInt(i)
//Do something with el
}
Y si quieres que sea una función, puedes hacer esto:
function foreach(array, call){
for(var i in array){
call(array[i]);
}
}
Si quieres romper, un poco más de lógica:
function foreach(array, call){
for(var i in array){
if(call(array[i]) == false){
break;
}
}
}
Ejemplo:
foreach(array, function(el){
if(el != "!"){
console.log(el);
} else {
console.log(el+"!!");
}
});
Vuelve:
//Hello
//World
//!!!
Si desea recorrer una matriz de objetos con la función de flecha:
let arr = [{name:'john', age:50}, {name:'clark', age:19}, {name:'mohan', age:26}];
arr.forEach((person)=>{
console.log('I am ' + person.name + ' and I am ' + person.age + ' old');
})
Según la nueva característica actualizada ECMAScript 6 (ES6) y ECMAScript 2015, puede usar las siguientes opciones con bucles:
para bucles
for(var i = 0; i < 5; i++){
console.log(i);
}
// Output: 0,1,2,3,4
para ... en bucles
let obj = {"a":1, "b":2}
for(let k in obj){
console.log(k)
}
// Output: a,b
Array.forEach ()
let array = [1,2,3,4]
array.forEach((x) => {
console.log(x);
})
// Output: 1,2,3,4
para ... de bucles
let array = [1,2,3,4]
for(let x of array){
console.log(x);
}
// Output: 1,2,3,4
bucles while
let x = 0
while(x < 5){
console.log(x)
x++
}
// Output: 1,2,3,4
hacer ... mientras bucles
let x = 0
do{
console.log(x)
x++
}while(x < 5)
// Output: 1,2,3,4
A partir de ECMAScript 6:
list = [0, 1, 2, 3]
for (let obj of list) {
console.log(obj)
}
Donde of
evita las rarezas asociadas con in
y lo hace funcionar como el bucle for
de cualquier otro idioma, y let
une i
dentro del bucle en lugar de dentro de la función.
Las llaves ({}
) se pueden omitir cuando solo hay un comando (por ejemplo, en el ejemplo anterior).
Puedes llamar a cada uno de estos:
forEach
iterará sobre la matriz que proporcione y para cada iteración tendrá element
que contiene el valor de esa iteración. Si necesita un índice, puede obtener el índice actual pasando i
como el segundo parámetro en la función de devolución de llamada para forEach.
Foreach es básicamente una función de orden superior, que toma otra función como parámetro.
let theArray= [1,3,2];
theArray.forEach((element) => {
// Use the element of the array
console.log(element)
}
Salida:
1
3
2
También puede iterar sobre una matriz como esta:
for (let i=0; i<theArray.length; i++) {
console.log(i); // i will have the value of each index
}
No hay ningún bucle for each
en JavaScript nativo. Puede usar las bibliotecas para obtener esta funcionalidad (recomiendo Underscore.js), use un simple for
en bucle.
for (var instance in objects) {
...
}
Sin embargo, tenga en cuenta que puede haber razones para usar un bucle for
aún más simple (consulte la pregunta de desbordamiento de pila ¿Por qué está usando "para ... en "con iteración de matriz una idea tan mala? )
var instance;
for (var i=0; i < objects.length; i++) {
var instance = objects[i];
...
}
Este es un iterador para la lista NO dispersa donde el índice comienza en 0, que es el escenario típico cuando se trata de document.getElementsByTagName o document.querySelectorAll)
function each( fn, data ) {
if(typeof fn == 'string')
eval('fn = function(data, i){' + fn + '}');
for(var i=0, L=this.length; i < L; i++)
fn.call( this[i], data, i );
return this;
}
Array.prototype.each = each;
Ejemplos de uso:
Ejemplo # 1
var arr = [];
[1, 2, 3].each( function(a){ a.push( this * this}, arr);
arr = [1, 4, 9]
Ejemplo # 2
each.call(document.getElementsByTagName('p'), "this.className = data;",'blue');
Cada etiqueta p obtiene class="blue"
Ejemplo # 3
each.call(document.getElementsByTagName('p'),
"if( i % 2 == 0) this.className = data;",
'red'
);
Todas las demás etiquetas p obtienen class="red"
>
Ejemplo # 4
each.call(document.querySelectorAll('p.blue'),
function(newClass, i) {
if( i < 20 )
this.className = newClass;
}, 'green'
);
Y finalmente las primeras 20 etiquetas p azules se cambian a verde
Precaución al usar una cadena como función: la función se crea fuera de contexto y debe usarse solo cuando esté seguro del alcance variable. De lo contrario, es mejor pasar funciones donde el alcance es más intuitivo.
Si no te importa vaciar la matriz:
var x;
while(x = y.pop()){
alert(x); //do something
}
x
contendrá el último valor de y
y se eliminará de la matriz. También puede usar shift()
que le dará y eliminará el primer elemento de y
.
No hay capacidad incorporada para entrar en forEach
. Para interrumpir la ejecución, use el Array#some
como se muestra a continuación:
[1,2,3].some(function(number) {
return number === 1;
});
Esto funciona porque some
devuelve verdadero tan pronto como cualquiera de las devoluciones de llamada, ejecutadas en orden de matriz, devuelve verdadero, cortocircuitando la ejecución del resto. Respuesta original vea el prototipo de matriz para algunos
Si está utilizando la jQuery , puede usar jQuery.each :
$.each(yourArray, function(index, value) {
// do your stuff here
});
EDITAR:
Según la pregunta, el usuario desea código en javascript en lugar de jquery, por lo que la edición es
var length = yourArray.length;
for (var i = 0; i < length; i++) {
// Do something with yourArray[i].
}
Uso de bucles con ECMAScript 6 desestructuración y el operador de propagación
La desestructuración y el uso del operador de propagación han demostrado ser bastante útiles para los recién llegados a ECMAScript 6 por ser más legibles / estéticos, aunque algunos veteranos de JavaScript podrían considerarlo desordenado. Juniors o algunas otras personas pueden encontrarlo útil.
Los siguientes ejemplos utilizarán el {{ X0}} y la {{ X1}} método.
Los ejemplos 6, 7 y 8 se pueden usar con cualquier bucle funcional como
.map
,.filter
,.reduce
,.sort
, {{X4} },.some
. Para obtener más información sobre estos métodos, consulte el Array Object.
Ejemplo 1: bucle normal for...of
: aquí no hay trucos.
let arrSimple = ['a', 'b', 'c'];
for (let letter of arrSimple) {
console.log(letter);
}
Ejemplo 2: Dividir palabras en caracteres
let arrFruits = ['apple', 'orange', 'banana'];
for (let [firstLetter, ...restOfTheWord] of arrFruits) {
// Create a shallow copy using the spread operator
let [lastLetter] = [...restOfTheWord].reverse();
console.log(firstLetter, lastLetter, restOfTheWord);
}
Ejemplo 3: Bucle con un key
y value
// let arrSimple = ['a', 'b', 'c'];
// Instead of keeping an index in `i` as per example `for(let i = 0 ; i<arrSimple.length;i++)`
// this example will use a multi-dimensional array of the following format type:
// `arrWithIndex: [number, string][]`
let arrWithIndex = [
[0, 'a'],
[1, 'b'],
[2, 'c'],
];
// Same thing can be achieved using `.map` method
// let arrWithIndex = arrSimple.map((i, idx) => [idx, i]);
// Same thing can be achieved using `Object.entries`
// NOTE: `Object.entries` method doesn't work on Internet Explorer unless it's polyfilled
// let arrWithIndex = Object.entries(arrSimple);
for (let [key, value] of arrWithIndex) {
console.log(key, value);
}
Ejemplo 4: Obtener las propiedades del objeto en línea
let arrWithObjects = [{
name: 'Jon',
age: 32
},
{
name: 'Elise',
age: 33
}
];
for (let { name, age: aliasForAge } of arrWithObjects) {
console.log(name, aliasForAge);
}
Ejemplo 5: Obtenga propiedades de objetos profundos de lo que necesita
let arrWithObjectsWithArr = [{
name: 'Jon',
age: 32,
tags: ['driver', 'chef', 'jogger']
},
{
name: 'Elise',
age: 33,
tags: ['best chef', 'singer', 'dancer']
}
];
for (let { name, tags: [firstItemFromTags, ...restOfTags] } of arrWithObjectsWithArr) {
console.log(name, firstItemFromTags, restOfTags);
}
Ejemplo 6: ¿Se utiliza Ejemplo 3 con .forEach
let arrWithIndex = [
[0, 'a'],
[1, 'b'],
[2, 'c'],
];
// Not to be confused here, `forEachIndex` is the real index
// `mappedIndex` was created by "another user", so you can't really trust it
arrWithIndex.forEach(([mappedIndex, item], forEachIndex) => {
console.log(forEachIndex, mappedIndex, item);
});
Ejemplo 7: ¿Se utiliza el Ejemplo 4 con .forEach
let arrWithObjects = [{
name: 'Jon',
age: 32
},
{
name: 'Elise',
age: 33
}
];
// NOTE: Destructuring objects while using shorthand functions
// are required to be surrounded by parentheses
arrWithObjects.forEach( ({ name, age: aliasForAge }) => {
console.log(name, aliasForAge)
});
Ejemplo 8: ¿Se utiliza el Ejemplo 5 con .forEach
let arrWithObjectsWithArr = [{
name: 'Jon',
age: 32,
tags: ['driver', 'chef', 'jogger']
},
{
name: 'Elise',
age: 33,
tags: ['best chef', 'singer', 'dancer']
}
];
arrWithObjectsWithArr.forEach(({
name,
tags: [firstItemFromTags, ...restOfTags]
}) => {
console.log(name, firstItemFromTags, restOfTags);
});
La sintaxis lambda no suele funcionar en Internet Explorer 10 o inferior.
Usualmente uso el
[].forEach.call(arrayName,function(value,index){
console.log("value of the looped element" + value);
console.log("index of the looped element" + index);
});
Si eres un jQuery fan y ya tienes un archivo jQuery ejecutándose, debes invertir las posiciones de los parámetros de índice y valor
$("#ul>li").each(function(**index, value**){
console.log("value of the looped element" + value);
console.log("index of the looped element" + index);
});
Si desea realizar un bucle sobre una matriz, use el bucle estándar de tres partes for
.
for (var i = 0; i < myArray.length; i++) {
var arrayItem = myArray[i];
}
Puede obtener algunas optimizaciones de rendimiento almacenando en caché myArray.length
o iterando al revés.
Nota : esta respuesta está irremediablemente desactualizada. Para un enfoque más moderno, mire los métodos disponibles en un matriz. Los métodos de interés pueden ser:
- para cada
- mapa
- Filtro
- Código Postal
- Reducir
- cada
- Algunos
La forma estándar de iterar una matriz en JavaScript es un bucle vainilla for
:
var length = arr.length,
element = null;
for (var i = 0; i < length; i++) {
element = arr[i];
// Do something with element
}
Sin embargo, tenga en cuenta que este enfoque solo es bueno si tiene una matriz densa y cada índice está ocupado por un elemento. Si la matriz es escasa, entonces puede encontrar problemas de rendimiento con este enfoque, ya que repetirá muchos índices que no existen realmente en la matriz. En este caso, un for .. in
- loop podría ser una mejor idea. Sin embargo, debe usar las medidas de seguridad adecuadas para asegurarse de que solo se actúen las propiedades deseadas de la matriz (es decir, los elementos de la matriz), ya que también se enumerará el bucle for..in
en navegadores heredados, o si las propiedades adicionales se definen como enumerable
.
En ECMAScript 5 habrá un método forEach en el prototipo de matriz, pero es no es compatible con navegadores heredados. Entonces, para poder usarlo de manera consistente, debe tener un entorno que lo admita (por ejemplo, Node. js para JavaScript del lado del servidor), o use un "Polyfill". Sin embargo, el Polyfill para esta funcionalidad es trivial y, dado que hace que el código sea más fácil de leer, es un buen polyfill para incluir.
También me gustaría agregar esto como una composición de un bucle inverso y una respuesta anterior para alguien a quien también le gustaría esta sintaxis.
var foo = [object,object,object];
for (var i = foo.length, item; item = foo[--i];) {
console.log(item);
}
Pros:
El beneficio para esto: ya tiene la referencia en el primero, así no necesitará declararse más tarde con otra línea. Es útil al recorrer en bucle la matriz de objetos.
Contras:
Esto se romperá siempre que la referencia sea falsa: falsey (indefinida, etc.). Sin embargo, se puede usar como una ventaja. Sin embargo, sería un poco más difícil de leer. Y también, dependiendo del navegador, puede "no" estar optimizado para funcionar más rápido que el original.
Algunos C -estilo de estilo usan foreach
para recorrer las enumeraciones. En JavaScript, esto se hace con la for..in
estructura de bucle:
var index,
value;
for (index in obj) {
value = obj[index];
}
Hay una trampa. for..in
recorrerá cada uno de los miembros enumerables del objeto y los miembros de su prototipo. Para evitar leer valores que se heredan a través del prototipo del objeto, simplemente verifique si la propiedad pertenece al objeto:
for (i in obj) {
if (obj.hasOwnProperty(i)) {
//do stuff
}
}
Además, ECMAScript 5 ha agregado un forEach
método a Array.prototype
que puede usarse para enumerar sobre una matriz usando un calback (el polyfill está en los documentos, por lo que aún puede usarlo para navegadores antiguos):
arr.forEach(function (val, index, theArray) {
//do stuff
});
Es importante tener en cuenta que Array.prototype.forEach
no se rompe cuando la devolución de llamada devuelve false
. jQuery y Underscore.js proporcionan sus propias variaciones en each
para proporcionar bucles que se pueden cortocircuitar.
Hay algunas formas para recorrer una matriz en JavaScript, como se muestra a continuación:
para : es el más común . Bloque completo de código para bucle
var languages = ["Java", "JavaScript", "C#", "Python"];
var i, len, text;
for (i = 0, len = languages.length, text = ""; i < len; i++) {
text += languages[i] + "<br>";
}
document.getElementById("example").innerHTML = text;
<p id="example"></p>
while : realiza un bucle mientras se cumple una condición. Parece ser el ciclo más rápido
var text = "";
var i = 0;
while (i < 10) {
text += i + ") something<br>";
i++;
}
document.getElementById("example").innerHTML = text;
<p id="example"></p>
do / while : también recorre un bloque de código mientras la condición es verdadera, se ejecutará al menos una vez
var text = ""
var i = 0;
do {
text += i + ") something <br>";
i++;
}
while (i < 10);
document.getElementById("example").innerHTML = text;
<p id="example"></p>
Bucles funcionales - forEach
, map
, filter
, también reduce
(recorren la función, pero se usan si es necesario) algo con tu matriz, etc.
// For example, in this case we loop through the number and double them up using the map function
var numbers = [65, 44, 12, 4];
document.getElementById("example").innerHTML = numbers.map(function(num){return num * 2});
<p id="example"></p>
Para obtener más información y ejemplos sobre programación funcional en matrices, consulte la publicación del blog Programación funcional en JavaScript: mapear, filtrar y reducir .
Una implementación forEach (ver en jsFiddle):
function forEach(list,callback) {
var length = list.length;
for (var n = 0; n < length; n++) {
callback.call(list[n]);
}
}
var myArray = ['hello','world'];
forEach(
myArray,
function(){
alert(this); // do something
}
);
Hay tres implementaciones de foreach
en jQuery de la siguiente manera.
var a = [3,2];
$(a).each(function(){console.log(this.valueOf())}); //Method 1
$.each(a, function(){console.log(this.valueOf())}); //Method 2
$.each($(a), function(){console.log(this.valueOf())}); //Method 3
Preguntas relacionadas
Nuevas preguntas
javascript
Para preguntas sobre la programación en ECMAScript (JavaScript / JS) y sus diversos dialectos / implementaciones (excepto ActionScript). Incluya todas las etiquetas relevantes en su pregunta; por ejemplo, [node.js], [jquery], [json], etc.