JSのArray.prototype.indexOf拡張による問題と解決策_基礎知識

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

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

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

を返します。 }
-1 を返します。 }

を使用する場合に直接

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

var arr=[1,2,3,4,5]; var インデックス=arr.indexOf(1); //インデックス==0
;

拡張後は非常に快適で使いやすく、調和のとれたシーンを作り出します...

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

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

var a=["張飛","関羽","劉備","呂布"]; for(var p in a){

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



本来はこの4人の名前を出力したかったのですが、何が出力されたのでしょうか？

実際の出力は次のとおりです:

コードをコピーします

コードは次のとおりです: //0=張飛 //1=関羽

//2=劉備

//3=呂布
//indexOf=function(item) { for (var i = 0; i


名前を入力するだけでなく、独自の拡張メソッド IndexOf も出力します。しかし、奇妙なことに、Firefox には 4 人の名前しか含まれていないのです。

出力のindexOfは、それ自体で展開できますが、これは理解できます。結局のところ、for..inはオブジェクトのすべてのユーザー定義属性または配列のすべての要素を走査します。

では、Firefox を使用しないのはなぜでしょうか?

後で情報を確認して知りましたが、

Array はすでに JavaScript バージョン 1.6 で Array.indexOf() をサポートしており、私が使用している Firefox はバージョン 3.5 で、すでに JavaScript 1.8 をサポートしています。IndexOf は Array 自体の固有メソッドです。

IE に関しては、IE8 を使用していますが、JavaScript のバージョン 1.3 のみをサポートしています。

つまり、IE8 は、indexOf を「ユーザー定義属性」と見なしますが、Firefox は、それ自体がネイティブにサポートする固有の属性と見なします。

これは本当にそうなのでしょうか？

実験を行って、indexOf の名前を myIndexOf に変更して再試行すると、IE と Firefox の両方で myIndexOf が出力され、前の点が正しいことがわかります。

ここで別の問題が発生します。長い間、indexOf を拡張してきましたが、多くのプロジェクト コードですでにこのメソッドが使用されていますが、配列自体の要素を出力するには for..in を使用する必要があります。自分で延長したくないのですが、ロシアに着いたらどうすればいいですか？

幸いなことに、JavaScript には hasOwnProperty メソッドが用意されています。

その説明を見てください:

コードをコピーします

コードは次のとおりです: Object から派生したすべてのオブジェクトは hasOwnProperty メソッドを継承します。このメソッドは、オブジェクトがそのオブジェクトの直接プロパティとして指定されたプロパティを持っているかどうかを判断するために使用できます。このメソッドは、in 演算子とは異なり、オブジェクトのプロトタイプ チェーン をチェックしません。

説明を見ると、それが私たちが望んでいることです。

for...in... で判断するだけでOKです

コードをコピーします

コードは次のとおりです: if(a.hasOwnProperty(p)){ document.write(p "=" a[p] "
"); }

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

コードをコピー

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

関数 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))
      継承 = "ローカル"; 
   それ以外
      継承 = "継承"; 
   document.writeln(プロパティ ": " 継承 ": "
      オブジェクト[プロパティ]); 
}

查看浏览器サポートjavascriptto哪个バージョン：

复制代码代码如下:

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
http://www.w3.org/1999/xhtml">



<スクリプト言語="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
');