ホームページ ウェブフロントエンド jsチュートリアル JS における Object メソッドと Aarry メソッドの区別のまとめ

JS における Object メソッドと Aarry メソッドの区別のまとめ

Feb 28, 2017 pm 02:18 PM

1. よくある問題:

JSでオブジェクトの型を判定する場合、通常typeofが使われるのですが、このとき問題となるのは、typeof()が配列を識別する際にオブジェクトを返すため、JSで判定することです

。オブジェクトが配列であるかどうかには、いくつかの特別な処理方法が必要です。私がまとめた 6 つの処理方法を以下に紹介します。

2. 単刀直入に

開発中にオブジェクトが配列であるかどうかを判断するには、次の関数を使用することをお勧めします:

function isArray(obj){
  if(Array.isArray){
    return Array.isArray(obj);
  }else{
   return Object.prototype.toString.call(obj)==="[object Array]";
  }
}
ログイン後にコピー


上記の関数は、熱心な人にとって便利です問題を解決するには、試験官があなたに関する包括的な知識を必要とする可能性があるため、以下で 6 つの方法について詳しく説明します。

(1) 方法 1: toString メソッドを使用します

toString() メソッドを呼び出して変数を変換してみます。これは、その型を表す文字列です。このメソッドは実数の配列に対して実行可能です。パラメータ オブジェクトが文字列に変換され、[object Arguments] が返されると、変換は失敗します。さらに、数値の長さの属性を含むオブジェクト クラスの場合も変換は失敗します。

メソッドは次のとおりです:

nbsp;html>

 
 <title>Array的判断方法</title>
 <meta>
 <script>
	function isArrayOne(arr){
		return <span style="color:#cc0000;">Object.prototype.toString.call(arr) === "[object Array]";
	}
	var obj = {"k1":"v1"};
	var arr = [1,2];
	console.log("对象的结果:"+isArrayOne(obj));
	console.log("数组的结果:"+isArrayOne(arr));
 </script>
 
 
 
 
ログイン後にコピー

結果は図に示すようになります:

注: 「==」の代わりに「===」を使用することをお勧めします。 、そのほうが効率が良いからです。

JS における Object メソッドと Aarry メソッドの区別のまとめ(2) 方法 2: isArray を通じて:

JavaScript 1.8.5 (ECMAScript 5) を使用し、この関数がサポートされていれば、変数名 .isArray() でこの目的を達成できます。実際、isArray は

方法 1カプセル化が使用されます。

使用方法は非常に簡単です:

Array.isArray(obj); //objは検出されるオブジェクトです

tru​​eまたはfalseを返します、trueの場合は配列です

(3) 方法3:

instanceof 演算子の判断を使用します。注:instanceof 演算子の左側は子オブジェクト (テスト対象のオブジェクト)、右側は親コンストラクター (ここでは Array)、

つまり子です。親コンストラクターのオブジェクトのインスタンス

instance: インスタンス: すべて new で構築されます。 function() によって作成されたオブジェクトは、コンストラクターのインスタンスと呼ばれます。私は長い間混乱していたので、コードを直接見ることをお勧めします。

nbsp;html>

 
 <meta>
 <meta>
 <meta>
 <meta>
 <meta>
 <title>Document</title>
 <script>
	var obj = {"k1":"v1"};
	var arr = [1,2];
	console.log("Instanceof处理对象的结果:"+(obj instanceof Array));
	console.log("Instanceof处理数组的结果:"+(arr instanceof Array));
 </script>
 
 
 
 
ログイン後にコピー

実行結果は以下の通りです:

(4) isPrototypeOf() 関数を使用します

原則: オブジェクトが配列のプロトタイプであるかどうか (または、直接配列だけでなくプロトタイプチェーン内にあるかどうかを検出します)親オブジェクトだけでなく、プロトタイプ チェーン全体のすべての親オブジェクトも対象となります)

使用方法:parent.isPrototypeOf (child) は、親が子のプロトタイプであるかどうかを検出します

JS における Object メソッドと Aarry メソッドの区別のまとめ isPrototypeOf によって実装される関数に注意してください。 () 関数は instantcof 演算子と非常によく似ています。

具体的なコード:

Array.prototype.isPrototypeOf(arr) //true は配列を意味し、false は配列ではありません

(5) コンストラクターを使用します

具体的なコード:

nbsp;html>

 
 <meta>
 <meta>
 <meta>
 <meta>
 <meta>
 <title>Document</title>
 <script>
	var obj = {&#39;k&#39;:&#39;v&#39;};
	var t1 = new Array(1);
	var t2 = t1;
	console.log(obj.constructor == Array);
	console.log(t1.constructor == Array);
	console.log(t2.constructor == Array);
 </script>
 
 
	
 
ログイン後にコピー

結果は次のとおりです


(6) typeof (オブジェクト) + 型名を使用して判定を結合します:

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

nbsp;html>

 
 <meta>
 <meta>
 <meta>
 <meta>
 <meta>
 <title>Document</title>
 <script>
	function isArrayFour(arr){
		if(typeof(arr)==="object"){
			if(arr.concat){
				return "This is Array";
			}else{
				return "This Not Array";
			}
		}
	}
	var arr = [1];
	var obj = {&#39;k&#39;:&#39;v&#39;};
	console.log(typeof(arr));
	console.log(typeof(obj));
	console.log(isArrayFour(arr));
	console.log(isArrayFour(obj));
 </script>
 
 
 
 
ログイン後にコピー
JS における Object メソッドと Aarry メソッドの区別のまとめ

結果は次のとおりです:

このメソッドには実際には限界があります。

この属性がオブジェクト内で誤って定義されたらどうなるでしょうか?

JS で Object と Aarry を区別する 6 つの方法の上記のまとめは、編集者が共有したすべての内容です。参考にしていただければ幸いです。また、PHP 中国語 Web サイトをサポートしていただければ幸いです。

JS の Object メソッドと Aarry メソッドの区別の概要に関連するその他の記事については、PHP 中国語 Web サイトに注目してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

JavaScriptの文字列文字を交換します JavaScriptの文字列文字を交換します Mar 11, 2025 am 12:07 AM

JavaScript文字列置換法とFAQの詳細な説明 この記事では、javaScriptの文字列文字を置き換える2つの方法について説明します:内部JavaScriptコードとWebページの内部HTML。 JavaScriptコード内の文字列を交換します 最も直接的な方法は、置換()メソッドを使用することです。 str = str.replace( "find"、 "置換"); この方法は、最初の一致のみを置き換えます。すべての一致を置き換えるには、正規表現を使用して、グローバルフラグGを追加します。 str = str.replace(/fi

独自のJavaScriptライブラリを作成および公開するにはどうすればよいですか? 独自のJavaScriptライブラリを作成および公開するにはどうすればよいですか? Mar 18, 2025 pm 03:12 PM

記事では、JavaScriptライブラリの作成、公開、および維持について説明し、計画、開発、テスト、ドキュメント、およびプロモーション戦略に焦点を当てています。

ブラウザでのパフォーマンスのためにJavaScriptコードを最適化するにはどうすればよいですか? ブラウザでのパフォーマンスのためにJavaScriptコードを最適化するにはどうすればよいですか? Mar 18, 2025 pm 03:14 PM

この記事では、ブラウザでJavaScriptのパフォーマンスを最適化するための戦略について説明し、実行時間の短縮、ページの負荷速度への影響を最小限に抑えることに焦点を当てています。

ブラウザ開発者ツールを使用してJavaScriptコードを効果的にデバッグするにはどうすればよいですか? ブラウザ開発者ツールを使用してJavaScriptコードを効果的にデバッグするにはどうすればよいですか? Mar 18, 2025 pm 03:16 PM

この記事では、ブラウザ開発者ツールを使用した効果的なJavaScriptデバッグについて説明し、ブレークポイントの設定、コンソールの使用、パフォーマンスの分析に焦点を当てています。

jQueryマトリックス効果 jQueryマトリックス効果 Mar 10, 2025 am 12:52 AM

マトリックスの映画効果をあなたのページにもたらしましょう!これは、有名な映画「The Matrix」に基づいたクールなJQueryプラグインです。プラグインは、映画の古典的な緑色のキャラクター効果をシミュレートし、画像を選択するだけで、プラグインはそれを数値文字で満たされたマトリックススタイルの画像に変換します。来て、それを試してみてください、それはとても面白いです! それがどのように機能するか プラグインは画像をキャンバスにロードし、ピクセルと色の値を読み取ります。 data = ctx.getimagedata(x、y、settings.greasize、settings.greasize).data プラグインは、写真の長方形の領域を巧みに読み取り、jQueryを使用して各領域の平均色を計算します。次に、使用します

シンプルなjQueryスライダーを構築する方法 シンプルなjQueryスライダーを構築する方法 Mar 11, 2025 am 12:19 AM

この記事では、jQueryライブラリを使用してシンプルな画像カルーセルを作成するように導きます。 jQuery上に構築されたBXSLiderライブラリを使用し、カルーセルをセットアップするために多くの構成オプションを提供します。 今日、絵のカルーセルはウェブサイトで必須の機能になっています - 1つの写真は千の言葉よりも優れています! 画像カルーセルを使用することを決定した後、次の質問はそれを作成する方法です。まず、高品質の高解像度の写真を収集する必要があります。 次に、HTMLとJavaScriptコードを使用して画像カルーセルを作成する必要があります。ウェブ上には、さまざまな方法でカルーセルを作成するのに役立つ多くのライブラリがあります。オープンソースBXSLiderライブラリを使用します。 BXSLiderライブラリはレスポンシブデザインをサポートしているため、このライブラリで構築されたカルーセルは任意のものに適合させることができます

JavaScriptによる構造マークアップの強化 JavaScriptによる構造マークアップの強化 Mar 10, 2025 am 12:18 AM

キーポイントJavaScriptを使用した構造的なタグ付けの強化は、ファイルサイズを削減しながら、Webページコンテンツのアクセシビリティと保守性を大幅に向上させることができます。 JavaScriptを効果的に使用して、Cite属性を使用して参照リンクを自動的にブロック参照に挿入するなど、HTML要素に機能を動的に追加できます。 JavaScriptを構造化されたタグと統合することで、ページの更新を必要としないタブパネルなどの動的なユーザーインターフェイスを作成できます。 JavaScriptの強化がWebページの基本的な機能を妨げないようにすることが重要です。 高度なJavaScriptテクノロジーを使用できます(

Angularを使用してCSVファイルをアップロードおよびダウンロードする方法 Angularを使用してCSVファイルをアップロードおよびダウンロードする方法 Mar 10, 2025 am 01:01 AM

データセットは、APIモデルとさまざまなビジネスプロセスの構築に非常に不可欠です。これが、CSVのインポートとエクスポートが頻繁に必要な機能である理由です。このチュートリアルでは、Angular内でCSVファイルをダウンロードおよびインポートする方法を学びます

See all articles