JavaScript でオブジェクトが空かどうかをチェックする

Rupam Yadav 2023年10月12日
  1. JavaScript で hasOwnProperty() を使用して、オブジェクトが空かどうかを確認する
  2. JavaScript で Object.key() を使用して、オブジェクトが空かどうかを確認する
  3. JavaScript で Underscore.js ライブラリを使用して、オブジェクトが空かどうかを確認する
JavaScript でオブジェクトが空かどうかをチェックする

オブジェクトは JavaScript で重要な役割を果たしています。オブジェクトはデータの構造化、メンテナンス、転送を可能にしてくれますが、取得したオブジェクトが空の場合もあります。この記事では、JavaScript でオブジェクトが空かどうかをチェックする方法をいくつか紹介します。

JavaScript で hasOwnProperty() を使用して、オブジェクトが空かどうかを確認する

指定されたプロパティがオブジェクトに存在するかどうかを調べることができます。以下の例では、2つのオブジェクトに prop プロパティが存在するかどうかを調べています。isObjEmpty() 関数はオブジェクトが空であれば boolean コマンドを返します。

この関数は指定したプロパティが存在すれば False を返し、そうでなければ True を返します。このメソッドは ECMAScript 5 がサポートされていない場合にのみ有用であることに注意してください。

const obj1 = {
  one: 1,
  two: 2,
  three: 3
};
const obj2 = {};

console.log('Is Object 1 Empty? : ', isObjEmpty(obj1));
console.log('Is Object 2 Empty? : ', isObjEmpty(obj2));

function isObjEmpty(obj) {
  for (var prop in obj) {
    if (obj.hasOwnProperty(prop)) return false;
  }

  return true;
}

出力:

Is Object 1 Empty? :  false
Is Object 2 Empty? :  true

JavaScript で Object.key() を使用して、オブジェクトが空かどうかを確認する

前の例では、JavaScript でオブジェクトが空かどうかをチェックする方法を見ましたが、ECMAScript 5 をサポートしている場合には、異なる結果が発生します。

この例では、Object.keys() コマンドを使ってオブジェクトにキーがあるかどうかを調べます。キーの長さが 0 であれば空、そうでなければ空ではありません。

const obj1 = {
  one: 1,
  two: 2,
  three: 3
};
const obj2 = {};

console.log('Is Object 1 Empty? : ', isObjEmpty(obj1));
console.log('Is Object 2 Empty? : ', isObjEmpty(obj2));

function isObjEmpty(obj) {
  return Object.keys(obj).length === 0;
}

出力:

Is Object 1 Empty? :  false
Is Object 2 Empty? :  true

JavaScript で Underscore.js ライブラリを使用して、オブジェクトが空かどうかを確認する

オブジェクトにデータがないかどうかを調べるもう一つの簡単な方法は Undescore.js ライブラリを使用することです。これは JavaScript ライブラリで、いくつかの便利なメソッドを持っています。そのうちの一つが _.isEmpty() で、オブジェクトが空であれば真を返します。

ライブラリの URL を <script> タグに指定することで、ライブラリをインクルードすることができます。また、名前の通りアンダースコアを使って関数にアクセスすることもできます。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Empty Object Example</title>

    <script src="https://cdn.jsdelivr.net/npm/underscore@1.11.0/underscore-min.js"></script>
  </head>
  <body>
    <script>
      const obj1 = { one: 1, two: 2, three: 3 };
      const obj2 = {};

      console.log("Is Obj1 Empty? : ", _.isEmpty(obj1));
      console.log("Is Obj2 Empty? : ", _.isEmpty(obj2));
    </script>
  </body>
</html>

出力:

Is Obj1 Empty? :  false
Is Obj2 Empty? :  true
著者: Rupam Yadav
Rupam Yadav avatar Rupam Yadav avatar

Rupam Saini is an android developer, who also works sometimes as a web developer., He likes to read books and write about various things.

LinkedIn

関連記事 - JavaScript Object