以下は、オブジェクトが null かどうかを確認するコード スニペットです。 新しいブラウザの場合は、ES6 の「Object.keys」を使用できます。古いブラウザの場合は、Lodash ライブラリをインストールして、その「isEmpty」メソッドを使用できます。 定数空 = {}; /* ------------------------- 新しいブラウザ----------------------------*/ Object.keys(empty).length === 0 && empty.constructor === Object // 真実 /* ------------------------- Lodashは古いブラウザでも使用可能 ----------------------------*/ _.isEmpty(空) // 真実 ネイティブJavaScriptとはネイティブ JavaScript とは、フレームワークやライブラリが使用されないことを意味します。 これは通常のバニラ JavaScript であり、 A. 新しいブラウザでnullオブジェクトをチェックする組み込みの 定数空 = {}; Object.keys(empty).length === 0 && empty.constructor === object; 追加の なぜ 新しいオブジェクト(); 新しい文字列(); 新しい数値(); 新しいブール値(); 新しい配列(); 新しい RegExp(); 新しい関数(); 新しい日付(); ここで、 オブジェクトを新規作成します。 Object.keys(obj).length === 0; // 真 したがって、 関数 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 を返します。 } ここまでは順調ですが、非オブジェクトの場合は isEmptyObject(100) // 偽 isEmptyObject(true) // 偽 isEmptyObject([]) // 偽 でも気をつけてね! 以下の値はエラーの原因となります。 // TypeError: undefined または null をオブジェクトに変換できません 空のオブジェクトです(未定義); 空のオブジェクトです(null);
関数 isEmptyObject(値) { 戻り値 && Object.keys(value).length === 0 && value.constructor === Object; } B. 古いブラウザでのNullオブジェクトのチェック古いブラウザをサポートする必要がある場合はどうすればよいですか? ご存知のとおり、古いブラウザとは IE のことを指し、ネイティブを使用するかライブラリを使用するかという 2 つの選択肢があります。 JavaScript を使用して null オブジェクトを確認するネイティブ JS はそれほど簡潔ではありませんが、空のオブジェクトとして判断しても問題ありません。 関数 isObjectEmpty(値) { 戻る ( Object.prototype.toString.call(値) === '[object オブジェクト]' && JSON.stringify(値) === '{}' ); } オブジェクトの場合は isObjectEmpty({}); // 真 isObjectEmpty(新しいオブジェクト()); // 真 他のタイプのコンストラクタも通常通り判定できるisObjectEmpty(新しい文字列()); // 偽 isObjectEmpty(新しい Number()); // false isObjectEmpty(新しい Boolean()); // false isObjectEmpty(新しい配列()); // false isObjectEmpty(新しい RegExp()); // 偽 isObjectEmpty(新しい関数()); // false isObjectEmpty(新しいDate()); // false isObjectEmpty(null); // 偽 isObjectEmpty(未定義); // 偽 外部ライブラリを使用して null オブジェクトをチェックするnull オブジェクトをチェックするために使用できる外部ライブラリは数多くあります。そして、ほとんどのブラウザは古いブラウザにもしっかり対応しています ロダシュ _.isEmpty({}); // 真実 アンダースコア _.isEmpty({}); // 真実 jQuery jQuery.isEmptyObject({}); // 真実 ネイティブ vs. ライブラリ答えは、状況によります。私は外部ライブラリのオーバーヘッドが嫌いなので、プログラムをできるだけシンプルに保つことを強く推奨しています。また、小規模なアプリケーションの場合、外部ライブラリを設定するのが面倒です。 ただし、アプリケーションにすでに外部ライブラリがインストールされている場合は、それを使用してください。あなたは自分のアプリケーションを誰よりもよく知っているでしょう。したがって、状況に最も適した方法を選択してください。 上記は、ネイティブ JavaScript でオブジェクトが空かどうかをチェックする実装例の詳細です。JavaScript でオブジェクトが空かどうかをチェックする方法の詳細については、123WORDPRESS.COM の他の関連記事に注目してください。 以下もご興味があるかもしれません:
|
<<: MySQL の where と on の違いと、いつ使用するか
背景まず最初に、私はフロントエンド開発の専門家ではないことを述べておきたいと思います。私の以前のコン...
はじめに:ナビゲーション バーなどのコンポーネント ベースのアイデアを使用して機能モジュールを完全に...
目次最適化の第一歩: 軽量ベースイメージの使用第2段階の最適化:多段階構築Docker は、ソフトウ...
この記事では、検証コード干渉を実装するためのjsの具体的なコードを参考までに共有します。具体的な内容...
序文インターネット上にはデータベースの最適化に関する情報や方法が数多くありますが、その多くは品質にば...
Web ページを作成するときに、クールでスムーズなドロップダウン メニューが必要になることがあります...
簡単に言うと、distinct は重複を削除するために使用され、group by は統計を集計するよ...
これは、面接者の CSS に関する基本的な知識をテストするものです。 CSSでアニメーションを実装す...
この記事では、ログインタイプの切り替えを実装するためのVueの具体的なコードを例として紹介します。具...
この記事では、カラービューアを実装するためのJavaScriptの具体的なコードを参考までに紹介しま...
簡単な説明以前 Centos7 で構築し、その後個人開発環境として Ubuntu 20.04 を使っ...
1.公式サイトからダウンロードして解凍する参考: 2. 環境変数を設定するMYSQL_HOMEをMy...
CPU 権限の制限により、Linux ユーザー状態とカーネル状態間の通信は、プロセス間通信を使用した...
目次まとめ基本的な例モチベーションデザインの詳細コンパイルの詳細採用戦略練習するヒント適切なプロパテ...
vueプロジェクトをパッケージ化してサーバーにデプロイし、正常にログインできるが、ローカルで起動する...