JavaScript para… em vs para

Você acha que há uma grande diferença em ... em e para loops? Que tipo de "para" você prefere usar e por quê?

Digamos que temos uma matriz de matrizes associativas:

var myArray = [{'key': 'value'}, {'key': 'value1'}];

Para que possamos iterar:

for (var i = 0; i < myArray.length; i++)

E:

for (var i in myArray)

Não vejo grande diferença. Existem problemas de desempenho?

A escolha deve basear-se em qual idioma é melhor compreendido.

Uma matriz é iterada usando:

for (var i = 0; i < a.length; i++)
   //do stuff with a[i]

Um objeto usado como uma matriz associativa é iterado usando:

for (var key in o)
  //do stuff with o[key]

A menos que você tenha razões que abalem a terra, siga o padrão estabelecido de uso.

Douglas Crockford recomenda em JavaScript: The Good Parts (página 24) para evitar o uso da for indeclaração.

Se você usar o for inloop sobre nomes de propriedades em um objeto, os resultados não serão ordenados. Pior: você pode obter resultados inesperados; inclui membros herdados da cadeia de protótipos e o nome dos métodos.

Tudo, exceto as propriedades, pode ser filtrado com .hasOwnProperty. Este exemplo de código faz o que você provavelmente queria originalmente:

for (var name in obj) {
    if (Object.prototype.hasOwnProperty.call(obj, name)) {
        // DO STUFF
    }
}

FYI - Usuários do jQuery

O each(callback)método do jQuery usa for( ; ; )loop por padrão e será usado for( in ) apenas se o comprimento for undefined.

Portanto, eu diria que é seguro assumir a ordem correta ao usar esta função.

Exemplo :

$(['a','b','c']).each(function() {
    alert(this);
});
//Outputs "a" then "b" then "c"

A desvantagem de usar isso é que, se você estiver executando alguma lógica que não seja da interface do usuário, suas funções serão menos portáteis para outras estruturas. A each()função provavelmente é melhor reservada para uso com seletores jQuery e for( ; ; )pode ser aconselhável caso contrário.

existem diferenças de desempenho, dependendo do tipo de loop que você usa e em qual navegador.

Por exemplo:

for (var i = myArray.length-1; i >= 0; i--)

é quase duas vezes mais rápido em alguns navegadores do que:

for (var i = 0; i < myArray.length; i++)

No entanto, a menos que suas matrizes sejam ENORME ou você as repita constantemente, todas são rápidas o suficiente. Eu duvido seriamente que o loop de matriz seja um gargalo no seu projeto (ou em qualquer outro projeto)

Observe que o método Array.forEach nativo agora é amplamente suportado .

Resposta atualizada para a versão atual de 2012 de todos os principais navegadores - Chrome, Firefox, IE9, Safari e Opera suportam o array.forEach nativo do ES5.

A menos que você tenha algum motivo para oferecer suporte ao IE8 nativamente (tendo em mente que o ES5-shim ou o quadro Chrome pode ser fornecido a esses usuários, o que fornecerá um ambiente JS adequado), é mais fácil usar simplesmente a sintaxe adequada do idioma:

myArray.forEach(function(item, index) {
    console.log(item, index);
});

A documentação completa do array.forEach () está no MDN.

Os dois não são os mesmos quando a matriz é escassa.

var array = [0, 1, 2, , , 5];

for (var k in array) {
  // Not guaranteed by the language spec to iterate in order.
  alert(k);  // Outputs 0, 1, 2, 5.
  // Behavior when loop body adds to the array is unclear.
}

for (var i = 0; i < array.length; ++i) {
  // Iterates in order.
  // i is a number, not a string.
  alert(i);  // Outputs 0, 1, 2, 3, 4, 5
  // Behavior when loop body modifies array is clearer.
}

Usando o forEach para pular a cadeia de protótipos

Apenas um adendo rápido à resposta do @ nailer acima , usando forEach com Object.keys significa que você pode evitar a iteração na cadeia de protótipos sem precisar usar o hasOwnProperty.

var Base = function () {
    this.coming = "hey";
};

var Sub = function () {
    this.leaving = "bye";
};

Sub.prototype = new Base();
var tst = new Sub();

for (var i in tst) {
    console.log(tst.hasOwnProperty(i) + i + tst[i]);
}

Object.keys(tst).forEach(function (val) {
    console.log(val + tst[val]);
});

Tenho uma segunda opinião de que você deve escolher o método de iteração de acordo com sua necessidade. Eu sugiro que você nunca faça loop nativo Arraycom a for inestrutura. É muito mais lento e , como Chase Seibert apontou no momento atrás, não é compatível com o framework Prototype.

Há uma excelente referência em diferentes estilos de loop que você absolutamente deve observar se trabalhar com JavaScript . Não faça otimizações precoces, mas você deve guardar essas coisas em algum lugar na sua cabeça.

Eu usaria for inpara obter todas as propriedades de um objeto, o que é especialmente útil ao depurar seus scripts. Por exemplo, eu gosto de ter essa linha à mão quando eu explorar objetos desconhecidos:

l = ''; for (m in obj) { l += m + ' => ' + obj[m] + '\n' } console.log(l);

Ele despeja o conteúdo de todo o objeto (junto com os corpos dos métodos) no meu log do Firebug. Muito útil.

Aqui está algo que eu fiz.

function foreach(o, f) {
 for(var i = 0; i < o.length; i++) { // simple for loop
  f(o[i], i); // execute a function and make the obj, objIndex available
 }
}

