Usar um laço sequencial for:

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

@zipcodeman sugere o uso da declaração for...in, mas para iterar arrays for-in deve ser evitado, essa declaração é feita para enumerar propriedades do objecto.

Não deve ser usado para objectos do tipo matriz porque:

• a ordem de iteração não é garantida, os índices de matriz não podem ser visitados em ordem numérica.
• propriedades herdadas também são enumeradas.

A segundo ponto é que ele pode lhe dar um monte de problemas, por exemplo, se você estender o objeto Array.prototype para incluir um método lá, essa propriedade também será enumerada.

Por exemplo:

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

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

O código acima vai alertar, "a", "b", "c" e "foo!".

A declaração for-in Como eu disse antes está lá para enumerar propriedades do objecto, por exemplo:

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

No exemplo acima o método hasOwnProperty permite enumerar apenas propriedades próprias , é isso, apenas as propriedades que o objeto possui fisicamente, sem propriedades herdadas.

Eu recomendaria que lesse o seguinte artigo:

• Enumeração VS Iteração

Sim, mas só se a sua implementação incluir o for...of recurso introduzido em ECMAScript 2015 (o lançamento" Harmony").

Funciona assim:

// REQUIRES ECMASCRIPT 2015+
var s, myStringArray = ["Hello", "World"];
for (s of myStringArray) {
  // ... do something with s ...
}

Ou melhor ainda, uma vez que o ECMAScript 2015 também fornece variáveis em bloco via let e const:

// REQUIRES ECMASCRIPT 2015+
const myStringArray = ["Hello", "World"];
for (const s of myStringArray) {
  // ... do something with s ...
}
// s is no longer defined here

Muitos desenvolvedores de JavaScript ainda estão trabalhando em um ambiente que ainda não está lá, no entanto - especialmente se escrever código para correr em navegadores web, onde os desenvolvedores do site muitas vezes não se pode ter certeza que navegador / Versão seus clientes estarão usando.

Se você pode assumir que o interpretador de JavaScript está em conformidade com a edição anterior da especificação ECMAScript (que exclui, por exemplo, versões do Internet Explorer antes de 9), então você pode usar o método {[[9]} iterator em vez de um loop. Nesse caso, você passa uma função para ser chamada em cada item da Matriz:

var myStringArray = [ "Hello", "World" ];
myStringArray.forEach( function(s) { 
     // ... do something with s ...
} );

var i, s, myStringArray = [ "Hello", "World" ], len = myStringArray.length;
for (i=0; i<len; ++i) {
  if (i in myStringArray) {
    s = myStringArray[i];
    // ... do something with s ...
  }
}

Atribuir o valor do comprimento à variável local (em oposição a incluir a expressão completa myStringArray.length na condição de laço) pode fazer uma diferença significativa no desempenho, uma vez que salta uma pesquisa de propriedade de cada vez através; usando o rinoceronte na minha máquina, o aumento de velocidade é de 43%.

Tu irá ver muitas vezes o caching de comprimento feito na cláusula de inicialização do loop, assim:

var i, len, myStringArray = [ "Hello", "World" ];
for (len = myStringArray.length, i=0; i<len; ++i) {

O for...in a sintaxe mencionada por outros é para looping sobre as propriedades de um objeto; uma vez que um Array em JavaScript é apenas um objeto com nomes de propriedades numéricas (e uma propriedade automaticamente atualizada length), Você pode teoricamente loop sobre um Array com ele. Mas o problema é que ele não se restringe aos valores da propriedade numérica (lembre-se que mesmo os métodos são realmente apenas propriedades cujo valor é um fechamento), nem iterate sobre aqueles em ordem numérica. Portanto, o for...in a sintaxe deve Não ser usada para fazer looping através de Arrays.

Você pode usar map, que é uma técnica de programação funcional que também está disponível em outros idiomas como Python e Haskell.

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

A sintaxe geral é:

array.map(func)

Em geral func levaria um parâmetro, que é um item da matriz. Mas no caso do JavaScript, ele pode tomar um segundo parâmetro que é o índice do item, e um terceiro parâmetro que é o próprio array.

O valor de retorno de array.map é outra matriz, então você pode usá - lo assim:

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

E agora x é [10,20,30,40].

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

new_list = my_list.map(item_processor);

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

Excepto que não tens o new_list.

Em JavaScript não é aconselhável fazer um loop através de um Array com um for-in loop, mas é melhor usar um for loop como:

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

Também está optimizado ("cache" o comprimento do array). Se você gostaria de saber mais, leia meu post sobre o assunto .

For (var s of myStringArray) {{

Maioria das outras respostas estão certas, mas eles não mencionar (como esta escrito) que Script ECMA 6 2015 está trazendo um novo mecanismo para o fazer iteração, o for..of loop.

Esta nova sintaxe é a forma mais elegante de iterar um array em javascript( desde que você não precise do Índice de iteração), mas ainda não é amplamente suportado por navegador.

Funciona actualmente com o Firefox 13+, O Chrome 37+ e não funciona nativamente com outros navegadores (ver compatibilidade do navegador abaixo). Felizmente temos Compiladores JS (como Babel ) que nos permitem usar recursos da próxima geração hoje.

Também funciona no Node (testei-o na versão 0.12.0).

Iterar uma matriz

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

Iterar uma série de objectos

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

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

Iterando a gerador:

(exemplo 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;
  }
}

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

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

}

Você pode não precisar de todos eles, mas eles podem ser muito úteis, ou seria se cada navegador suportá-los.

Mozilla Labs publicou os algoritmos que eles eWebKit usam, para que você possa adicioná-los você mesmo.

O filtro devolve uma série de itens que satisfazem alguma condição ou ensaio.

Cada devolve verdadeiro se todos os membros do array passam no teste.

Algum devolve verdadeiro se algum passar no teste.

ForEach executa uma função em cada membro do array e não devolve nada.

O Map é como o forEach, mas devolve um array dos resultados da operação para cada elemento.

Todos estes métodos assumem uma função para o seu primeiro argumento e têm um segundo argumento opcional, que é um objecto cujo âmbito pretende impor aos membros da matriz como eles passam pela função.

Index of and lastIndexOf find the appropriate position of the first or last element that matches its argument exactly.

(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;
})();

Usa o laço while...

var i=0, item, items = ['one','two','three'];
while(item = items[i++]){
    console.log(item);
}

E para a ordem inversa, um laço ainda mais eficiente

var items = ['one','two','three'], i = items.length;
while(i--){
    console.log(items[i]);
}

Registos: 'três', 'dois','um'

Ou o laço clássico for

var items = ['one','two','three']
for(var i=0, l = items.length; i < l; i++){
    console.log(items[i]);
}

Referência: http://www.sitepoint.com/google-closure-how-not-to-write-javascript/

Intro

Desde o meu tempo na faculdade, programei em Java, JavaScript, Pascal, ABAP , PHP, Progress 4GL, C/C++ e possivelmente em algumas outras línguas que não consigo pensar agora.

Um tradicional for-loop

Um laço tradicional for tem três componentes:

1. a inicialização: executada antes do bloco de aparência ser executado pela primeira vez
2. a condição: verifica uma condição sempre antes do bloco de loop ser executado, e sai do loop se for falso
3. o pensamento seguinte: realizado todas as vezes após o bloco de laço ser executado {[[69]}

Estes três componentes estão separados um do outro por um ; simbolo. O conteúdo para cada um destes três componentes é opcional, o que significa que o seguinte é o laço mais mínimo possível for:

for (;;) {
    // Do stuff
}

Claro que terá de incluir um if(condition === true) { break; } ou um if(condition === true) { return; } algures dentro desse for-loop para que ele pare de correr.

Normalmente, porém, a inicialização é usada para declarar um índice, a condição é usada para comparar esse índice com um valor mínimo ou máximo, e o pensamento posterior é usado para aumentar o índice:

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

Usando um laço tradicional for para circular através de uma matriz

A forma tradicional de circular através de uma matriz, é esta:

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

Ou, se preferir voltar para trás, faça isto:

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

Existem, no entanto, muitas variações possíveis, como por exemplo este:

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

... ou este ...

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

... ou este:

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

O que funcionar melhor é em grande parte uma questão de gosto pessoal e do caso de uso específico que está a implementar.

Note que cada uma destas variações é suportada por todos os navegadores, incluindo os muito antigos!

A while loop

Uma alternativa a um laço for é um laço while. Para circular através de uma matriz, você pode fazer isso:

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

Como os loops tradicionais for, while os loops são suportados até pelo mais velho dos navegadores.

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

For...in e for...of

Em JavaScript, você também pode fazer isto:

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

Isto deve ser usado com cuidado, no entanto, uma vez que não se comporta como um laço tradicional {[[18]} em todos os casos, e existem potenciais efeitos secundários que precisam ser considerados. Veja por que está usando "for...in" com a iteração da matriz é uma má ideia? para mais detalhes.

Como um alternativa a for...in, há agora também para for...of. O exemplo seguinte mostra a diferença entre um laço for...of e um laço 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
}

Além disso, você precisa considerar que nenhuma versão do Internet Explorer suporta for...of (Borda 12+ não) e que for...in requer, no mínimo, o Internet Explorer 10.

Array.prototype.forEach()

Uma alternativa a for-loops é Array.prototype.forEach(), que usa a seguinte sintaxe:

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

Array.prototype.forEach() é suportado por todos os navegadores modernos, bem como Internet Explorer 9 e mais tarde.

jQuery.each(), no jQuery:

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

_.each(), em sublinhado.js:

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

_.forEach(), em Lodash.js:

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

Se quiser uma forma mais precisa de escrever um loop rápido e pode iterar ao contrário:

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

Isto tem o benefício de cache o comprimento (semelhante a for (var i=0, len=myArray.length; i<len; ++i) e ao contrário de for (var i=0; i<myArray.length; ++i)), sendo menos caracteres para digitar.

Há mesmo algumas vezes em que você deve iterar ao contrário, como quando iterando sobre um live NodeList onde você planeja em Remover itens do DOM durante a iteração.

Há uma maneira de o fazer onde você tem muito pouco escopo implícito no seu loop e acabar com variáveis extras.

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

Ou se realmente queres obter a identificação e ter um laço realmente clássico 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
}

Existem várias maneiras de fazer loop através de array em JavaScript.

Ciclo Genérico:

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

ForEach do ES5:

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

JQuery.cada:

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

Dê uma olhada isto para informações detalhadas ou você também pode verificar MDN para looping através de uma matriz em JavaScript e usando a verificação jQuery jQuery para cada.

Recomendo vivamente que se faça uso do sublinhado .biblioteca js. Ele fornece - lhe várias funções que você pode usar para iterar sobre arrays/coleções.

Por exemplo:

_.each([1, 2, 3], function(num){ alert(num); });
=> alerts each number in turn...

Laço de matriz:

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

Circuito de objectos:

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

Alguns usam casos de looping através de um array em a maneira de programação funcional em JavaScript:

1. Basta fazer um loop através de um array

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

2. Verificar se algum dos elementos de uma matriz passa num ensaio

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 para um novo matriz

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

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

4. Somar uma determinada propriedade e calcular a sua média

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. Criar um novo array baseado no original, mas sem modificá-lo

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. Conte o número de cada categoria

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. Obter um subconjunto de uma matriz com base em critérios particulares

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

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

Nota: O filtro() o método cria um novo array com todos os elementos que passam no teste implementado pela função fornecida.

8. Ordenar uma 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. Encontrar um elemento numa 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);

