ネイティブ JavaScript でオブジェクトが空かどうかをチェックする実装例

ネイティブ JavaScript でオブジェクトが空かどうかをチェックする実装例

以下は、オブジェクトが null かどうかを確認するコード スニペットです。 新しいブラウザの場合は、ES6 の「Object.keys」を使用できます。古いブラウザの場合は、Lodash ライブラリをインストールして、その「isEmpty」メソッドを使用できます。

定数空 = {}; 
/* -------------------------
  新しいブラウザ----------------------------*/
Object.keys(empty).length === 0 && empty.constructor === Object
// 真実 
/* -------------------------
  Lodashは古いブラウザでも使用可能
----------------------------*/
_.isEmpty(空)
// 真実

ネイティブJavaScriptとは

ネイティブ JavaScript とは、フレームワークやライブラリが使用されないことを意味します。 これは通常のバニラ JavaScript であり、 LodashjQueryなどのライブラリは使用されません。

A. 新しいブラウザでnullオブジェクトをチェックする

組み込みのObject.keysメソッドを使用して null オブジェクトをチェックできます。

定数空 = {}; 
Object.keys(empty).length === 0 && empty.constructor === object;

追加のconstructorチェックが必要なのはなぜですか?

なぜconstructorをチェックする必要があるのか​​疑問に思うかもしれません。 これはラッパーインスタンスをオーバーライドすることを目的としています。 JavaScript には 9 つの組み込みコンストラクターがあります。

新しいオブジェクト();
新しい文字列();
新しい数値();
新しいブール値();
新しい配列();
新しい RegExp();
新しい関数();
新しい日付();

ここで、 new Object()を使用して空のオブジェクトを作成できます。

オブジェクトを新規作成します。 
Object.keys(obj).length === 0; // 真

したがって、 Object.keysを使用するだけで、オブジェクトが空の場合にtrueが返されます。 しかし、他のコンストラクターを使用して新しいオブジェクト インスタンスを作成するとどうなるでしょうか。

関数 badEmptyCheck(値) {
  Object.keys(value).length === 0 を返します。
} 
badEmptyCheck(新しい文字列()); // 真 
badEmptyCheck(新しいNumber()); // 真 
badEmptyCheck(新しい Boolean()); // 真 
badEmptyCheck(新しい配列()); // 真 
badEmptyCheck(新しいRegExp()); // 真 
badEmptyCheck(新しい関数()); // 真 
badEmptyCheck(新しい日付()); // 真

コンストラクタをチェックして誤検出を解決する

コンストラクター チェックを追加してこのエラーを修正します。

関数 goodEmptyCheck(値) {
  オブジェクト.キー(値).長さ === 0
    && value.constructor === Object; // コンストラクタチェック
}
goodEmptyCheck(新しい文字列()); // 偽 
goodEmptyCheck(新しいNumber()); // false 
goodEmptyCheck(新しい Boolean()); // 偽 
goodEmptyCheck(新しい配列()); // 偽 
goodEmptyCheck(新しい RegExp()); // 偽 
goodEmptyCheck(新しい関数()); // 偽 
goodEmptyCheck(新しい日付()); // 偽

その他の値のNullチェック

次に、いくつかの値を使用してメソッドをテストし、何が得られるかを確認しましょう。

関数 isEmptyObject(値) {
  Object.keys(value).length === 0 && value.constructor === Object を返します。
}

ここまでは順調ですが、非オブジェクトの場合はfalseを返します。

isEmptyObject(100) // 偽
isEmptyObject(true) // 偽
isEmptyObject([]) // 偽

でも気をつけてね! 以下の値はエラーの原因となります。

// TypeError: undefined または null をオブジェクトに変換できません
空のオブジェクトです(未定義);
空のオブジェクトです(null);

nullおよびundefinedの空チェックの改善

TypeErrorをスローしたくない場合は、追加のチェックを追加することができます。

関数 isEmptyObject(値) {
  戻り値 && Object.keys(value).length === 0 && value.constructor === Object;
}

B. 古いブラウザでのNullオブジェクトのチェック

古いブラウザをサポートする必要がある場合はどうすればよいですか? ご存知のとおり、古いブラウザとは IE のことを指し、ネイティブを使用するかライブラリを使用するかという 2 つの選択肢があります。

JavaScript を使用して null オブジェクトを確認する

ネイティブ JS はそれほど簡潔ではありませんが、空のオブジェクトとして判断しても問題ありません。

関数 isObjectEmpty(値) {
  戻る (
    Object.prototype.toString.call(値) === '[object オブジェクト]' && JSON.stringify(値) === '{}'
  );
}

オブジェクトの場合はtrueを返します。

isObjectEmpty({}); // 真 
isObjectEmpty(新しいオブジェクト()); // 真

他のタイプのコンストラクタも通常通り判定できる

isObjectEmpty(新しい文字列()); // 偽 
isObjectEmpty(新しい Number()); // false 
isObjectEmpty(新しい Boolean()); // false 
isObjectEmpty(新しい配列()); // false 
isObjectEmpty(新しい RegExp()); // 偽 
isObjectEmpty(新しい関数()); // false 
isObjectEmpty(新しいDate()); // false

nullおよびundefinedを渡してもTypeErrorは報告されません。

isObjectEmpty(null); // 偽
isObjectEmpty(未定義); // 偽

外部ライブラリを使用して null オブジェクトをチェックする

null オブジェクトをチェックするために使用できる外部ライブラリは数多くあります。そして、ほとんどのブラウザは古いブラウザにもしっかり対応しています

ロダシュ 
_.isEmpty({});
// 真実
アンダースコア
_.isEmpty({});
// 真実
jQuery 
jQuery.isEmptyObject({});
// 真実

ネイティブ vs. ライブラリ

答えは、状況によります。私は外部ライブラリのオーバーヘッドが嫌いなので、プログラムをできるだけシンプルに保つことを強く推奨しています。また、小規模なアプリケーションの場合、外部ライブラリを設定するのが面倒です。

ただし、アプリケーションにすでに外部ライブラリがインストールされている場合は、それを使用してください。あなたは自分のアプリケーションを誰よりもよく知っているでしょう。したがって、状況に最も適した方法を選択してください。

上記は、ネイティブ JavaScript でオブジェクトが空かどうかをチェックする実装例の詳細です。JavaScript でオブジェクトが空かどうかをチェックする方法の詳細については、123WORDPRESS.COM の他の関連記事に注目してください。

以下もご興味があるかもしれません:
  • js でオブジェクトが空かどうかを判断する 3 つの方法
  • JS でオブジェクトが空オブジェクトかどうかを判断する 5 つの方法
  • オブジェクトが空かどうかを判断する JS/Jquery メソッド
  • オブジェクト {} が空のオブジェクトであるかどうかを判断する JavaScript の簡単な方法

<<:  MySQL の where と on の違いと、いつ使用するか

>>:  CSS3のfocus-withinセレクタの使用

推薦する

CentOS6.9+Mysql5.7.18 ソースコードのインストール詳細チュートリアル

CentOS6.9+Mysql5.7.18 ソースコードのインストールでは、以下の操作を root ...

Vueは、サイドナビゲーションバーをタブページに関連付けるサンプルコードを実装します。

目次テクノロジースタック効果分析するテクノロジースタックサイドバー用Antdtabは要素を使用します...

私のCSSアーキテクチャのコンセプト - それは人によって異なり、ベストなものはなく、適切なものだけがある

はじめに<br />私はフロントエンド分野でかなり長い間働いており、CSS分野でも長い間...

Reactはconetxtを通じてマルチコンポーネント値転送関数を実装します

この関数の効果はvue的provide/injectに似ています。 contextを通じて反応できる...

VMware vSphere6.0 サーバー仮想化の展開とインストールの図 (詳細な手順)

1. VMware vSphere 導入の早期計画のポイント1. vSphereの利点(わずかに)...

HTML テーブルタグチュートリアル (27): セルの背景画像属性 BACKGROUND

セルの背景画像を設定でき、任意の GIF または JPEG 画像ファイルを使用できます。基本的な構文...

MySQL Binlog ログの読み取り時によくある 3 つのエラー

1. mysqlbinlog: [エラー] 不明な変数 'default-character...

MySQL 8.0.18 はクローンプラグインを使用して MGR 実装を再構築します

3 ノード MGR 内の 1 つのノードに異常があり、MGR クラスターに再度追加する必要があるとし...

v-model 双方向バインディングデータを実装する vue カスタム コンポーネントのサンプル コード

プロジェクトでは、プロジェクトが呼び出すカスタム パブリック コンポーネントに遭遇します。通常、pr...

jQuery+h5 で 9 マス抽選特殊効果を実現 (フロントエンドとバックエンドのコード)

序文:フロントエンド: jq+h5 で 9 グリッドのダイナミック効果を実現バックエンド: thin...

仕事の効率を上げるJS略語スキル20選

目次複数の変数を同時に宣言する場合は、1 行に短縮できます。分割代入は複数の変数に同時に値を割り当て...

IDEA は MySQL への接続時にエラーを報告します。サーバーが無効なタイムゾーンを返します。タブに移動して serverTimezone プロパティを設定してください。

これからの道は常に困難で、棘だらけです。歯を食いしばって、乗り越えられると信じてください。さあ、さあ...

MySQL の繰り返し読み取りレベルでファントム読み取りを解決できますか?

導入データベース理論についてさらに学んでいくうちに、さまざまな分離レベルによって起こり得る問題につい...

WeChat アプレットのカスタム下部ナビゲーション バー コンポーネント

この記事の例では、WeChatアプレットの下部ナビゲーションバーコンポーネントの具体的な実装コードを...

HTMLを教える記事

アーティストになるつもりがない場合は、開発者として HTML を読んで、必要に応じて簡単な変更を加え...