é assim que você usaria,
isso funcionará em matrizes e objetos (como uma lista de elementos HTML)

foreach(o, function(obj, i) { // for each obj in o
  alert(obj); // obj
  alert(i); // obj index
  /*
    say if you were dealing with an html element may be you have a collection of divs
  */
  if(typeof obj == 'object') { 
   obj.style.marginLeft = '20px';
  }
});

Acabei de fazer isso, estou aberto a sugestões :)

Eu usaria os diferentes métodos com base em como eu queria fazer referência aos itens.

Use foreach se quiser apenas o item atual.

Use para se você precisar de um indexador para fazer comparações relativas. (Ou seja, como isso se compara ao item anterior / próximo?)

Eu nunca notei uma diferença de desempenho. Eu esperaria até ter um problema de desempenho antes de me preocupar com isso.

Com for (var i em myArray) você pode loop sobre objetos também, i irá conter o nome da chave e você pode acessar a propriedade via myArray [i] . Adicionalmente, quaisquer métodos que você terá adicionado ao objeto será incluído no circuito, também, ou seja, se você usar qualquer estrutura externa como jQuery ou protótipo, ou se você adicionar métodos para protótipos de objetos diretamente, em um ponto i irá apontar para esses métodos.

Cuidado!

Se você tiver várias tags de script e estiver pesquisando informações nos atributos da tag, por exemplo, precisará usar a propriedade .length com um loop for, porque não é uma matriz simples, mas um objeto HTMLCollection.

https://developer.mozilla.org/en/DOM/HTMLCollection

Se você usar a instrução foreach para (var i em yourList), ela retornará propriedades e métodos do HTMLCollection na maioria dos navegadores!

var scriptTags = document.getElementsByTagName("script");

for(var i = 0; i < scriptTags.length; i++)
alert(i); // Will print all your elements index (you can get src attribute value using scriptTags[i].attributes[0].value)

for(var i in scriptTags)
alert(i); // Will print "length", "item" and "namedItem" in addition to your elements!

Mesmo se getElementsByTagName devolver um NodeList, a maioria dos navegadores retornará uma HTMLCollection: https://developer.mozilla.org/en/DOM/document.getElementsByTagName

Para loops em matrizes não é compatível com o protótipo. Se você acha que pode precisar usar essa biblioteca no futuro, faria sentido manter loops.

http://www.prototypejs.org/api/array

Eu já vi problemas com o "para cada" usando objetos e protótipo e matrizes

meu entendimento é que o para cada um é para propriedades de objetos e não matrizes

Se você realmente deseja acelerar o seu código, e quanto a isso?

for( var i=0,j=null; j=array[i++]; foo(j) );

é meio que ter a lógica while dentro da instrução for e é menos redundante. O firefox também possui Array.forEach e Array.filter

Um código mais curto e melhor de acordo com jsperf é

keys  = Object.keys(obj);
for (var i = keys.length; i--;){
   value = obj[keys[i]];// or other action
}

Use o loop Array (). ForEach para aproveitar o paralelismo

for (;;) é para matrizes : [20,55,33]

for..in é para Objetos : {x: 20, y: 55: z: 33}

Seja cuidadoso!!! Estou usando o Chrome 22.0 no Mac OS e estou tendo problemas com o para cada sintaxe.

Não sei se este é um problema do navegador, um problema de javascript ou algum erro no código, mas é MUITO estranho. Fora do objeto, ele funciona perfeitamente.

var MyTest = {
    a:string = "a",
    b:string = "b"
};

myfunction = function(dicts) {
    for (var dict in dicts) {
        alert(dict);
        alert(typeof dict); // print 'string' (incorrect)
    }

    for (var i = 0; i < dicts.length; i++) {
        alert(dicts[i]);
        alert(typeof dicts[i]); // print 'object' (correct, it must be {abc: "xyz"})
    }
};

MyObj = function() {
    this.aaa = function() {
        myfunction([MyTest]);
    };
};
new MyObj().aaa(); // This does not work

myfunction([MyTest]); // This works

Há uma diferença importante entre os dois. O for-in itera sobre as propriedades de um objeto, portanto, quando o caso é uma matriz, ele não apenas itera sobre seus elementos, mas também sobre a função "remover" que possui.

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

//Output
0
1

for (var i in myArray) { 
    console.log(i) 
} 

// Output
0 
1 
remove

Você pode usar o for-in com um if(myArray.hasOwnProperty(i)). Ainda assim, ao iterar sobre matrizes, eu sempre prefiro evitar isso e apenas usar a instrução for (;;).

Embora os dois sejam muito parecidos, há uma pequena diferença:

var array = ["a", "b", "c"];
array["abc"] = 123;
console.log("Standard for loop:");
for (var index = 0; index < array.length; index++)
{
  console.log(" array[" + index + "] = " + array[index]); //Standard for loop
}

neste caso, a saída é:

PADRÃO PARA LOOP:

ARRAY [0] = A

ARRAY [1] = B

ARRAY [2] = C

console.log("For-in loop:");
for (var key in array)
{
  console.log(" array[" + key + "] = " + array[key]); //For-in loop output
}

enquanto neste caso a saída é:

LOOP FOR-IN:

ARRAY [1] = B

ARRAY [2] = C

ARRAY [10] = D

ARRAY [ABC] = 123

A instrução for in permite fazer um loop pelos nomes de todas as propriedades de um objeto. Infelizmente, ele também percorre todos os membros que foram herdados pela cadeia de protótipos. Isso tem o efeito colateral ruim de atender às funções do método quando o interesse está nos membros dos dados.