Array does not have an indexOf method, so it is more troublesome to find the index of an element in an array. In order to facilitate calling, Array.prototype.indexOf() is extended through the prototype prototype, which is more convenient to use. However, this custom indexOf has problems when it traversing the array.
The code copy is as follows:
Array.prototype.indexOf = function(item) {
for (var i = 0; i < this.length; i++) {
if (this[i] == item)
return i;
}
return -1;
}
When using it, it is straightforward
The code copy is as follows:
var arr=[1,2,3,4,5];
var index=arr.indexOf(1); //index==0
After expansion, it is very refreshing and convenient to use, and it is a harmonious scene...
But when one time iterates over the array elements, using the for..in. loop caused other problems and broke the harmonious atmosphere.
The code copy is as follows:
var a=["Zhang Fei","Guan Yu","Liu Bei","Lu Bu"];
for(var p in a){
document.write(p+"="+a[p]+"<br/>");
}
I originally wanted to output the names of these four people, but what was the result?
The output is actually:
The code copy is as follows:
//0=Zhang Fei
//1=Guan Yu
//2=Liu Bei
//3=Lu Bu
//indexOf=function(item) { for (var i = 0; i < this.length; i++) { if (this[i] == item) return i; } return -1; }
In addition to typing out the name, it also outputs its own extended method indexOf, but what is crazy is that firefox is "normal", with only four people's names. Why is this happening?
Output indexOf, which is extended by itself, can be understood. After all, for..in is to iterate through all user-defined properties of an object or all elements of an array.
So why doesn't firefox?
After checking the information, I realized that
Array already supports Array.indexOf() in javascript 1.6 version, while the firefox I use is version 3.5, which already supports javascript 1.8. indexOf is an inherent method of Array itself.
As for IE, even if I use IE8, it only supports JavaScript 1.3 version.
Therefore, IE8 believes that indexOf is a "user-defined attribute", while firefox believes that it is an inherent attribute supported by its own native support.
Is this really the case?
Do an experiment, change indexOf to myIndexOf, and try again. As a result, both IE and firefox output myIndexOf, proving that the previous point is correct.
Then another question comes. I have expanded indexOf for a long time. Now many project codes have been using this method. Now I have to use for..in to output elements of the array itself. Don't extend it to the Russian method myself. What should I do?
Fortunately, javascript provides the hasOwnProperty method.
Take a look at its description:
The code copy is as follows:
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
Judging from the description, it is what we want.
Just make a judgment in for...in...
The code copy is as follows:
if(a.hasOwnProperty(p)){
document.write(p+"="+a[p]+"<br/>");
}
In addition, an example of hasOwnProperty usage is attached, which comes from the Internet:
The code copy 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 = "Inheritance";
document.writeln(property+": "+inheritance+": "
+object[property]);
}
Check which version of JavaScript is supported by the browser:
The code copy 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/>");
//Browsers that support JavaScript 1.0 can execute this script
document.write('This browser supports JavaScript1.0<br/>');
</script>
<script language="JavaScript1.1">
//Browsers that support JavaScript 1.1 can execute this script
document.write('This browser supports JavaScript1.1<br/>');
</script>
<script language="JavaScript1.2">
//Browsers that support JavaScript 1.2 can execute this script
document.write('This browser supports JavaScript1.2<br/>');
</script>
<script language="JavaScript1.3">
//Browsers that support JavaScript 1.3 can execute this script
document.write('This browser supports JavaScript1.3<br/>');
</script>
<script language="JavaScript1.4">
//Browsers that support JavaScript 1.4 can execute this script
document.write('This browser supports JavaScript1.4<br/>');
</script>
<script language="JavaScript1.5">
//Browsers that support JavaScript 1.5 can execute this script
document.write('This browser supports JavaScript1.5<br/>');
</script>
<script language="JavaScript1.6">
//Browsers that support JavaScript 1.6 can execute this script
document.write('This browser supports JavaScript1.6<br/>');
</script>
<script language="JavaScript1.7">
//Browsers that support JavaScript 1.7 can execute this script
document.write('This browser supports JavaScript1.7<br/>');
</script>
<script language="JavaScript1.8">
//Browsers that support JavaScript 1.8 can execute this script
document.write('This browser supports JavaScript1.8<br/>');
</script>
<script language="JavaScript1.9">
//Browsers that support JavaScript 1.9 can execute this script
document.write('This browser supports JavaScript1.9<br/>');
</script>
</body>
</html>