arrays array - Recorrer una matriz en JavaScript




asociativo bidimensional (25)

En Java puede usar un bucle for para atravesar objetos en una matriz de la siguiente manera:

String[] myStringArray = {"Hello", "World"};
for (String s : myStringArray)
{
    // Do something
}

¿Puedes hacer lo mismo en JavaScript?


Answers

Si quieres usar jQuery, tiene un buen ejemplo en su documentación:

 $.each([ 52, 97 ], function( index, value ) {
      alert( index + ": " + value );
 });

En JavaScript no es recomendable recorrer un Array con un bucle for-in, pero es mejor usar un bucle for como:

for(var i=0, len=myArray.length; i < len; i++){}

También está optimizado ("caching" la longitud del arreglo). Si desea obtener más información, lea mi post sobre el tema .


Por ejemplo, utilicé en una consola de Firefox:

[].forEach.call(document.getElementsByTagName('pre'), function(e){ 
   console.log(e);
})

Todavía no vi esta variación, que personalmente me gusta la mejor:

Dada una matriz:

var someArray = ["some", "example", "array"];

Puede recorrerlo sin acceder nunca a la propiedad length:

for (var i=0, item; item=someArray[i]; i++) {
  // item is "some", then "example", then "array"
  // i is the index of item in the array
  alert("someArray[" + i + "]: " + item);
}

Vea este JsFiddle que demuestra eso: http://jsfiddle.net/prvzk/

Esto solo funciona para matrices que no son dispersas. Lo que significa que en realidad hay un valor en cada índice en la matriz. Sin embargo, encontré que en la práctica casi nunca uso arreglos dispersos en Javascript ... En tales casos, usualmente es mucho más fácil usar un objeto como un mapa / tabla hash. Si tiene una matriz dispersa y desea realizar un bucle en 0 .. longitud-1, necesita la construcción for (var i = 0; i <someArray.length; ++ i), pero aún necesita un if en el interior del bucle para comprobar si el elemento en el índice actual está realmente definido.

Además, como lo menciona CMS en un comentario a continuación, solo puede usar esto en arreglos que no contengan valores falsos. El conjunto de cadenas del ejemplo funciona, pero si tiene cadenas vacías o números que son 0 o NaN, etc., el bucle se interrumpirá prematuramente. Una vez más, en la práctica, esto casi nunca es un problema para mí, pero es algo que se debe tener en cuenta, lo que hace que sea un bucle para pensar antes de usarlo ... Eso puede descalificarlo para algunas personas :)

Lo que me gusta de este bucle es:

  • Es corto para escribir
  • No es necesario acceder (y mucho menos almacenar en caché) la propiedad length
  • El elemento a acceder se define automáticamente dentro del cuerpo del bucle bajo el nombre que elija.
  • Combina de forma muy natural con array.push y array.splice para utilizar matrices como listas / pilas

El motivo por el que funciona es que la especificación de la matriz exige que cuando lea un elemento de un índice> = la longitud de la matriz, se devolverá indefinido. Cuando escribe en una ubicación de este tipo, se actualizará la longitud.

Para mí, esta construcción emula más de cerca la sintaxis de Java 5 que amo:

for (String item : someArray) {
}

... con el beneficio adicional de saber también sobre el índice actual dentro del bucle


Hay una manera de hacerlo donde tiene muy poco alcance implícito en su bucle y elimine las variables adicionales.

var i = 0,
     item;

// note this is weak to sparse arrays or falsey values
for ( ; item = myStringArray[i++] ; ){ 
    item; // This is the string at the index.
}

O si realmente quieres obtener el ID y tener un bucle realmente clásico for :

var i = 0,
    len = myStringArray.length; // cache the length

for ( ; i < len ; i++ ){
    myStringArray[i]; // Don't use this if you plan on changing the length of the array
}

Todos los navegadores modernos son compatibles con los métodos de iterador para forEach , map , reduce , filter y muchos otros métodos en el prototipo Array .


var x = [4, 5, 6];
for (i = 0, j = x[i]; i < x.length; j = x[++i]) {
    console.log(i,j);
}

Mucho mas limpio ...


Si alguien está interesado en el lado del rendimiento de los múltiples mecanismos disponibles para las iteraciones de Array, he preparado las siguientes pruebas JSPerf:

https://jsperf.com/fastest-array-iterator

Resultados:

El for()iterador tradicional es, con mucho, el método más rápido, especialmente cuando se usa con la longitud del arreglo almacenado en caché .

let arr = [1,2,3,4,5];

for(let i=0, size=arr.length; i<size; i++){
    // do something
}

Los Array.prototype.forEach()y los Array.prototype.map()métodos son las aproximaciones más lentas, probablemente como consecuencia de la sobrecarga de llamadas a la función.


Respuesta corta: si. Puedes hacer con esto:

var myArray = ["element1", "element2", "element3", "element4"];

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

En una consola del navegador, puede ver algo como "element1", "element2", etc., impreso.


Seguro que es ineficiente y muchos lo desprecian, pero es uno de los más cercanos a lo mencionado:

var myStringArray = ["Hello","World"];
myStringArray.forEach(function(f){
    // Do something
})

Hay varias formas de recorrer la matriz en JavaScript.

Bucle genérico

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

ES5's forEach:

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

jQuery.each:

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

Eche un vistazo a this para obtener información detallada o también puede verificar for...in para hacer un bucle a través de una matriz en JavaScript y usar jQuery check jQuery.each() .


Algunos casos de uso de bucle a través de una matriz en la forma de programación funcional en JavaScript:

1. Simplemente recorre una matriz

const myArray = [{x:100}, {x:200}, {x:300}];

myArray.forEach((element, index, array) => {
    console.log(element.x); // 100, 200, 300
    console.log(index); // 0, 1, 2
    console.log(array); // same myArray object 3 times
});

Nota: Array.prototype.forEach () no es una forma funcional en sentido estricto, ya que la función que toma como parámetro de entrada no debe devolver un valor, que por lo tanto no puede considerarse como una función pura.

2. Compruebe si alguno de los elementos de una matriz pasa una prueba

const people = [
    {name: 'John', age: 23}, 
    {name: 'Andrew', age: 3}, 
    {name: 'Peter', age: 8}, 
    {name: 'Hanna', age: 14}, 
    {name: 'Adam', age: 37}];

const anyAdult = people.some(person => person.age >= 18);
console.log(anyAdult); // true

3. Transformar a una nueva matriz

const myArray = [{x:100}, {x:200}, {x:300}];

const newArray= myArray.map(element => element.x);
console.log(newArray); // [100, 200, 300]

Nota: el método map () crea una nueva matriz con los resultados de llamar a una función proporcionada en cada elemento de la matriz de llamada.

4. Resumir una propiedad particular, y calcular su promedio

const myArray = [{x:100}, {x:200}, {x:300}];

const sum = myArray.map(element => element.x).reduce((a, b) => a + b, 0);
console.log(sum); // 600 = 0 + 100 + 200 + 300

const average = sum / myArray.length;
console.log(average); // 200

5. Crea una nueva matriz basada en el original pero sin modificarlo

const myArray = [{x:100}, {x:200}, {x:300}];

const newArray= myArray.map(element => {
    return {
        ...element,
        x: element.x * 2
    };
});

console.log(myArray); // [100, 200, 300]
console.log(newArray); // [200, 400, 600]

6. Cuenta el número de cada categoría.

const people = [
    {name: 'John', group: 'A'}, 
    {name: 'Andrew', group: 'C'}, 
    {name: 'Peter', group: 'A'}, 
    {name: 'James', group: 'B'}, 
    {name: 'Hanna', group: 'A'}, 
    {name: 'Adam', group: 'B'}];

const groupInfo = people.reduce((groups, person) => {
    const {A = 0, B = 0, C = 0} = groups;
    if (person.group === 'A') {
        return {...groups, A: A + 1};
    } else if (person.group === 'B') {
        return {...groups, B: B + 1};
    } else {
        return {...groups, C: C + 1};
    }
}, {});

console.log(groupInfo); // {A: 3, C: 1, B: 2}

7. Recuperar un subconjunto de una matriz basado en criterios particulares

const myArray = [{x:100}, {x:200}, {x:300}];

