オブジェクト上のデータに安全にアクセスする方法

JavaScript オブジェクトの null 値によって引き起こされるエラーを賢く回避します

JavaScript では、データが不完全であってもアプリケーションが適切に機能できるようにするために、オブジェクト データへの安全なアクセスが非常に重要です。中心となるのは、NULL 値によって引き起こされるエラーを回避することです。

注意!

この記事をより深く理解するには、JavaScript における真の値と偽の値の概念を理解する必要があります。

ケース

コードを記述するとき、多くの場合、オブジェクト内のデータにアクセスする必要があります。従業員オブジェクトがあり、そのステータス情報を取得する必要があるとします。

ステータス情報が存在する場合はステータスが表示され、存在しない場合は「インターンシップ」が表示されます。

サンプルコードは次のとおりです:

<code class="language-javascript">const pegawai = {
  nama: 'Alex Under',
  status: 'tetap',
};

console.log(pegawai.nama, 'adalah pegawai', pegawai.status);</code>

出力結果:

<code>Alex Under adalah pegawai tetap</code>

問題と解決策 1

次に、オブジェクトのプロパティを削減します。

<code class="language-javascript">const pegawai = {
};

console.log(pegawai.nama, 'adalah pegawai', pegawai.status);</code>

出力結果:

<code>undefined adalah pegawai undefined</code>

ここではエラーは報告されていませんが、データは undefined として表示され、見栄えがよくありません。

この問題を解決するには、if-else ステートメントを追加します。

<code class="language-javascript">const pegawai = {
};

if (!pegawai.nama) {
  pegawai.nama = 'Seorang Pegawai';
}

if (!pegawai.status) {
  pegawai.status = 'magang';
}

console.log(pegawai.nama, 'adalah pegawai', pegawai.status);</code>

出力結果:

<code>Seorang Pegawai adalah pegawai magang</code>

データにはデフォルト値が用意されています。データが存在しない場合は、デフォルト値が使用されます。

追加のヒント

コードを簡素化するには、次のメソッドを使用できます:

<code class="language-javascript">const pegawai = {
};

pegawai.nama = pegawai.nama || 'Seorang Pegawai';
pegawai.status = pegawai.status || 'magang';

console.log(pegawai.nama, 'adalah pegawai', pegawai.status);</code>

問題と解決策 2

オブジェクト自体が (null として) 存在しない場合はどうなりますか?

<code class="language-javascript">const pegawai = null;
console.log(pegawai.nama, 'adalah pegawai', pegawai.status);</code>

これにより、次のようなエラーが発生します:

<code>Uncaught TypeError: Cannot read properties of null (reading 'nama')</code>

アプリがエラーでクラッシュしました。

この問題を解決するには、次の方法を使用できます:

<code class="language-javascript">const pegawai = null;
const pegawaiSafe = pegawai || {};

if (!pegawaiSafe.nama) {
  pegawaiSafe.nama = 'Seorang Pegawai';
}

if (!pegawaiSafe.status) {
  pegawaiSafe.status = 'magang';
}

console.log(pegawaiSafe.nama, 'adalah pegawai', pegawaiSafe.status);</code>

この方法では、エラーは報告されず、出力結果は次のようになります:

<code>Seorang Pegawai adalah pegawai magang</code>

追加のヒント

同様に、コードを簡素化するために、次を使用できます:

<code class="language-javascript">const pegawai = null;

const pegawaiSafe = {};
pegawaiSafe.nama = (pegawai || {}).nama || 'Seorang Pegawai';
pegawaiSafe.status = (pegawai || {}).status || 'magang';

console.log(pegawaiSafe.nama, 'adalah pegawai', pegawaiSafe.status);</code>

または:

<code class="language-javascript">const pegawai = null;

const pegawaiSafe = pegawai || {};
pegawaiSafe.nama = pegawaiSafe.nama || 'Seorang Pegawai';
pegawaiSafe.status = pegawaiSafe.status || 'magang';

console.log(pegawaiSafe.nama, 'adalah pegawai', pegawaiSafe.status);</code>

概要

上記の方法により、特に外部入力 (ユーザー入力、データベース、サードパーティ サービスなど) からのオブジェクトを扱う場合に、オブジェクトの null 値の問題を効果的に回避できます。

読んでいただきありがとうございます!

ディスカッションやコミュニケーションを歓迎します。また、友達を作ることも歓迎します?

以上がオブジェクト上のデータに安全にアクセスする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。