30

A título de exemplo, em PHP temos a função foreach() (Inglês) que nos permite executar determinado código por cada elemento encontrado numa matriz:

<?php
$arr = array(1, 2, 3, 4, 5, 6);

foreach ($arr as $value) {
  echo "acção para o valor " . $value;
}

// Saída:
// acção para o valor 1
// ...
?>

Recorrendo à mesma função, podemos percorrer a matriz e obter a chave e o respectivo valor respeitante a cada elemento encontrado:

<?php
$arr = array(
  "primeiro" => "John",
  "ultimo"   => "Doe"
);

foreach ($arr as $key => $value) {
  echo $key . ' nome: ' . $value . "<br>";
}

// Saída:
// primeiro nome: John
// ultimo nome: Doe
?>

Pergunta

Como posso realizar este tipo de operações com uma matriz em JavaScript ?

6 Respostas 6

30

Em primeiro lugar, as matrizes do PHP são diferentes das do JavaScript

Um exemplo de matriz tradicional seria:

var matriz = [1,2,3,4];

Já o que em PHP é uma matriz associativa, em JavaScript é um objeto:

var obj = {
    primeiro: 'John',
    ultimo: 'Doe'
};

Como disse o @utluiz, em JavaScript existe o for..in, que serve para iterar sobre as chaves de um objeto. Como arrays também são objetos, também é possível iterar sobre elas, mas isso não é recomendável devido a algumas características do for..in:

  1. O for..in itera sobre todas as chaves enumeráveis do objeto.
  2. O for..in também itera sobre todas as chaves de propriedades (enumeráveis) herdadas do protótipo do objeto.
  3. A especificação do JavaScript não exige uma ordem específica para as chaves percorridas pelo for..in. Diferentes browsers podem usar ordens diferentes e é possível que as chaves do vetor não sejam acessadas em ordem crescente.

Essas características podem trazer problemas, especialmente se você utiliza bibliotecas ou polyfills que modificam Array.prototype.

Portanto, não use for..in para iterar sobre uma matriz; use um for comum

var matriz = [1,2,3,4];
for(var i=0; i<matriz.length; i++) {
    console.log(i, matriz[i]); // i é o índice, matriz[i] é o valor
}

Se quiser algo um pouco mais próximo da versão PHP:

var matriz = [1,2,3,4];
for(var chave=0, valor; valor=matriz[chave], chave<matriz.length; chave++) {
    console.log(chave, valor); // chave é o índice, valor é o valor
}

Existem ainda outras alternativas, em browsers com suporte ao ECMAScript 5 (o que não inclui o IE8). Por exemplo, o forEach mencionado pelo Luiz Vieira:

var matriz = [1,2,3,4];
matriz.forEach(function(valor, chave){
    console.log(chave, valor);
});

Se o objetivo da iteração for criar uma nova matriz com transformações dos valores orignais, você pode usar o map:

var matriz = [1,2,3,4];
// Nova matriz onde cada valor é o dobro
var dobros = matriz.map(function(valor){
    return valor * 2;
});
console.log(dobros); // [2,4,6,8];

Se o objetivo for criar uma nova matriz com somente alguns dos valores orignais, você pode usar o filter:

var matriz = [1,2,3,4];
// Nova matriz só com valores pares
var pares = matriz.filter(function(valor){
    return valor % 2 == 0;
});
console.log(pares); // [2,4];

Nessa mesma linha, vale dar uma olhada nos métodos reduce, every e some.

Para iterar sobre objetos, aí sim use o for..in

var obj = {
    primeiro: 'John',
    ultimo: 'Doe'
};
for(var tipoNome in obj) {
    console.log(tipoNome, obj[tipoNome]);
}

Mas atenção: esse tipo de iteração pode incluir propriedades herdadas. Por exemplo:

function Cachorro(nome) {
    this.nome = nome;
}
Cachorro.prototype.latir = function() {
    console.log('au au!');    
};
var godofredo = new Cachorro('Godofredo');
for(var prop in godofredo) {
    console.log(prop); // loga 'latir' e 'nome'
}

Para evitar o problema, você pode fazer uma checagem com hasOwnProperty:

for(var prop in godofredo) {
    if(godofredo.hasOwnProperty(prop)) {
        console.log(prop); // loga somente 'nome'
    }
}    
1
  • Parabéns pela resposta! Muito didática e esclarecedora. (y)
    – ed1nh0
    2/10/2018 às 14:00
7

Via jQuery, por uma abordagem simples, você pode utilizar o método jQuery.each() que permite iterar sobre objetos/arrays separando-os por índice/valor

Exemplo:

$.each([ 'a', 'b', 'c' ], function( index, value ) {
    alert( index + ": " + value );
});

Referência: http://api.jquery.com/jquery.each/

7

Alternativa semelhante: for..in

Em Javascript existe uma versão do for que possui algumas semelhanças com o foreach do PHP. É o tipo de construção mais próxima, porém ele existe para iterar sobre propriedades de objetos e não necessariamente índices de vetores. Além disso, não é possível obter a chave e o valor automaticamente.

A sintaxe é:

for (<índice> in <vetor/objeto>)

Exemplo:

var array = [1, 2, 3, 4];
for (index in array) {
    var value = array[index];
    console.log("array[" + index + "] = " + value);
}

Exemplo funcional no jsfiddle.

Iterando sobre propriedades de objetos

Como mencionei, este tipo de loop não é direcionado exatamente para arrays, sendo útil principalmente para iterar sobre as propriedades de um objeto qualquer:

Exemplo:

var object = { nome: 'Luiz', idade: 29};
for (property in object) {
    var value = object[property];
    console.log("object[" + property + "] = " + value);
}

Exemplo funcional no jsfiddle.