const newArray = myArray.filter(element => element.x > 250);
console.log(newArray); // [{x:300}] 

Nota: el método filter () crea una nueva matriz con todos los elementos que pasan la prueba implementada por la función proporcionada.

8. Ordenar una matriz

const people = [
  { name: "John", age: 21 },
  { name: "Peter", age: 31 },
  { name: "Andrew", age: 29 },
  { name: "Thomas", age: 25 }
];

let sortByAge = people.sort(function (p1, p2) {
  return p1.age - p2.age;
});

console.log(sortByAge);

9. Encuentra un elemento en una matriz

const people = [ {name: "john", age:23},
                {name: "john", age:43},
                {name: "jim", age:101},
                {name: "bob", age:67} ];

const john = people.find(person => person.name === 'john');
console.log(john);

El método Array.prototype.find () devuelve el valor del primer elemento de la matriz que satisface la función de prueba provista.

Referencias


Puede usar map , que es una técnica de programación funcional que también está disponible en otros idiomas como Python y Haskell .

[1,2,3,4].map( function(item) {
     alert(item);
})

La sintaxis general es:

array.map(func)

En general, func tomaría un parámetro, que es un elemento de la matriz. Pero en el caso de JavaScript, puede tomar un segundo parámetro, que es el índice del elemento, y un tercer parámetro, que es la propia matriz.

El valor de retorno de array.map es otra matriz, por lo que puede usarlo así:

var x = [1,2,3,4].map( function(item) {return item * 10;});

Y ahora x es [10,20,30,40] .

No tienes que escribir la función en línea. Podría ser una función separada.

var item_processor = function(item) {
      // Do something complicated to an item
}

new_list = my_list.map(item_processor);

que sería algo equivalente a:

 for (item in my_list) {item_processor(item);}

Excepto que no obtienes el new_list .


Opera, Safari, Firefox y Chrome ahora comparten un conjunto de métodos de Array mejorados para optimizar muchos bucles comunes.

Puede que no los necesite todos, pero pueden ser muy útiles, o lo sería si todos los navegadores los admitieran.

Mozilla Labs publicó los algoritmos que ambos y WebKit utilizan, para que puedas agregarlos tú mismo.

filtro devuelve una matriz de elementos que satisfacen alguna condición o prueba.

cada devuelve verdadero si cada miembro de la matriz pasa la prueba.

Algunas devoluciones son verdaderas si alguna pasa la prueba.

forEach ejecuta una función en cada miembro de la matriz y no devuelve nada.

map es como forEach, pero devuelve una matriz de los resultados de la operación para cada elemento.

Todos estos métodos toman una función para su primer argumento y tienen un segundo argumento opcional, que es un objeto cuyo alcance desea imponer a los miembros de la matriz a medida que recorren la función.

Ignóralo hasta que lo necesites.

indexOf y lastIndexOf encuentran la posición apropiada del primer o último elemento que coincide exactamente con su argumento.

(function(){
    var p, ap= Array.prototype, p2={
        filter: function(fun, scope){
            var L= this.length, A= [], i= 0, val;
            if(typeof fun== 'function'){
                while(i< L){
                    if(i in this){
                        val= this[i];
                        if(fun.call(scope, val, i, this)){
                            A[A.length]= val;
                        }
                    }
                    ++i;
                }
            }
            return A;
        },
        every: function(fun, scope){
            var L= this.length, i= 0;
            if(typeof fun== 'function'){
                while(i<L){
                    if(i in this && !fun.call(scope, this[i], i, this))
                        return false;
                    ++i;
                }
                return true;
            }
            return null;
        },
        forEach: function(fun, scope){
            var L= this.length, i= 0;
            if(typeof fun== 'function'){
                while(i< L){
                    if(i in this){
                        fun.call(scope, this[i], i, this);
                    }
                    ++i;
                }
            }
            return this;
        },
        indexOf: function(what, i){
            i= i || 0;
            var L= this.length;
            while(i< L){
                if(this[i]=== what)
                    return i;
                ++i;
            }
            return -1;
        },
        lastIndexOf: function(what, i){
            var L= this.length;
            i= i || L-1;
            if(isNaN(i) || i>= L)
                i= L-1;
            else
                if(i< 0) i += L;
            while(i> -1){
                if(this[i]=== what)
                    return i;
                --i;
            }
            return -1;
        },
        map: function(fun, scope){
            var L= this.length, A= Array(this.length), i= 0, val;
            if(typeof fun== 'function'){
                while(i< L){
                    if(i in this){
                        A[i]= fun.call(scope, this[i], i, this);
                    }
                    ++i;
                }
                return A;
            }
        },
        some: function(fun, scope){
            var i= 0, L= this.length;
            if(typeof fun== 'function'){
                while(i<L){
                    if(i in this && fun.call(scope, this[i], i, this))
                        return true;
                    ++i;
                }
                return false;
            }
        }
    }
    for(p in p2){
        if(!ap[p])
            ap[p]= p2[p];
    }
    return true;
})();

En JavaScript, hay tantas soluciones para hacer un loop de una matriz.

Los siguientes códigos son populares.

/** Declare inputs */
const items = ['Hello', 'World']

/** Solution 1. Simple for */
console.log('solution 1. simple for')

for (let i = 0; i < items.length; i++) {
  console.log(items[i])
}

console.log()
console.log()

/** Solution 2. Simple while */
console.log('solution 2. simple while')

let i = 0
while (i < items.length) {
  console.log(items[i++])
}

console.log()
console.log()

/** Solution 3. forEach*/
console.log('solution 3. forEach')

items.forEach(item => {
  console.log(item)
})

console.log()
console.log()

/** Solution 4. for-of*/
console.log('solution 4. for-of')

for (const item of items) {
  console.log(item)
}

console.log()
console.log()


Utilice una secuencia for bucle:

var myStringArray = ["Hello","World"];
var arrayLength = myStringArray.length;
for (var i = 0; i < arrayLength; i++) {
    alert(myStringArray[i]);
    //Do something
}

@zipcodeman sugiere el uso de la instrucción for...in , pero para iterar matrices se debe evitar la entrada for-in , esa declaración está destinada a enumerar las propiedades del objeto.

No se debe utilizar para objetos de tipo matriz porque:

  • El orden de iteración no está garantizado, los índices de matriz pueden no visitarse en orden numérico.
  • Las propiedades heredadas también se enumeran.

El segundo punto es que puede darle muchos problemas, por ejemplo, si extiende el objeto Array.prototype para incluir un método allí, esa propiedad también se enumerará.

Por ejemplo:

Array.prototype.foo = "foo!";
var array = ['a', 'b', 'c'];

for (var i in array) {
  alert(array[i]);
}

El código anterior alertará, "a", "b", "c" y "foo!".

Esto puede ser particularmente un problema si utiliza alguna biblioteca que se basa en gran medida en el aumento de prototipos nativos (como MooTools, por ejemplo).

La instrucción for-in como dije antes está para enumerar las propiedades del objeto, por ejemplo:

var obj = {
  "a": 1,
  "b": 2,
  "c": 3
};

for (var prop in obj) {
  if (obj.hasOwnProperty(prop)) { 
  // or if (Object.prototype.hasOwnProperty.call(obj,prop)) for safety...
    alert("prop: " + prop + " value: " + obj[prop])
  }
}

En el ejemplo anterior, el método hasOwnProperty permite enumerar solo propiedades propias , eso es, solo las propiedades que el objeto tiene físicamente, no propiedades heredadas.

Te recomendaría que leas el siguiente artículo:


Si desea una forma concisa de escribir un bucle rápido y puede iterar a la inversa:

for (var i=myArray.length;i--;){
  var item=myArray[i];
}

Esto tiene la ventaja de almacenar en caché la longitud (similar a for (var i=0, len=myArray.length; i<len; ++i) y no como for (var i=0; i<myArray.length; ++i) ) siendo menos caracteres para escribir.

Incluso hay ocasiones en las que debe iterar en sentido inverso, como cuando se realiza una iteración en una NodeList activa en la que planea eliminar elementos del DOM durante la iteración.


Si está utilizando la biblioteca jQuery, considere usar http://api.jquery.com/jQuery.each/

De la documentación:

jQuery.each( collection, callback(indexInArray, valueOfElement) )

