Que signifie l'erreur JSLint «le corps d'un for in doit être enveloppé dans une instruction if»?

J'ai utilisé JSLint sur un de mes fichiers JavaScript. Il a jeté l'erreur:

for( ind in evtListeners ) {

Problème à la ligne 41, caractère 9: le corps d'un for in doit être encapsulé dans une instruction if pour filtrer les propriétés indésirables du prototype.

Qu'est-ce que ça veut dire?

Tout d'abord, n'utilisez jamais defor in boucle pour énumérer un tableau. Jamais. Utilisez du bon vieux for(var i = 0; i<arr.length; i++).

La raison derrière cela est la suivante: chaque objet en JavaScript a un champ spécial appelé prototype. Tout ce que vous ajoutez à ce champ sera accessible sur tous les objets de ce type. Supposons que vous vouliez que tous les tableaux aient une nouvelle fonction cool appelée filter_0qui filtrera les zéros.

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]

Il s'agit d'une méthode standard pour étendre des objets et ajouter de nouvelles méthodes. De nombreuses bibliothèques le font. Cependant, regardons comment for infonctionne maintenant:

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

Est-ce que tu vois? Il pense soudainement que filter_0 est un autre index de tableau. Bien sûr, ce n'est pas vraiment un index numérique, mais il for inénumère les champs d'objet, pas seulement les index numériques. Nous énumérons donc maintenant chaque index numérique et filter_0 . Mais filter_0n'est pas un champ d'un objet tableau particulier, chaque objet tableau a maintenant cette propriété.

Heureusement, tous les objets ont une hasOwnPropertyméthode qui vérifie si ce champ appartient vraiment à l'objet lui-même ou s'il est simplement hérité de la chaîne prototype et appartient donc à tous les objets de ce type.

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

Notez que bien que ce code fonctionne comme prévu pour les tableaux, vous ne devez jamais, jamais utiliser for inet for each inpour les tableaux. N'oubliez pas for inqu'énumère les champs d'un objet, pas les index de tableau ou les valeurs.

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, l'auteur de jslint a écrit (et parlé) à ce sujet à plusieurs reprises. Il y a une section sur cette page de son site Web qui couvre ceci:

pour la déclaration

Une classe d'instructions doit avoir la forme suivante:

for (initialization; condition; update) {
    statements
}

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

Le premier formulaire doit être utilisé avec des tableaux et avec des boucles d'un nombre prédéterminé d'itérations.

Le deuxième formulaire doit être utilisé avec des objets. N'oubliez pas que les membres ajoutés au prototype de l'objet seront inclus dans l'énumération. Il est sage de programmer de manière défensive en utilisant la méthode hasOwnProperty pour distinguer les vrais membres de l'objet:

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

Crockford a également une série de vidéos sur le théâtre YUI où il en parle. La série de vidéos / discussions sur javascript de Crockford est un must si vous êtes même un peu sérieux au sujet de javascript.

Mauvais: (jsHint générera une erreur)

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

Bien:

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

La réponse de Vava est dans le mille. Si vous utilisez jQuery, la $.each()fonction s'en charge, il est donc plus sûr de l'utiliser.

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

@all - tout en JavaScript est un objet (), donc les instructions comme "n'utiliser ceci que sur des objets" sont un peu trompeuses. De plus, JavaScript n'est pas fortement typé de sorte que 1 == "1" soit vrai (bien que 1 === "1" ne le soit pas, Crockford est très important à ce sujet). En ce qui concerne le concept progromatique de tableaux dans JS, le typage est important dans la définition.

@Brenton - Pas besoin d'être un dictateur terminologique; "tableau associatif", "dictionnaire", "hachage", "objet", ces concepts de programmation s'appliquent tous à une structure dans JS. Il s'agit de paires de valeurs de nom (clé, index), où la valeur peut être n'importe quel autre objet (les chaînes sont également des objets)

Donc, new Array()c'est la même chose que[]

new Object() est à peu près similaire à {}

var myarray = [];

Crée une structure qui est un tableau avec la restriction que tous les index (aka clés) doivent être un nombre entier. Il permet également l'attribution automatique de nouveaux index via .push ()

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

Est en effet mieux géré via for(initialization;condition;update){

Mais qu'en est-il:

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

Essaye ça:

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

Peut-être pas la meilleure utilisation d'un tableau, mais juste une illustration que les choses ne sont pas toujours claires.

Si vous connaissez vos clés, et certainement si ce ne sont pas des nombres entiers, votre seule option de structure de type tableau est l'objet.

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

C'est sûrement un peu extrême de dire

... n'utilisez jamais une boucle for in pour énumérer un tableau. Jamais. Utilisez bon vieux pour (var i = 0; i <arr.length; i ++)

?

Il convient de souligner la section de l'extrait de Douglas Crockford

... Le deuxième formulaire doit être utilisé avec des objets ...

Si vous avez besoin d'un tableau associatif (aka table de hachage / dictionnaire) où les clés sont nommées au lieu d'être indexées numériquement, vous devrez l'implémenter comme un objet, par exemple var myAssocArray = {key1: "value1", key2: "value2"...};.

Dans ce cas, le résultat myAssocArray.lengthsera nul (car cet objet n'a pas de propriété 'length'), et vous i < myAssocArray.lengthn'irez pas très loin. En plus de fournir une plus grande commodité, je m'attendrais à ce que les tableaux associatifs offrent des avantages de performances dans de nombreuses situations, car les clés de tableau peuvent être des propriétés utiles (c.-à-d. La propriété ou le nom d'ID d'un membre du tableau), ce qui signifie que vous n'avez pas à parcourir une longue tableau évaluant à plusieurs reprises si les instructions pour trouver l'entrée de tableau que vous recherchez.

Quoi qu'il en soit, merci également pour l'explication des messages d'erreur JSLint, j'utiliserai maintenant la vérification «isOwnProperty» lors de l'interaction via ma myriade de tableaux associatifs!

Cela signifie que vous devez filtrer les propriétés d'evtListeners avec la méthode hasOwnProperty .

Juste pour ajouter au sujet de for in / for / $. Each, j'ai ajouté un cas de test jsperf pour utiliser $ .each vs for in: http://jsperf.com/each-vs-for-in/2

Différents navigateurs / versions le gèrent différemment, mais il semble que $ .each et directement pour soient les options les moins chères en termes de performances.

Si vous utilisez for in pour parcourir un tableau / objet associatif, sachant ce que vous recherchez et ignorant tout le reste, utilisez $ .each si vous utilisez jQuery, ou simplement for in (puis une pause; une fois que vous avez atteint ce que vous savez devrait être le dernier élément)

Si vous parcourez un tableau pour effectuer quelque chose avec chaque paire de clés, utilisez la méthode hasOwnProperty si vous N'utilisez PAS jQuery et utilisez $ .each si vous utilisez jQuery.

Utilisez toujours for(i=0;i<o.length;i++)si vous n'avez pas besoin d'un tableau associatif ... lol chrome a effectué 97% plus rapidement qu'un for in ou$.each