Uma aplicação comum é simular um mapa ou dicionário de dados. Outro exemplo é um vetor esparso (que não contém todos os índices sequencialmente de 0 a n.

Atenção para possíveis problemas

Como mencionado em outras respostas e em comentários, o loop for...in pode resultar em efeitos colaterais indesejados.

Por exemplo, se uma biblioteca definir uma ou mais funções no prototype do objeto. Estas funções serão incluídas no laço for..in e seria necessário usar a função hasOwnProperty para ignorar essas funções "herdadas".

Além disso, não garantido que índices numéricos serão percorridos em alguma ordem.

Dica: evite mexer no prototype

Do meu ponto de vista, mexer no prototype de objetos comuns deveria ser evitado a todo custo, assim como bibliotecas que fazem tal uso.

Por exemplo, imagine que vamos usar um objeto como um mapa, atribuindo e recuperando dinamicamente atributos do mesmo. Ao percorrer as chaves desse mapa, terei que lembrar de sempre usar a função hasOwnProperty.

A questão é: deveríamos mesmo ter que se preocupar se que alguém injetou algum elemento "estranho" em nossos objetos? Eu acredito que não.

Na prática...

Embora o for..in seja sempre acusado de causar problemas, em minha experiência nunca tive dificuldades em usá-lo tanto em arrays quanto em objetos normais, sem o hasOwnProperty. Provavelmente isso se deve ao fato de nunca permitir código "estranho" injetando funções "mágicas" sem meu conhecimento.

Além disso, embora a ordem dos elementos não seja garantida pela especificação, também nunca presenciei em nenhum navegador índices sendo percorridos fora de ordem, pelo menos em arrays de verdade.

Veja o exemplo abaixo:

var array = new Array();

array.push("A");
array.push("B");
array.push("C");

delete array[1]
array[1] = 2;

for (i in array) {
    console.log(i)
}

Mesmo deletando um índice do meio do array e depois redefinindo-o, o resultado será 0, 1 e 2, nesta ordem. Veja o jsfiddle. Se alguém descobrir algum navegador que se comporte diferente, por favor, me avise.

Por outro lado, se não usar um array de verdade o resultado é diferente. Veja o exemplo abaixo:

var array = { }

array[0] = "A";
array[2] = "B";
array[1] = "C";

for (i in array) {
    console.log(i)
}

Veja o jsfiddle.

Surpreendentemente, o resultado no Chrome é 0, 1 e 2. No entanto, no Firefox e IE é 0, 2 e 1. Enfim, a não ser que você use um objeto como um vetor esparso, isto é, adicionando elementos maiores antes dos menores, não haveria problemas em usar o for..in.

Enfim, o mesmo cuidado para uso do for..in em arrays serve para qualquer objeto, então recomendações como "não use isso" simplesmente não fazem sentido. Mesmo que o prototype seja alterado, desde que eu use sempre o hasOwnProperty() e não me importe com a ordem dos elementos, não há problemas em usar este tipo de loop.

Considerações finais

De maneira geral, realmente é melhor evitar o for..in e optar pelo o for tradicional. Motivos:

  • Você pode vir a precisar de uma biblioteca que altere o prototype. É comum ouvir relatos de pessoas que acrescentam uma certa biblioteca Javascript e ela "quebra" sua implementação.
  • Evita ainda que outros desenvolvedores usem indevidamente o prototype e quebrem o código geral do sistema.
  • Permite que objetos simulem um array, definindo a propriedade length e atributos numéricos. Isto é muito útil para rotinas genéricas que recebem vetores. Veja o exemplo abaixo:

    var array = {
        0: "Primeiro",
        1: "Segundo",
        2: "Terceiro",
        length: 3
    };
    
    for (var i = 0; i < array.length; i++) {
        console.log('array[' + i + '] = ' + array[i]);
    }
    

Veja o jsfiddle.

2
  • 1
    Não use for-in para iterar vetores. Não há garantia de que os indices serão acessados em ordem crescente (que é o que a maioria dos programadores espera)
    – hugomg
    4/02/2014 às 4:13
  • 1
    @missingno Acho muito superficial esse tipo de afirmação. Eu gosto de dar opções para as pessoas e não simplesmente restringir o uso de um recurso só porque pode causar algum efeito colateral. Reformulei a resposta com uma análise mais profunda sobre a questão. Estou meio sem tempo, mas fique à vontade se tiver alguma observação ou crítica que cedo ou tarde eu passo para dar mais uma revisada. Abraço.
    – utluiz
    4/02/2014 às 14:17
4

Em adição à todas as respostas existentes, existe o for...of do ECMAScript 6 (ou seja, novo :/) que percorre valores de objetos incluindo uma propriedade especial Symbol.iterator (essa propriedade é um símbolo... e lembrando que símbolos não são enumeráveis!). Instâncias de Array, Map, Set, String e TypedArray, e o objeto arguments gerado por funções já são percorríveis, desde que tenham a propriedade especial Symbol.iterator.

Observação: só há uma desvantagem em usar o for... of. Ele não te deixa saber qual a índice do valor atual.

P.S.: as classes/interfaces citadas acima armazenam essa propriedade Symbol.iterator na própria prototype. Essa propriedade deve retornar uma função (se você ver no console, [][Symbol.iterator], irá se deparar com uma função nomeada 'values'), e essa mesma função deveria retornar um objeto. [][Symbol.iterator]() retorna uma instância nativa de ArrayIterator.

Exemplo de como percorrer uma Array com pares de chave e valor:

const pairs = [
    [ 'yum', 'yam' ],
    [ 'haha', true ]
];

for (let [k, v] of pairs) {
    console.log(k, v);
}

Exemplo percorrendo uma Array de forma comum:

for (let v of [ 1, 2, 3 ]) {
    console.log(v);
}

1

Esse exemplo (extraído dessa fonte original no SO(en)) utiliza a função forEach existente em objetos do tipo array a partir do ECMAScript5:

var a = ["a", "b", "c"];
a.forEach(function(entry) {
    console.log(entry);
});
-2

var i = -1; while(vetor[++i]){}

Testei no Chrome e funciona bem !

1
  • 3
    Se vetor[++i]tiver dentro um valor Booleano falso isso não vai funcionar...
    – Sergio
    12/09/2016 às 19:44

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .