JavaScriptで配列かどうかを判断するためのさまざまな方法のまとめ

JavaScriptで配列かどうかを判断するためのさまざまな方法のまとめ

序文

日常の開発では、値の型を判別する必要が生じることがよくあります。今日は、配列かどうかを判断するために使用される一般的な JavaScript メソッドをいくつかまとめます。

配列.isArray

Array.isArray() は ES5 で追加された新しいメソッドで、渡された値が配列であるかどうかを判断するために使用されます。配列の場合は true を返し、そうでない場合は false を返します。

arr = [] とします。
console.log(Array.isArray(arr)); // 真

次の関数呼び出しはすべて true を返します。

配列.isArray([]);
配列.isArray([1]);
Array.isArray(新しいArray());
Array.isArray(新しいArray("a", "b", "c", "d"));

注目すべき点は、Array.prototype も実際には配列であるということです。

Array.isArray(Array.prototype); // 真

次の関数呼び出しはすべて false を返します。

配列.isArray();
配列.isArray({});
配列.isArray(null);
Array.isArray(未定義);
配列.isArray(17);
Array.isArray('配列');
配列.isArray(true);
配列.isArray(false);
Array.isArray(新しいUint8Array(32))
Array.isArray({ __proto__: Array.prototype });

互換性は以下のとおりです。

ご覧のとおり、主流のブラウザの新しいバージョンはすべてこの方法をサポートしており、安心して使用できます。

コンストラクタ

Object の各インスタンスにはコンストラクターがあり、現在のオブジェクトを作成するために使用される関数を格納するために使用されます。

arr = [] とします。
console.log(arr.constructor === 配列); // true

コンストラクターは変更されるリスクがあり、判定結果が正確でない可能性があることに注意してください。次に例を示します。

arr = [1, 2, 3]とします。
arr.コンストラクタ = 関数 () { }
console.log(arr.constructor === 配列); // false

一般的に、コンストラクターを使用して配列かどうかを判断することは推奨されません。そのようなメソッドがあることを知るだけで十分です。

インスタンス

instanceof 演算子は、コンストラクター関数のプロトタイプ プロパティがインスタンス オブジェクトのプロトタイプ チェーンに出現するかどうかを検出するために使用されます。例えば:

// コンストラクタ関数 C() を定義する {}
関数D() {}

var o = 新しい C();

o instanceof C; // Object.getPrototypeOf(o) === C.prototype なので true

o instanceof D; // false、D.prototype は o のプロトタイプ チェーンにないため o instanceof Object; // true、Object.prototype.isPrototypeOf(o) が true を返すため
C.prototype instanceof Object; // true、上記と同じ

配列かどうかを判断するための instanceof の使用方法は次のとおりです。

arr = [] とします。
console.log(arr 配列インスタンス); // true

instanceof を使用する際に注意すべき点が 2 つあります。

  • コンストラクタのプロトタイプやインスタンスのプロトタイプチェーンは変更される可能性があるため、判定結果が変わらない可能性があります。
  • iframe を含むページ スクリプトで instanceof を使用すると、iframe には独立したグローバル環境があり、異なるグローバル環境には異なるグローバル オブジェクトがあり、したがって異なる組み込み型コンストラクターがあるため、誤った結果が生じる可能性があります。

プロトタイプ

isPrototypeOf() は、オブジェクトが別のオブジェクトのプロトタイプ チェーン内に存在するかどうかをテストするために使用できます。使用方法は次のとおりです。

関数 Foo() {}
関数 Bar() {}
関数 Baz() {}

Bar.prototype = Object.create(Foo.prototype);
Baz.prototype = Object.create(Bar.prototype);

var baz = new Baz();

console.log(Baz.prototype.isPrototypeOf(baz)); // 真
console.log(Bar.prototype.isPrototypeOf(baz)); // 真
console.log(Foo.prototype.isPrototypeOf(baz)); // 真
console.log(Object.prototype.isPrototypeOf(baz)); // 真

isPrototypeOf を使用して、入力パラメータが配列であるかどうかを判断する場合は、次のように使用できます。

arr = [] とします。
console.log(Array.prototype.isPrototypeOf(arr)); // 真

オブジェクト.プロトタイプ.toString

すべてのオブジェクトには toString() メソッドがあり、オブジェクトがテキスト値として表されるとき、またはオブジェクトが文字列を期待する方法で参照されるときに自動的に呼び出されます。

デフォルトでは、toString() メソッドはすべての Object オブジェクトに継承されます。このメソッドがカスタム オブジェクトでオーバーライドされていない場合、toString() は文字列 "[オブジェクト タイプ]" を返します。ここで、type はオブジェクトのタイプです。

toString() を使用して各オブジェクトの型を取得できます。各オブジェクトを Object.prototype.toString() で検出できるようにするには、Function.prototype.call() または Function.prototype.apply() として呼び出し、チェックするオブジェクトを thisArg と呼ばれる最初の引数として渡す必要があります。使用方法は次のとおりです。

var toString = Object.prototype.toString;

toString.call(new Date); // [オブジェクト Date]
toString.call(new String); // [オブジェクト String]
toString.call(Math); // [オブジェクト Math]

//JavaScript 1.8.5以降
toString.call(undefined); // [オブジェクトは未定義]
toString.call(null); // [オブジェクト Null]

オブジェクトが配列であるかどうかを判別したい場合は、次のように使用できます。

arr = [] とします。
console.log(Object.prototype.toString.call(arr) === "[オブジェクト配列]"); // true

互換性は次のとおりです。


型の判定といえば、typeofメソッドを思い浮かべる人が多いかもしれません。ここでtypeofに関する内容を復習しておきましょう。

typeof 演算子は、評価されていないオペランドの型を示す文字列を返します。

console.log(typeof 42); // "数値"
console.log(typeof 'blubber'); // "文字列"
console.log(typeof true); // "ブール値"
console.log(typeof undeclaredVariable); // "未定義"

typeof の可能な戻り値は次のとおりです。

上の図からわかるように、配列オブジェクトは「その他のオブジェクト」に属しているため、配列オブジェクトの typeof 戻り値は「オブジェクト」になります。

arr = [] とします。
console.log(typeof arr); // "オブジェクト"

したがって、typeof の使用は避けるべきです。

要約する

上記は、値が配列であるかどうかを判断するいくつかの方法です。もちろん、便利なものもあればそうでないものもありますが、いずれにしても、そのようなものがあることを知っておくのは常に良いことです。要約すると:

  • 最適な方法は Array.isArray ですが、IE8 以下ではサポートされていません。
  • 互換性が懸念される場合は、Object.prototype.toString を使用できます。

JavaScript を使用して配列かどうかを判断する方法についての記事はこれで終わりです。JavaScript を使用して配列かどうかを判断する方法の詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • JavaScript 配列の詳細な概要
  • JavaScript における一般的な配列操作
  • JavaScript配列重複排除の詳細な説明
  • JavaScript 配列メソッド - 体系的な概要と詳細な説明
  • JavaScript配列の一般的なメソッドの例のまとめ
  • JSはマップを使用してdouble配列を統合します
  • JavaScript 配列のマージのケーススタディ
  • JavaScript のフラット配列をツリー構造に変換する例
  • JavaScriptでよく使われる配列重複排除実戦ソースコード
  • JavaScript 配列の include と Reduce の基本的な使用法
  • jsは多次元配列を1次元配列に変換し、それを並べ替えます
  • 混合配列オブジェクトを JSON のエンティティ クラスのリスト コレクションに解析する方法
  • よく使われるJavaScript配列メソッド

<<:  Linux で MySQL 8.0 サービスを完全に削除する方法

>>:  Nginx 正規表現関連のパラメータとルールの紹介

推薦する

Tencent Cloud で HTTPS を無料で導入する方法

最近、WeChatアプレットを書いていたとき、WeChatアプレットではすべてのリクエストインターフ...

WIN10 での JDK インストールと環境変数の設定手順 (詳細版)

目次1. JDKをダウンロードする(例としてjdk1.8.0を使用する) 2. JDK をインストー...

Docker イメージを削除できません エラー: そのようなイメージはありません: xxxxxx 解決策

序文docker イメージを削除できません。docker docker imagesを確認すると、イ...

html5 の新しいメソッドを使用して JavaScript で要素クラス名を操作する方法の詳細な説明

目次1. classList属性2. 実用化以前の JavaScript では、最初にクラス属性を取...

Dockerコンテナの構築と実行のプロセスの詳細な説明

イメージをプルし、コンテナを作成してコンテナを実行するだけです。 docker run -d --r...

MySQLからMariaDBへのスムーズな移行のための詳細な手順

1. MariaDB と MySQL の紹介1. MariaDB の紹介MariaDB は、MySQ...

MySQL 8.0.18はデータベースにユーザーを追加し、権限を付与します

1. データベースにログインするには、rootユーザーを使用することをお勧めします。 mysql -...

MySQL データベースは XA 仕様をどのように実装しますか?

MySQL 一貫性ログMySQL データベースの電源が切れた場合、コミットされていないトランザクシ...

CSS における px、em、rem、%、vw、vh 単位の違いの詳細な説明

1.ピクセルpx はピクセルの略語で、画面解像度に対する相対的な長さの単位です。 2. えむ参照は親...

CSS でマウスの位置をマッピングし、マウスを動かしてページ要素を制御する (サンプル コード)

マウスの位置をマッピングしたり、ドラッグ効果を実装したりすることは、 JavaScriptで行うこと...

Dockerイメージの作成、保存、読み込み方法

イメージを作成する方法は 3 つあります。既存のイメージに基づいてコンテナを作成する、ローカル テン...

CSSテーマを簡単に切り替える方法の詳細な説明

最近、個人の Web サイトに非常にシンプルなカラー スキーム (テーマ) スイッチャーを追加しまし...

Vue シンプル登録ページ + 確認コード送信機能の実装例

目次1. エフェクト表示2. 検証コードとメールプッシュ管理の強化(後述のブログを参照) 3. 一般...

MySQL データベースの show processlist コマンドの使用の分析

実際のプロジェクト開発では、多数のクエリや挿入、特にマルチスレッド挿入など、データベースに大きな負荷...

CSSでカスタムフォント(font-face)を導入する方法の詳細な説明

なぜこれを使ったのか?それはポスターを作ることから始まりました。それは嵐の夜でした。 。 。さて、無...