ホームページ  >  記事  >  ウェブフロントエンド  >  Javascript isArray 配列型検出機能_JavaScriptスキル

Javascript isArray 配列型検出機能_JavaScriptスキル

WBOY
WBOYオリジナル
2016-05-16 18:45:011337ブラウズ

1. 演算子の種類。 Function、String、Number、Unknown タイプのオブジェクトには問題ありませんが、Array オブジェクトには使用できません:
Js コード

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

alert(typeof null); // "object"
alert(typeof []); // " object"

2.instanceof 演算子。この演算子は、オブジェクトのプロトタイプ チェーンがコンストラクターのプロトタイプ オブジェクトを指しているかどうかを検出します。これで、配列検出の問題を解決できるはずです。
Js コード
コードをコピーします コードは次のとおりです:

var arr = []
alert(arr instanceof Array); // true

3. オブジェクトのコンストラクター プロパティ。 instanceof に加えて、各オブジェクトのコンストラクター プロパティを使用してその型を決定することもできるので、次のようにすることができます。
Js コード
コードをコピー コードは次のとおりです:

var arr = [];
alert(arr.constructor == Array); // true

最後の 2 つの解決策は完璧であるように見えますが、本当にそうなのでしょうか?予期しない状況が発生し、複数のフレーム間を行き来すると、次のようなイライラする問題が発生します。
Js コード
コードをコピー コードは次のとおりです:

var iframe = document.createElement('iframe');
document.body.appendChild(iframe);
xArray = window.framesフレーム.length-1].Array;
var arr = new xArray(1,2,3); // [1,2,3]
// おっと!
arr 配列のインスタンス; // false
// おっと!
arr.constructor === Array; // false

各 iframe には独自の実行環境があるため、フレーム間でインスタンス化されたオブジェクトは相互にプロトタイプ チェーンを共有しません。上記の検出コードは失敗します。どうすればいいですか? ?そうです、JavaScript は動的言語です。「アヒルのように歩き、アヒルのように鳴く場合は、同じ理由でアヒルとして扱うことができます。」というユニークな機能が役立つかもしれません。このメソッドは、Prototype フレームワークなど、一部の人々によって使用されています。
Js コード
を見てみましょう。 コードをコピー コードは次のとおりです:

isArray: function(object) {
return object != null && typeof object == " object" &&
'splice' in object && 'join' in object;

isArray: "object、配列固有の splice メソッドは 2 つありますか? "
object: "はい、はい、持っています! "
isArray: "わかりました、たとえふりをしていても、あなたは配列です、囧..."
Js コード

コードをコピー コードは次のとおりです:
vartricster = { splice: 1, join: 2 };
Object.isArray(trickster); // 偽装は成功しました。

はい、この解決策は少しぎこちなく感じられます。「splice」プロパティと「join」プロパティを持つオブジェクトはすべて成功します。このテスト!どうしよう、どうしよう、どうしよう? ?心配しないでください。実際、必要なのは、オブジェクトの実際のタイプを取得でき、フレーム間で使用できるメソッドです。いいえ、注意深い外国人が ECMA262 標準を読んでこれを発見しました (ところで、私も読んだのですが、なぜこの使用法を見つけられなかったのでしょう、囧):
ECMA-262 は

Object.prototype.toString( ) toString メソッドが呼び出されると、次の手順が実行されます。
1. このオブジェクトの [[Class]] プロパティを取得します。
2. 3 つの文字列「[object "、Result (1)、および "]」を連結して文字列値を計算します。 . 結果を返す (2)


上記の仕様は、Object.prototype.toString の動作を定義しています。まず、オブジェクトの内部プロパティ [[Class]] を取得し、これに基づいて結果として「[object Array]」に似た文字列を返します。 property (ECMA 標準を読んだことがある人は、[[]] が言語の内部で使用され、外部から直接アクセスできない「内部属性」と呼ばれる属性を表すために使用されることを知っているはずです)。このメソッドを呼び出しと組み合わせて使用​​すると、任意のオブジェクトの内部属性 [[Class]] を取得し、型検出を文字列比較に変換して目的を達成できます。まず ECMA 標準の配列の説明を見てみましょう:
ECMA-262 は
コードをコピーコードは次のとおりです:

new Array([ item0[, item1 [,…]]])
新しく構築されたオブジェクトの [[Class]] プロパティは「Array」に設定されます

この機能を利用するには、次のように前の isArray 関数を書き換えます:
Js コード
Copy code コードは次のとおりです。

function isArray(o) {
return Object.prototype.toString.call(o) === '[ object Array]';
}

呼び出しは、toString の this 参照を検出対象のオブジェクトに変更し、このオブジェクトの文字列表現を返し、この文字列が '[object] であるかどうかを比較します。 Array]' を使用して、 Array のインスタンスであるかどうかを判断します。もしかしたら、なぜ直接 o.toString() を使用しないのかと疑問に思われるかもしれません。まあ、Array は Object を継承していますが、toString メソッドも持ちますが、このメソッドは書き換えられて要件を満たさなくなる可能性があります。また、Object.prototype は虎の尻であり、あえて触ろうとする人はほとんどいません。ある程度の「純度」を保証できます:)
以前のソリューションとは異なり、この方法はクロスフレームオブジェクト構築の問題を非常にうまく解決します。テスト後、主要なブラウザの互換性も非常に優れているため、安心してご利用いただけます。良いニュースとしては、jQuery、Base2 などの多くのフレームワークが、このメソッドを使用して、配列、正規表現などの特定の種類の特別なオブジェクトを、自分で作成することなく実装することを計画していることです。
声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。