Home > Web Front-end > JS Tutorial > Discussion and solutions to problems caused by extending Array.prototype.indexOf for JS_javascript skills

Discussion and solutions to problems caused by extending Array.prototype.indexOf for JS_javascript skills

WBOY
Release: 2016-05-16 17:35:40
Original
1012 people have browsed it

Array does not have an indexOf method, so it is troublesome to find the index of an element in an array. For the convenience of calling, Array.prototype.indexOf() is extended through the prototype prototype, which makes it more convenient to use. But there was a problem with this custom indexOf when traversing the array.

Array does not have an indexOf method, which makes it more troublesome to find the index of an element in an array. For the convenience of calling, Array.prototype.indexOf() is extended through the prototype prototype, which makes it more convenient to use. .

Copy code The 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;
}

When using it, directly
Copy the code The code is as follows: >
var arr=[1,2,3,4,5];
var index=arr.indexOf(1); //index==0


After expansion , it’s very fun and convenient to use, and it’s a harmonious scene...
But one time when traversing array elements, a for..in.. loop was used, which caused other problems and broke the harmonious atmosphere.


var a=["Zhang Fei","Guan Yu" ,"Liu Bei","Lu Bu"];
for(var p in a){
document.write(p "=" a[p] "
");
}


I originally wanted to output the names of these four people, but what was output?
The output is actually:
//0=Zhang Fei
//1=Guan Yu
//2=Liu Bei
//3=Lü 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 the crazy thing is that Firefox is "normal" and only has the names of four people. Why is this?
Output indexOf, which can be expanded by itself, which is understandable. After all, for..in traverses all user-defined attributes of an object or all elements of an array.
So why not firefox?
After checking the information, I realized that
Array already supports Array.indexOf() in javascript version 1.6, and the firefox I use is version 3.5, which already supports javascript1.8. IndexOf is inherent in Array itself. method.
As for IE, even though I am using IE8, it only supports version 1.3 of JavaScript.
So IE8 considers indexOf to be a "user-defined attribute", while Firefox considers it to be an inherent attribute supported by itself natively.
Is this really the case?
Do an experiment, rename indexOf to myIndexOf, and try again. As a result, both IE and firefox output myIndexOf, which proves that the previous point is correct.
Then here comes another problem. I have extended indexOf for a long time. Now many project codes are already using this method, but now I have to use for..in to output the elements of the array itself. I don’t want to extend it myself. What should I do if I get to Russia?
Fortunately, javascript provides the hasOwnProperty method.
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
Looking at the description, it is what we want.
Just make a judgment in for...in..


if(a.hasOwnProperty(p)){
document.write(p "=" a[p] "
");
}


In addition, attached hasOwnProperty usage examples, sourced from the Internet:

Copy code The code is as follows:

関数 Book(タイトル、著者) {
this.title = タイトル;
this.author = 著者;
}
Book.prototype.price = 9.99;
Object.prototype.copyright = "herongyang.com";
var myBook = new Book("JavaScript チュートリアル", "Herong Yang");
// 基本プロトタイプ レベルで組み込みプロパティをダンプします。
document.writeln("/nObject.prototype の組み込みプロパティ:");
dumpProperty(Object.prototype, "コンストラクター");
dumpProperty(Object.prototype, "hasOwnProperty");
dumpProperty(Object.prototype, "isPrototypeOf");
dumpProperty(Object.prototype, "toString");
dumpProperty(Object.prototype, "valueOf");
dumpProperty(Object.prototype, "著作権");
// プロトタイプレベルで組み込みプロパティをダンプします
document.writeln("/n==================/nBook.prototype の組み込みプロパティ:");
dumpProperty(Book.prototype, "コンストラクター");
dumpProperty(Book.prototype, "hasOwnProperty");
dumpProperty(Book.prototype, "isPrototypeOf");
dumpProperty(Book.prototype, "toString");
dumpProperty(Book.prototype, "valueOf");
dumpProperty(Book.prototype, "著作権");
// オブジェクト レベルでの組み込みプロパティのダンプ
document.writeln("/n==================/nmyBook の組み込みプロパティ:" );
dumpProperty(myBook, "コンストラクター");
dumpProperty(myBook, "hasOwnProperty");
dumpProperty(myBook, "isPrototypeOf");
dumpProperty(myBook, "toString");
dumpProperty(myBook, "valueOf");
dumpProperty(myBook, "著作権");
function dumpProperty(object, property) {
var 継承;
if (object.hasOwnProperty(property))
inheritance = "ローカル";
else
inheritance = "継承";
document.writeln(プロパティ ": " 継承 ": "
オブジェクト[プロパティ]);
}

查看浏览器サポートjavascriptto哪个バージョン:
复制代代码如下:





浏览器の JavaScript バージョン本サポート测试


<スクリプト言語="JavaScript">
//document.write("您的浏览器型:" navigator.appName "
");
//document.write("浏览器バージョン:" navigator.appVersion "
");
//JavaScript1.0 をサポートする浏览器の才能够実行该
document.write('该浏览器サポートJavaScript1.0
');

<スクリプト言語="JavaScript1.1">
//JavaScript1.1 をサポートする浏览器の才能够実行该
document.write('该浏览器サポートJavaScript1.1
');

<スクリプト言語="JavaScript1.2">
//JavaScript1.2 をサポートする浏览器の才能够実行该
document.write('该浏览器サポートJavaScript1.2
');

<スクリプト言語="JavaScript1.3">
//JavaScript1.3 をサポートする浏览器の才能够実行该
document.write('该浏览器サポートJavaScript1.3
');

<スクリプト言語="JavaScript1.4">
//JavaScript1.4 をサポートする浏览器才能够実行该
document.write('该浏览器サポートJavaScript1.4
');

<スクリプト言語="JavaScript1.5">
//JavaScript1.5 をサポートする浏览器の才能够実行该
document.write('该浏览器サポートJavaScript1.5
');

<スクリプト言語="JavaScript1.6">
//JavaScript1.6 をサポートする浏览器の才能够実行该
document.write('该浏览器サポートJavaScript1.6
');

<スクリプト言語="JavaScript1.7">
//JavaScript1.7 をサポートする浏览器才能够実行该
document.write('该浏览器サポートJavaScript1.7
');

<スクリプト言語="JavaScript1.8">
//JavaScript 1.8 をサポートする浏览器才能够実行该脚本
document.write('该浏览器サポートJavaScript1.8
');

<スクリプト言語="JavaScript1.9">
//JavaScript1.9 をサポートする浏览器才能够実行该
document.write('该浏览器サポートJavaScript1.9
');



Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template