The difference between for and for in in javascript, and why for in is not recommended

In

jsthere are two ways to traverse an array

var array=['a']
//标准的
for循环
for(var i=1;i<array.length;i++){
    alert(array[i])
}
//
foreach
循环
for(var i in array){
    alert(array[i])
}

Under normal circumstances the results of the above two ways of traversing an array are the same. First let’s talk about the first difference between the two

The i in the standard for loop is of type number, which represents the subscript of the array, but the i in the foreach loop represents that the key of the array is of type string. Because everything in js is object. Try it yourself alert(typeof i); This difference is a minor problem. Now that I add the following code, the above execution results will be different.

//扩展了js原生的Array
Array.prototype.test=function()
 
}

Try and see what the above code does. We found that the standard for loop still truly loops over the array, but at this time the foreach loop prints out the test method I just wrote. This is the biggest difference between for and foreach to traverse the array. If we use foreach to traverse the array in the project, suppose that one day someone accidentally extends the native Array class of js, or introduces an external js framework and also extends the native Array. . Then comes the problem.

Why not use for in statement?

Keywords: native Array class, extended Array class
The potential bug of using the for in statement to traverse array objects is: if the native Array class is modified by other js script libraries Prototype extension (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.
To give a simple example,

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

According to common sense, if Array is a native js class, the above statement should only execute the alert method once, and s is the 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 to traverse the array, but the worse thing is the prototype..."

As mentioned above, if you are using jqModal and also using prototype for other reasons, congratulations on your success. The conflict will cause jqModal's pop-up box to be unable to automatically close 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 the for var statement instead of for in.

The above is the detailed content of The difference between for and for in in javascript, and why for in is not recommended. For more information, please follow other related articles on the PHP Chinese website!