O que o 'corpo de um for in do erro JSLint deve ser envolvido em uma instrução if' significa?

Eu usei JSLint em um arquivo JavaScript meu. Ele lançou o erro:

for( ind in evtListeners ) {

Problema na linha 41, caractere 9: o corpo de um for for deve ser envolvido em uma instrução if para filtrar propriedades indesejadas do protótipo.

O que isto significa?

Primeiro de tudo, nunca use um for inloop para enumerar sobre uma matriz. Nunca. Use bom e velho for(var i = 0; i<arr.length; i++).

A razão por trás disso é o seguinte: cada objeto em JavaScript tem um campo especial chamado prototype. Tudo o que você adicionar a esse campo estará acessível em todos os objetos desse tipo. Suponha que você deseje que todas as matrizes tenham uma nova função interessante chamada filter_0que filtrará os zeros.

Array.prototype.filter_0 = function() {
    var res = [];
    for (var i = 0; i < this.length; i++) {
        if (this[i] != 0) {
            res.push(this[i]);
        }
    }
    return res;
};

console.log([0, 5, 0, 3, 0, 1, 0].filter_0());
//prints [5,3,1]

Essa é uma maneira padrão de estender objetos e adicionar novos métodos. Muitas bibliotecas fazem isso. No entanto, vamos ver como for infunciona agora:

var listeners = ["a", "b", "c"];
for (o in listeners) {
    console.log(o);
}
//prints:
//  0
//  1
//  2
//  filter_0

Você vê? De repente, pensa que filter_0 é outro índice de matriz. Obviamente, não é realmente um índice numérico, mas for inenumera através de campos de objetos, não apenas índices numéricos. Então, agora estamos enumerando todos os índices numéricos e filter_0 . Mas filter_0não é um campo de nenhum objeto de matriz específico, todo objeto de matriz possui essa propriedade agora.

Felizmente, todos os objetos têm um hasOwnPropertymétodo que verifica se esse campo realmente pertence ao próprio objeto ou se é simplesmente herdado da cadeia de protótipos e, portanto, pertence a todos os objetos desse tipo.

for (o in listeners) {
    if (listeners.hasOwnProperty(o)) {
       console.log(o);
    }
}
 //prints:
 //  0
 //  1
 //  2

Note que embora este código funciona como esperado para arrays, você não deve nunca, nunca mais , o uso for ine for each inpara arrays. Lembre-se de que for inenumera os campos de um objeto, não os índices ou valores da matriz.

var listeners = ["a", "b", "c"];
listeners.happy = "Happy debugging";

for (o in listeners) {
    if (listeners.hasOwnProperty(o)) {
       console.log(o);
    }
}

 //prints:
 //  0
 //  1
 //  2
 //  happy

Douglas Crockford, autor de jslint, escreveu (e falou) sobre esse assunto muitas vezes. Há uma seção nesta página do site dele que cobre isso:

para declaração

A classe de instruções deve ter o seguinte formato:

for (initialization; condition; update) {
    statements
}

for (variable in object) {
    if (filter) {
        statements
    } 
}

A primeira forma deve ser usada com matrizes e com loops de um número predeterminável de iterações.

O segundo formulário deve ser usado com objetos. Esteja ciente de que os membros adicionados ao protótipo do objeto serão incluídos na enumeração. É aconselhável programar defensivamente usando o método hasOwnProperty para distinguir os membros verdadeiros do objeto:

for (variable in object) {
    if (object.hasOwnProperty(variable)) {
        statements
    } 
}

Crockford também tem uma série de vídeos no teatro YUI, onde ele fala sobre isso. A série de vídeos / palestras de Crockford sobre javascript é imperdível se você é levemente sério sobre javascript.

Ruim: (jsHint lançará um erro)

for (var name in item) {
    console.log(item[name]);
}

Boa:

for (var name in item) {
  if (item.hasOwnProperty(name)) {
    console.log(item[name]);
  }
}

A resposta da Vava está na marca. Se você usa jQuery, a $.each()função cuida disso, portanto, é mais seguro de usar.

$.each(evtListeners, function(index, elem) {
    // your code
});

@all - tudo no JavaScript é um objeto (), então declarações como "use isso apenas em objetos" são um pouco enganadoras. Além disso, o JavaScript não é fortemente digitado, de forma que 1 == "1" é verdadeiro (embora 1 === "1" não seja, Crockford é importante nisso). Quando se trata do conceito programático de matrizes em JS, a digitação é importante na definição.

@Brenton - Não há necessidade de ser um ditador de terminologia; "matriz associativa", "dicionário", "hash", "objeto", todos esses conceitos de programação se aplicam a uma estrutura em JS. É o nome (chave, índice) pares de valores, onde o valor pode ser qualquer outro objeto (cadeias também são objetos)

Então, new Array()é o mesmo que[]

new Object() é aproximadamente semelhante a {}

var myarray = [];

Cria uma estrutura que é uma matriz com a restrição de que todos os índices (também conhecidos como chaves) devem ser um número inteiro. Também permite a atribuição automática de novos índices via .push ()

var myarray = ["one","two","three"];

É realmente melhor tratado via for(initialization;condition;update){

Mas e quanto a:

var myarray = [];
myarray[100] = "foo";
myarray.push("bar");

Tente o seguinte:

var myarray = [], i;
myarray[100] = "foo";
myarray.push("bar");
myarray[150] = "baz";
myarray.push("qux");
alert(myarray.length);
for(i in myarray){
    if(myarray.hasOwnProperty(i)){  
        alert(i+" : "+myarray[i]);
    }
}

Talvez não seja o melhor uso de uma matriz, mas apenas uma ilustração de que as coisas nem sempre são claras.

Se você conhece suas chaves e, definitivamente, se elas não são números inteiros, sua única opção de estrutura como matriz é o objeto.

var i, myarray= {
   "first":"john",
   "last":"doe",
   100:"foo",
   150:"baz"
};
for(i in myarray){
    if(myarray.hasOwnProperty(i)){  
        alert(i+" : "+myarray[i]);
    }
}

Certamente é um pouco extremo dizer

... nunca use um loop for para enumerar sobre uma matriz. Nunca. Use bom e velho para (var i = 0; i <comprimento da arr.; I ++)

?

Vale destacar a seção no extrato de Douglas Crockford

... A segunda forma deve ser usada com objetos ...

Se você precisar de uma matriz associativa (também conhecida como hashtable / dictionary) em que as chaves sejam nomeadas em vez de indexadas numericamente, será necessário implementá-la como um objeto, por exemplo var myAssocArray = {key1: "value1", key2: "value2"...};.

Nesse caso, myAssocArray.lengthserá nulo (porque esse objeto não possui uma propriedade 'length') e você i < myAssocArray.lengthnão o levará muito longe. Além de proporcionar maior conveniência, eu esperaria que matrizes associativas ofereçam vantagens de desempenho em muitas situações, pois as chaves da matriz podem ser propriedades úteis (ou seja, propriedade ou nome do ID de um membro da matriz), o que significa que você não precisa iterar por um longo tempo. matriz avaliando repetidamente as instruções if para encontrar a entrada da matriz que você procura.

De qualquer forma, obrigado também pela explicação das mensagens de erro do JSLint, vou usar a verificação 'isOwnProperty' agora ao interagir através de minhas inúmeras matrizes associativas!

Isso significa que você deve filtrar as propriedades de evtListeners com o método hasOwnProperty .

Apenas para adicionar ao tópico de em / para / $. Each, adicionei um caso de teste jsperf para usar $ .each vs for em: http://jsperf.com/each-vs-for-in/2

Diferentes navegadores / versões lidam com isso de maneira diferente, mas parece que $ .each e diretamente para in são as opções mais baratas em termos de desempenho.

Se você estiver usando o for para iterar através de um array / objeto associativo, sabendo o que está procurando e ignorando tudo o mais, use $ .each se usar o jQuery ou apenas para o in (e depois uma pausa; alcançou o que você sabe que deveria ser o último elemento)

Se você estiver iterando através de uma matriz para executar algo com cada par de chaves, deve usar o método hasOwnProperty se NÃO usar o jQuery e usar $ .each se usar o jQuery.

Sempre use for(i=0;i<o.length;i++)se você não precisar de uma matriz associativa ... lol chrome executou 97% mais rápido do que um para dentro ou$.each