A Matriz.prototipo.o método find () devolve o valor do primeiro elemento da lista que satisfaz os testes fornecidos funcao.

Referências

• matriz.prototipo.alguns()
• matriz.prototipo.forEach()
• matriz.prototipo.mapa()
• matriz.prototipo.filtro()
• matriz.prototipo.Ordenar()
• espalhar a sintaxe
• matriz.prototipo.procurar()

Sim, você pode fazer o mesmo em JavaScript usando loop, mas não limitado a isso, muitas maneiras de fazer loop sobre arrays em JavaScrip, imagine que você tem este array abaixo e você gostaria de fazer um loop sobre ele:

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

Estas são as soluções:

1) para o ciclo

For loop is a common way looping through arrays in JavaScript, but no considered as the fastest solutions for large arrays:

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

2) ciclo

Durante o ciclo considerado como a maneira mais rápida de fazer loop através de longas arrays, mas geralmente menos usado no JavaScript:

let i=0;

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

3) faça enquanto
Faça enquanto faz a mesma coisa com alguma diferença de sintaxe abaixo:

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

Estas são as principais maneiras de fazer loops javascript, mas há poucas maneiras de fazer isso.

Também usamos for in loop para fazer loop sobre objectos em javascript.

Olha também para map(), filter(), reduce() funções etc em Array em JavaScript. Eles podem fazer coisas muito mais rápido e melhor do que usar while e for.

Este é um bom artigo se você gosta de aprender mais sobre as funções async sobre arrays em JavaScript.

A programação funcional tem vindo a causar um grande impacto no o mundo do desenvolvimento hoje em dia. E por uma boa razão: funcional as técnicas podem ajudá-lo a escrever um código mais declarativo que é mais fácil de entenda de relance, refactor e teste. Uma das pedras angulares de a programação funcional é o seu uso especial de listas e operações listadas. E essas coisas são exactamente o que ... parece que são: matrizes de coisas, e as coisas que você faz com elas. Mas a mentalidade funcional trata-os de forma um pouco diferente de TI. é de esperar. Este artigo vai dar uma olhada no que eu gosto de chamar de "grande" três " list operations: map, filter, and reduce. A embrulhar a tua cabeça em torno destas três funções é um passo importante para ser capaz de para escrever código funcional limpo, e abre as portas para o vastamente técnicas poderosas de programação funcional e reativa. Também significa que nunca mais terás de escrever um laço for.

Leia mais> aqui:

Se está a usar a biblioteca jQuery, considere usar http://api.jquery.com/jQuery.each/

Da documentação:

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

Devolve: Objecto

Designação das mercadorias: uma função iteradora genérica, que pode ser usada para imutavelmente iterate sobre ambos os objetos e arrays. Arrays e conjuntos semelhantes objetos com uma propriedade de comprimento(como os argumentos de uma função objeto) sao iterated by numeric index, from 0 to length-1. Outros objectos são iterated via their named properties.

A função $.each() não é a mesma que $(selector).each(), que é costumava iterar, exclusivamente, sobre um objecto jQuery. O $.each() função pode ser usada para iterar sobre qualquer coleção, Se é um mapa (objeto JavaScript) ou um array. No caso de uma matriz, o a resposta é passada através de um índice de array e um valor de array correspondente cada tempo. (O valor também pode ser acessado através da palavra-chave this, mas O Javascript irá sempre envolver o valor this como um Object mesmo que seja uma cadeia simples ou valor numérico.) O método devolve o seu primeiro argumento, o objecto que foi iterado.

Eu ainda não vi esta variação, que eu pessoalmente gosto mais:

Dá-se uma matriz:

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

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

Ver este JsFiddle demonstrando que: http://jsfiddle.net/prvzk/

