JS_javascript スキルの Array.prototype.indexOf を拡張することによって発生する問題のディスカッションと解決策

Array には、indexOf メソッドがないため、配列内の要素のインデックスを見つけるのは面倒ですが、呼び出しの便宜のために、Array.prototype.indexOf() がプロトタイプ プロトタイプを通じて拡張されており、より使いやすくなっています。 。しかし、配列を走査するときに、このカスタムのindexOfに問題がありました。

配列には、indexOf メソッドがないため、配列内の要素のインデックスを見つけるのが面倒になります。呼び出しの便宜のために、Array.prototype.indexOf() は、プロトタイプのプロトタイプによって拡張されています。より使いやすくなります。

コードをコピー コードは次のとおりです。

Array.prototype.indexOf = function(item) ) {
for (var i = 0; i if (this[i] == item)
return i;
}
return - 1;
}

使用する場合は、直接

コードをコピーしてください コードは次のように: >

var arr=[1,2,3,4,5];

varindex=arr.indexOf(1); //index==0


拡張後は、とても楽しくて使いやすく、調和のとれた光景です...

しかし、あるとき、配列要素を走査するときに for..in.. ループが使用され、それが別の問題を引き起こし、調和のとれた雰囲気を壊してしまいました。 。

コードをコピー コードは次のとおりです:

var a=["Zhang Fei", "関羽" ,"劉備","呂布"];

for(var p in a){
document.write(p "=" a[p] "
" );
}


当初はこの 4 人の名前を出力したかったのですが、何が出力されましたか?

実際の出力は次のとおりです:
//0=張飛
//1=関羽
//2=劉備
//3=呂布
//indexOf =function( item) { for (var i = 0; i 出力のindexOfは、それ自体で展開できますが、これは理解できます。結局のところ、for..inはオブジェクトのすべてのユーザー定義属性または配列のすべての要素を走査します。
では、Firefox を使用しないのはなぜでしょうか?
情報を確認したところ、
Array はすでに JavaScript バージョン 1.6 で Array.indexOf() をサポートしており、私が使用している Firefox はバージョン 3.5 で、既に JavaScript1.8 をサポートしていることに気付きました。方法。
IE に関しては、IE8 を使用していますが、JavaScript のバージョン 1.3 のみをサポートしています。
つまり、IE8 は、indexOf を「ユーザー定義属性」と見なしますが、Firefox は、それ自体がネイティブにサポートする固有の属性と見なします。
これは本当にそうなのでしょうか？
実験を行って、indexOf の名前を myIndexOf に変更して再試行すると、IE と Firefox の両方で myIndexOf が出力され、前の点が正しいことがわかります。
ここで別の問題が発生します。長い間、indexOf を拡張してきましたが、多くのプロジェクト コードですでにこのメソッドが使用されていますが、配列自体の要素を出力するには for..in を使用する必要があります。自分で延長したくないのですが、ロシアに着いたらどうすればいいですか？
幸いなことに、JavaScript には hasOwnProperty メソッドが用意されています。
その説明を見てください:
Object から派生したすべてのオブジェクトは hasOwnProperty メソッドを継承します。このメソッドは、in 演算子とは異なり、オブジェクトがそのオブジェクトの直接プロパティとして指定されたプロパティを持っているかどうかを判断するために使用できます。オブジェクトのプロトタイプチェーンをチェックダウンしません
説明を見ると、それが私たちが望んでいることです。
for...in.. で判断するだけです。

コードをコピーします コードは次のとおりです: if(a.hasOwnProperty(p)){

document.write(p "=" a[p] "
");

}


さらに、インターネットから取得した hasOwnProperty の使用例を添付します。

コードをコピー コードは次のとおりです。

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]);
}

查看浏览器支持javascript到哪个版本：

复制代码 代码如下: