Javascript Tips: Don't use the for in statement to traverse the array_jquery

First, why not use the for in statement

jqModal is a jquery plug-in that many people have probably used. Inside the jqModal source code, there is a function called hs, which has a nested loop as follows,

Copy code The code is as follows:

for(var i in {jqmShow:1,jqmHide: 1})
for(var s in this[i])
if(H[this[i][s]])
H[this[i][s]].w[i] (this);
return F;
}

The target of the first for in traversal is an anonymous object, no problem.
The second for in traverses and confirms that this[i] is an array object (Array) according to the context.
Many JS pioneers have warned us not to use the for in statement to traverse array objects. In addition to performance, unexpected bugs may occur. If you don't listen to the words of your ancestors, you will suffer the consequences before your eyes.
Today I will take jqModal as an example to explain when this kind of bug will appear, so as to take it as a warning.
Second, the problem reappears
Keywords: native Array class, extended Array class
The potential bug of the for in statement to traverse the array object is: if the native Array class is used by other The js script library has been prototype extended (for example, adding an additional toJSON method, namely Array.prototype.toJSON=xxxx), then the logic of using for in to traverse the expanded Array object will be different from the logic of traversing the native Array object.
For a simple example,

Copy the code The code is as follows:

var x=[1];
for(var s in x){
alert(s);
};

As usual, if Array is a native js class, The above statement should only execute the alert method once, and s is index 0 of the array. However, if the Array class is extended with an additional toJSON method, then the above statement will execute alert twice, the first time s is index 0, and the second time s is the method name 'toJSON'.

If the logic of the code you design is based on the native Array class, and one day your colleague references a third-party JS library on the page, and this library happens to extend the Array class, the result will be difficult Imagine that it is very likely that the original code logic will no longer hold.

Regarding this kind of library that extends native JS classes, a well-known one is prototype.js, which extends many methods to the Array class such as toJSON, each, etc. I now understand why the founder of jquery was so angry about prototype (many people use jquery and prototype on the same page for special reasons. There will be many unexpected conflict problems that cannot be solved by just a noConflict. ). In addition, if the author of jqModal understands my article, he will probably complain about the prototype and say: "It is unwise for me to use for in for array traversal, but the worse thing is the prototype..."

As mentioned above, if you are using jqModal and at the same time using prototype for other reasons, congratulations, you have been tricked. The conflict will cause jqModal's pop-up box to be unable to be automatically closed using the button set by closeClass under ie6 and ie7. Trace the debugging code and you will find that the exception is in the for in loop of the hs method mentioned at the beginning of this article. . .
3. Solve the problem
When traversing the array, use for var statement instead of for in.