Isto só funciona para arrays que não são esparsos. Significa que existe realmente um valor em cada índice na matriz. No entanto, descobri que na prática eu quase nunca uso arrays esparsos em Forum... Em tais casos, é geralmente muito mais fácil usar um objeto como um mapa/hashtable. Se você tiver um array esparso, e quiser fazer um loop sobre 0 .. length-1, you need the for (var i=0; i

Também, como o CMS menciona em um comentário abaixo, você só pode usar isso em arrays que não contêm quaisquer valores falsificados. A lista de cadeias de caracteres do exemplo funciona, mas se você tiver strings vazias, ou números que são 0 ou NaN, etc. o laço vai quebrar prematuramente. Mais uma vez, na prática, isso quase nunca é um problema para mim, mas é algo a ter em mente, o que faz com que este loop para pensar antes de usá-lo... Isso pode desqualificá-lo para algumas pessoas:)

for (String item : someArray) {
}

A maneira mais elegante e 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 estava errado)

Comparar métodos para fazer looping através de um conjunto de 100000 itens e fazer uma operação mínima com o novo valor de cada vez.

• http://jsben.ch/#/BQhED

Preparação:

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

Ensaios:

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

Existe um método para iterar apenas as propriedades do próprio objecto, não incluindo as do protótipo:

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

Mas ainda assim irá iterar sobre propriedades definidas sob medida.

Em javascript qualquer propriedade personalizada poderia ser atribuída a qualquer objeto, incluindo array.

Se alguém quiser iterar sobre uma matriz esparsa, for (var i = 0; i < array.length; i++) if (i in array) ou array.forEach com es5shim deve ser usado.

A abordagem optimizada é cache O comprimento do array e usando um único padrão var inicializando todas as variáveis com uma única palavra-chave var.

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

Se a ordem de iteração não importa do que você deve tentar o laço invertido, é mais rápido à medida que reduz o teste de Estado de sobrecarga e decremento está em uma declaração:

var i,myStringArray = ["item1","item2"];
for (i =  myStringArray.length; i--) {
    alert(myStringArray[i]);
}

Ou melhor e mais limpo para usar durante o ciclo:

var myStringArray = ["item1","item2"],i = myStringArray.length;
while(i--) {
   // do something with fruits[i]
}

Em JavaScript, existem tantas soluções para colocar em loop um array.

O código abaixo é popular

/** 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()

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

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

Em uma consola de navegador, você pode ver algo como "element1", "element2", etc., impresso.

Https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

var numbers = [1,11,22,33,44,55,66,77,88,99,111];
var sum = 0;
numbers.forEach(function(n){
  sum += n;
});

Usando um estilo C regular para o loop funciona na maioria dos casos, é apenas importante lembrar que tudo dentro do loop compartilha seu escopo com o resto do seu programa, o { } não cria um novo escopo.

Daí:

var sum = 0;
var numbers = [1,11,22,33,44,55,66,77,88,99,111];

for(var i = 0; i<numbers.length; ++i){ 
  sum += numbers[i];
}

alert(i);

Irá produzir " 11 " - que pode ou não ser o que você quer.

A trabalhar no exemplo jsFiddle: https://jsfiddle.net/workingClassHacker/pxpv2dh5/7/

Se alguém estiver interessado no lado do desempenho dos múltiplos mecanismos disponíveis para iterações de matriz , preparei os seguintes testes JSPerf:

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

Resultados:

O iterador tradicional for() é de longe o método mais rápido, especialmente quando usado com o Comprimento da matriz Cache.

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

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

Os Métodos Array.prototype.forEach() e Array.prototype.map() são as aproximações mais lentas., provavelmente como consequência da chamada de função

Por exemplo, usei numa consola do Firefox:

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

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

Se quiser usar o jQuery, tem um bom exemplo na sua documentação:

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

Não é 100% idêntico, mas semelhante:

   var myStringArray = ['Hello', 'World']; // array uses [] not {}
    for (var i in myStringArray) {
        console.log(i + ' -> ' + myStringArray[i]); // i is the index/key, not the item
    }

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