Devoluciones: Objeto

Descripción: una función de iterador genérico, que se puede utilizar para iterar sin problemas en objetos y matrices. Las matrices y los objetos similares a una matriz con una propiedad de longitud (como el objeto de argumentos de una función) se iteran mediante un índice numérico, desde 0 hasta longitud-1. Otros objetos son iterados a través de sus propiedades nombradas.

La $.each()función no es la misma que $(selector).each(), que se utiliza para iterar, exclusivamente, sobre un objeto jQuery. La $.each()función se puede utilizar para iterar sobre cualquier colección, ya sea un mapa (objeto JavaScript) o una matriz. En el caso de una matriz, la devolución de llamada se pasa un índice de matriz y un valor de matriz correspondiente cada vez. (También se puede acceder al valor a través de la thispalabra clave, pero Javascript siempre lo ajustará thiscomo un valor Objectpar si es una cadena simple o un valor numérico). El método devuelve su primer argumento, el objeto que se iteró.


para (var s de myStringArray) {

(Respondiendo directamente a tu pregunta: ahora puedes!)

La mayoría de las otras respuestas son correctas, pero no mencionan (a partir de este escrito) que ECMA Script 6 2015 está trayendo un nuevo mecanismo para realizar la iteración, el for..of loop.

Esta nueva sintaxis es la forma más elegante de iterar una matriz en javascript (siempre que no necesite el índice de iteración), pero los navegadores aún no la admiten ampliamente.

Actualmente funciona con Firefox 13+, Chrome 37+ y no funciona de forma nativa con otros navegadores (consulte la compatibilidad del navegador a continuación). Por suerte, tenemos compiladores JS (como Babel ) que nos permiten usar las características de la próxima generación en la actualidad.

También funciona en Node (lo probé en la versión 0.12.0).

Iterando una matriz

// You could also use "let" instead of "var" for block scope.
for (var letter of ["a", "b", "c"]) { 
   console.log(letter); 
}

Iterando una matriz de objetos

var band = [
  {firstName : 'John', lastName: 'Lennon'}, 
  {firstName : 'Paul', lastName: 'McCartney'}
];

for(var member of band){
  console.log(member.firstName + ' ' + member.lastName); 
}

Iterando un generador:

(Ejemplo extraído de https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of )

function* fibonacci() { // a generator function
  let [prev, curr] = [1, 1];
  while (true) {
    [prev, curr] = [curr, prev + curr];
    yield curr;
  }
}

for (let n of fibonacci()) {
  console.log(n);
  // truncate the sequence at 1000
  if (n >= 1000) {
    break;
  }
}

Tabla de compatibilidad: http://kangax.github.io/es5-compat-table/es6/#For..of loops

Spec: http://wiki.ecmascript.org/doku.php?id=harmony:iterators

}


Introducción

Desde mi época en la universidad, he programado en Java, JavaScript, Pascal, ABAP , PHP, Progress 4GL, C / C ++ y posiblemente algunos otros idiomas que no puedo pensar en este momento.

Si bien todos tienen sus propias idiosincrasias lingüísticas, cada uno de estos idiomas comparte muchos de los mismos conceptos básicos. Dichos conceptos incluyen procedimientos / funciones, declaraciones IF , bucles FOR y bucles WHILE .

Un tradicional for -loop

Un tradicional for bucle tiene tres componentes:

  1. La inicialización: ejecutada antes de que se ejecute el bloque look la primera vez.
  2. La condición: verifica una condición cada vez antes de que se ejecute el bloque de bucle, y abandona el bucle si es falso
  3. El pensamiento posterior: se realiza cada vez que se ejecuta el bloque de bucle

Estos tres componentes están separados unos de otros por a ; símbolo. El contenido para cada uno de estos tres componentes es opcional, lo que significa que lo siguiente es el mínimo posible for bucle:

for (;;) {
    // Do stuff
}

Por supuesto, deberá incluir un if(condition === true) { break; } if(condition === true) { break; } o un if(condition === true) { return; } if(condition === true) { return; } algún lugar dentro de eso for -loop para que deje de correr.

Generalmente, 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 posterior se usa para incrementar el índice:

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

Usando un bucle for tradicional for recorrer un array

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 prefieres hacer un bucle hacia atrás, haz esto:

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

Hay, sin embargo, muchas variaciones posibles, como por ejemplo esta:

for (var key = 0, value = myArray[key], 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 es en gran medida una cuestión de gusto personal y del caso de uso específico que está implementando.

Tenga en cuenta que cada una de estas variaciones es compatible con todos los navegadores, incluidos los muy antiguos.

Un bucle while

Una alternativa a un bucle for es un bucle while. Para recorrer una matriz, puedes hacer esto:

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

Al igual que los bucles tradicionales, while los más antiguos son compatibles con los bucles.

Además, tenga en cuenta que cada bucle while puede reescribirse como un bucle for . Por ejemplo, el bucle while aquí se comporta exactamente de la misma manera que for -loop:

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

For...in y for...of

En JavaScript, también puedes hacer esto:

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

Sin embargo, se debe usar con cuidado, ya que no se comporta como un bucle tradicional en todos los casos, y hay efectos secundarios potenciales que deben ser considerados. Ver ¿Por qué es una mala idea usar "for ... in" con iteración de matriz? para más detalles.

Como alternativa a for...in , ahora también hay for https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of . El siguiente ejemplo muestra la diferencia entre un bucle for...of y un bucle 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
}

Además, debe tener en cuenta que ninguna versión de Internet Explorer es compatible for...of ( Edge 12+ ) y que for...in requiere al menos Internet Explorer 10.

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 Internet Explorer 9 y versiones posteriores.

Bibliotecas

Finalmente, muchas bibliotecas de utilidades también tienen su propia variación foreach . AFAIK, los tres más populares son estos:

jQuery.each() , en jQuery :

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

_.each() , en Underscore.js :

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

_.forEach() , en Lodash.js :

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

La forma más elegante y rápida.

var arr = [1, 2, 3, 1023, 1024];
for (var value; value = arr.pop();) {
    value + 1
}

http://jsperf.com/native-loop-performance/8

Editado (porque estaba equivocado)

Comparando métodos para realizar un bucle a través de una matriz de 100000 elementos y realice una operación mínima con el nuevo valor cada vez.

Preparación:

<script src="//code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
<script>
    Benchmark.prototype.setup = function() {
        // Fake function with minimal action on the value
        var tmp = 0;
        var process = function(value) {
            tmp = value; // Hold a reference to the variable (prevent engine optimisation?)
        };

        // Declare the test Array
        var arr = [];
        for (var i = 0; i < 100000; i++)
            arr[i] = i;
    };
</script>

Pruebas:

<a href="http://jsperf.com/native-loop-performance/16" 
   title="http://jsperf.com/native-loop-performance/16"
><img src="http://i.imgur.com/YTrO68E.png" title="Hosted by imgur.com" /></a>

Sí, puede hacer lo mismo en JavaScript usando bucle, pero sin limitarse a eso, hay muchas formas de hacer un bucle sobre matrices en JavaScrip, imagina que tienes esta matriz a continuación y te gustaría hacer un bucle sobre ella:

var arr = [1, 2, 3, 4, 5];

Estas son las soluciones:

1) Para bucle

For loop es una forma común de bucle a través de matrices en JavaScript, pero no se considera como la solución más rápida para matrices grandes:

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

2) Mientras bucle

Mientras que el bucle se considera la forma más rápida de recorrer largos arreglos, pero generalmente se usa menos en el JavaScript:

let i=0;

while (arr.length>i) {
    console.log(arr[i]);
    i++;
}

3) Hacer mientras
Hacer mientras se hace lo mismo que con alguna diferencia de sintaxis de la siguiente manera:

let i=0;
do {
  console.log(arr[i]);
  i++;
}
while (arr.length>i);

Estas son las formas principales de hacer bucles de javascript, pero hay algunas formas más de hacerlo.

También usamos for inbucle para hacer un bucle sobre objetos en javascript.

También mire map(), filter(), reduce()funciones, etc en la matriz de JavaScript. Pueden hacer las cosas mucho más rápido y mejor que usar whiley for.

Este es un buen artículo si desea obtener más información sobre las funciones asíncronas sobre los arreglos en JavaScript.

La programación funcional ha estado causando un gran revuelo en el mundo del desarrollo en estos días. Y por una buena razón: las técnicas funcionales pueden ayudarlo a escribir códigos declarativos más fáciles de entender de un vistazo, refactor y prueba.

Una de las piedras angulares de la programación funcional es su uso especial de listas y operaciones de listas. Y esas cosas son exactamente como suenan: arrays de cosas, y las cosas que les haces. Pero la mentalidad funcional los trata un poco diferente de lo que cabría esperar.

Este artículo analizará de cerca lo que me gusta llamar a las "tres grandes" operaciones de lista: mapear, filtrar y reducir. Envolver su cabeza alrededor de estas tres funciones es un paso importante para poder escribir código funcional limpio, y abre las puertas a las poderosas técnicas de programación funcional y reactiva.

También significa que nunca tendrás que escribir un bucle for de nuevo.

Leer más >> here :


Bucle de matriz:

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

Bucle de objetos:

for(var prop in obj){
    var propValue = obj[prop];
    console.log(propValue);
}

Existe un método para recorrer solo las propiedades de los objetos, sin incluir las de prototipo:

for (var i in array) if (array.hasOwnProperty(i)) {
    // do something with array[i]
}

pero todavía iterará sobre las propiedades personalizadas definidas.

En javascript, cualquier propiedad personalizada podría asignarse a cualquier objeto, incluida una matriz.

Si uno quiere iterar sobre una matriz dispersa, for (var i = 0; i < array.length; i++) if (i in array)o array.forEachcon es5shimdebe usarse.


Hay un par de maneras de hacerlo en JavaScript. Los dos primeros ejemplos son ejemplos de JavaScript. El tercero hace uso de una biblioteca de JavaScript, es decir, jQuery hace uso de la .each()función.

var myStringArray = ["hello", "World"];
for(var i in myStringArray) {
  alert(myStringArray[i]);
}

var myStringArray = ["hello", "World"];
for (var i=0; i < myStringArray.length; i++) {
  alert(myStringArray[i]);
}

var myStringArray = ["hello", "World"];
$.each(myStringArray, function(index, value){
  alert(value);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


Los niños siempre recordarán los secretos que han compartido con sus padres, incluso después de que estos se hayan ido. Esto es lo que son los cierres para funciones.

Los secretos para las funciones de JavaScript son las variables privadas.

var parent = function() {
 var name = "Mary"; // secret
}

Cada vez que lo llamas, la variable local "nombre" se crea y se le da el nombre "María". Y cada vez que la función sale, la variable se pierde y el nombre se olvida.

Como puede suponer, porque las variables se recrean cada vez que se llama a la función, y nadie más las conocerá, debe haber un lugar secreto donde se almacenan. Podría llamarse Cámara de los Secretos o pila o ámbito local, pero en realidad no importa. Sabemos que están ahí, en algún lugar, escondidos en la memoria.

Pero, en JavaScript hay una cosa muy especial que las funciones que se crean dentro de otras funciones, también pueden conocer las variables locales de sus padres y mantenerlas mientras vivan.

var parent = function() {
  var name = "Mary";
  var child = function(childName) {
    // I can also see that "name" is "Mary"
  }
}

Entonces, mientras estemos en la función principal, puede crear una o más funciones secundarias que compartan las variables secretas desde el lugar secreto.

Pero lo triste es que si el niño es también una variable privada de su función principal, también morirá cuando el padre termine, y los secretos morirán con ellos.

Para vivir, el niño tiene que irse antes de que sea demasiado tarde.

var parent = function() {
  var name = "Mary";
  var child = function(childName) {
    return "My name is " + childName  +", child of " + name; 
  }
  return child; // child leaves the parent ->
}
var child = parent(); // < - and here it is outside 

Y ahora, aunque Mary "ya no corre", su recuerdo no se pierde y su hija siempre recordará su nombre y otros secretos que compartieron durante su tiempo juntos.

Entonces, si llamas a la niña "Alice", ella responderá.

child("Alice") => "My name is Alice, child of Mary"

Eso es todo lo que hay que contar.





javascript arrays loops for-loop