Explore and solve problems caused by extension of Array. prototype. indexOf for JS

Array does not have the indexOf method. In this way, it is troublesome to search for the index of an element in an Array. For the convenience of calling, Array is extended through prototype. prototype. indexOf (), which makes it easier to use. However, this custom indexOf encountered a problem when traversing the array.

Array does not have the indexOf method. In this way, it is troublesome to search for the index of an element in an Array. For the convenience of calling, Array is extended through prototype. prototype. indexOf (), which makes it easier to use.
Copy codeThe Code is as follows:
Array. prototype. indexOf = function (item ){
For (var I = 0; I <this. length; I ++ ){
If (this [I] = item)
Return I;
}
Return-1;
}

Directly
Copy codeThe Code is as follows:
Var arr = [1, 2, 4, 5];
Var index = arr. indexOf (1); // index = 0

After expansion, it is very easy to use and a harmonious scene...
However, when an array element is traversed, the loop for... in causes other problems and breaks the harmonious atmosphere.
Copy codeThe Code is as follows:
Var a = ["Zhang Fei", "Guan Yu", "Liu Bei", "Lu Bu"];
For (var p in ){
Document. write (p + "=" + a [p] + "<br/> ");
}

I wanted to output the names of these four people. What is the output?
The output is:
// 0 = Zhang Fei
// 1 = Guan Yu
// 2 = Liu Bei
// 3 = lub
// IndexOf = function (item) {for (var I = 0; I <this. length; I ++) {if (this [I] = item) return I;} return-1 ;}
In addition to the name, you can also output your own extension method indexOf. But what's crazy is that firefox is "normal" and there are only four people's names. Why?
The output indexOf is self-extended and understandable. After all, for .. in traverses all user-defined attributes of an object or all elements of an array.
Why not firefox?
Later I checked the information to understand,
Array in javascript1.6 already supports Array. indexOf (), while firefox I use is version 3.5. It already supports javascript1.8, and indexOf is an inherent method of its Array.
IE, even if I use IE8, supports javascript1.3.
Therefore, IE8 regards indexOf as a "user-defined attribute", while firefox regards it as an inherent attribute of its native support.
Is that true?
Make an experiment, rename indexOf myIndexOf, and try again. Both IE and firefox output myIndexOf, proving that the previous view is correct.
So there is another problem. I have extended indexOf for a long time. Now many project codes are using this method, but now I have to use .. in outputs the elements of the array. What should I do if I don't want to extend it to the Russian method?
Fortunately, javascript provides the hasOwnProperty method.
Let's take a look at its description:
Every object descended from Object inherits the hasOwnProperty method. this method can be used to determine whether an object has the specified property as a direct property of that object; unlike the in operator, this method does not check down the object's prototype chain
The description is what we want.
Make a judgment in for... in... and it will be OK.
Copy codeThe Code is as follows:
If (a. hasOwnProperty (p )){
Document. write (p + "=" + a [p] + "<br/> ");
}

In addition, the hasOwnProperty usage example is attached, which is from the Internet:
Copy codeThe Code is as follows:
Function Book (title, author ){
This. title = title;
This. author = author;
}
Book. prototype. price = 9.99;
Object. prototype. copyright = "herongyang.com ";
Var myBook = new Book ("JavaScript Tutorials", "Herong Yang ");
// Dumping built-in properties at the base prototype level
Document. writeln ("/nObject. prototype's built-in properties :");
DumpProperty (Object. prototype, "constructor ");
DumpProperty (Object. prototype, "hasOwnProperty ");
DumpProperty (Object. prototype, "isPrototypeOf ");
DumpProperty (Object. prototype, "toString ");
DumpProperty (Object. prototype, "valueOf ");
DumpProperty (Object. prototype, "copyright ");
// Dumping built-in properties at the my prototype level
Document. writeln ("/n =========================/nBook. prototype's built-in properties :");
DumpProperty (Book. prototype, "constructor ");
DumpProperty (Book. prototype, "hasOwnProperty ");
DumpProperty (Book. prototype, "isPrototypeOf ");
DumpProperty (Book. prototype, "toString ");
DumpProperty (Book. prototype, "valueOf ");
DumpProperty (Book. prototype, "copyright ");
// Dumping built-in properties at the object level
Document. writeln ("/n ===========================/nmyBook's built-in properties :");
DumpProperty (myBook, "constructor ");
DumpProperty (myBook, "hasOwnProperty ");
DumpProperty (myBook, "isPrototypeOf ");
DumpProperty (myBook, "toString ");
DumpProperty (myBook, "valueOf ");
DumpProperty (myBook, "copyright ");
Function dumpProperty (object, property ){
Var inheritance;
If (object. hasOwnProperty (property ))
Inheritance = "Local ";
Else
Inheritance = "Inherited ";
Document. writeln (property + ":" + inheritance + ":"
+ Object [property]);
}

Check which version of the browser supports javascript:
Copy codeThe Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> the JavaScript version of the browser supports testing. </title>
</Head>
<Body>
<Script language = "JavaScript">
// Document. write ("your browser type:" + navigator. appName + "<br/> ");
// Document. write ("browser version:" + navigator. appVersion + "<br/> ");
// This script can be executed only in browsers that support JavaScript1.0.
Document. write ('The browser supports JavaScript1.0 <br/> ');
</Script>
<Script language = "JavaScript1.1">
// This script can be executed only in browsers that support JavaScript1.1.
Document. write ('The browser supports JavaScript1.1 <br/> ');
</Script>
<Script language = "JavaScript1.2">
// This script can be executed only in browsers that support JavaScript1.2.
Document. write ('The browser supports JavaScript1.2 <br/> ');
</Script>
<Script language = "JavaScript1.3">
// The script can be executed only in browsers that support JavaScript1.3.
Document. write ('The browser supports JavaScript1.3 <br/> ');
</Script>
<Script language = "JavaScript1.4">
// This script can be executed only in browsers that support JavaScript1.4.
Document. write ('The browser supports JavaScript1.4 <br/> ');
</Script>
<Script language = "JavaScript1.5">
// This script can be executed only in browsers that support JavaScript1.5.
Document. write ('The browser supports JavaScript1.5 <br/> ');
</Script>
<Script language = "JavaScript1.6">
// Supports JavaScript1.6 to execute the script.
Document. write ('The browser supports JavaScript1.6 <br/> ');
</Script>
<Script language = "JavaScript1.7">
// This script can be executed only in browsers that support JavaScript1.7.
Document. write ('The browser supports JavaScript1.7 <br/> ');
</Script>
<Script language = "JavaScript1.8">
// The script can be executed in a browser that supports JavaScript 1.8.
Document. write ('The browser supports JavaScript1.8 <br/> ');
</Script>
<Script language = "JavaScript1.9">
// Supports JavaScript1.9 to execute the script.
Document. write ('The browser supports JavaScript1.9 <br/> ');
</Script>
</Body>
</Html>