複数のブラウザで JavaScript for ループを使用する方法_JavaScript スキル

1. はじめに
JavaScript 言語にはブラウザーごとに若干の違いがありますが、DOM 操作の違いほど大きくはありません。ここで、「for ループ」の違いの 1 つを列挙します。 . そして、この違いを効果的に解決する方法を紹介します。

2. 問題の説明
次のテスト コード例 1 では、IE6 と Chrome の出力結果が一致しません。IE6 では、for ステートメント内のコードが実行されません。

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

//例 1:
alert("Prepare toString が for ループ内にあるかどうかをテストするには Enumerated out")
var forTest = { toString: 1 }
for (i in forTest) {
alert("toString はループアウトされています")//これはIE6では実行されませんが、Chromeで実行して結果値「1」を出力します
}

3. JavaScriptのオブジェクトに「toString」が含まれています、「valueOf」、「isPrototypeOf」、「propertyIsEnumerable」、「toLocaleString」、「hasOwnProperty」、「constructor」の 7 つの組み込みメソッドです。これら 7 つの組み込みメソッドは、for ステートメントを使用して列挙することはできません。ただし、IE6 と Chrome では、組み込みメソッド オーバーライドのサポートに一貫性がありません。 IE6: 組み込みのオーバーライド メソッドは使用できますが、FOR ループを列挙することはできません。 Chrome: 組み込みメソッドをオーバーライドでき、FOR ループはオーバーライドされた組み込みメソッドを列挙することもできます。
したがって、上記のテストコード例 1 の IE6 ブラウザーと Chrome ブラウザーの出力結果は矛盾しています。


4. 問題を解決します。

上記の問題を解決するには、以下が必要です。 ユーザーが使用するブラウザーがオーバーライドされた組み込みメソッドを列挙するための FOR ループをサポートしているかどうかすべてのブラウザーで FOR ループを使用してオーバーライドされた組み込みメソッドを列挙できるように、非互換性の問題を適切に解決する方法
(解決コード例 2)

コードをコピー コードは次のとおりです。 //例 2 ：

enumerables = true,

forTest = { toString: 1 }
for (i in forTest) {
enumerables =
}
if (enumerables) {//これらはすべて Object オブジェクトのプロパティです。一部のブラウザ (ie6) の for ループはこれらのプロパティを走査しないため、プロパティ
enumerables = ['hasOwnProperty', 'valueOf', ' isPrototypeOf', 'propertyIsEnumerable',
'toLocaleString', 'toString', 'constructor'];
}

// enumerables が null の場合、ブラウザは組み込みメソッドをサポートします。列挙オーバーライド。それ以外の場合は、次のコードに示すように、組み込みメソッドを新しいオブジェクトに強制的にコピーすることしかできません。
/**
* すべての属性を指定されたオブジェクトにコピーします
* @param {Object} マージするオブジェクト オブジェクト
* @param {Object} config ソース属性
* @return {Object} マージされたオブジェクトを返します
*/
function apply(object, config) {
if (object && config && typeof config === 'object') {
var i, j, k ;
// ここでオブジェクトをコピーする通常の方法
for (i in config) {
object[i] = config[i];
}
// 複数のブラウザーと互換性あり-in プロパティは新しいオブジェクトにコピーできます。
if (enumerables) {
for (j = enumerables.length; j--;) {
k = enumerables[j]; .hasOwnProperty(k)) {//オブジェクトに特定の属性があるかどうかを判断します。このプロパティは文字列として指定する必要があります。 (例: config.hasOwnProperty("toString"))
object[k] = config[k];
}
}
}
}
オブジェクトを返します。 > };


次に、結果を検証するためにいくつかのテスト コードを作成します (テスト コードの例 3)

コードをコピーします

コードは次のとおりです: //例 3: var a={}; for (i in forTest) {

a[i] = forTest[ i];

}
alert(a.toString) //ie6 でコピーが失敗した場合は、上書きした値ではなく「ネイティブ コード」のみを入力できます。 ({},forTest)
alert(b.toString)//apply 関数を使用すると、IE6 と Chrome で出力される値は、期待されるカバレッジ値 "1"



5. 概要

作者は、IE6 の for ステートメントがこれらの 7 つの組み込み関数を無視リストにマークしているため、それらがどのように上書きされても for に列挙できず、Chrome はインテリジェントに列挙できるのではないかと推測しています。上書きされた組み込み関数をコピーします。
ソリューション コード例 2 の apply 関数を使用して、複数のブラウザーでの for ループの不一致の問題を解決します。

著者は新人で、ブログを書くことはほとんどありません。私の見解が間違っていたり、事務的な間違いがあった場合は、専門家に修正を依頼してください。
6. よくある質問

Q: まずブラウザーのバージョンが IE6 かどうかを確認してから、対応する列挙スキームを設定してはどうでしょうか?
A: 私の個人的な見解では、市場にそれほど多くのブラウザがあるかどうかはわかりません (PC 用のブラウザだけでなく、モバイル ブラウザにも N 個のブラウザがあり、ブラウザの新しいバージョンがどのようなものになるかはわかりません) for ステートメントにはどのようなメカニズムが使用されますか?そこで、まず for ステートメントのメカニズムをテストしてみましょう。