序文

JavaScript 開発では、オブジェクトにプロパティが存在するかどうかを判斷する必要があることがよくあります。
JavaScript は比較的緩い言語であるため、より厳密なことを行うのは困難です。たとえば、JavaScript における「屬性が存在するかどうか」の定義には、どのような場合に屬性が存在し、どのような場合に存在しないとみなされるかという問題があります。正解も不正解もありませんが、狀況や開発ニーズが異なれば、「存在」の意味も異なります。
ここではよく使われる5つの判斷方法とその問題點(diǎn)についてお話します。

方法1：ブール判定

これが例です:

const obj1 = { name: 'Andy', age: 21 }
const obj2 = { name: 'Alice' }

console.log( obj1.age ? '存在' : '不存在' ); // 存在
console.log( obj2.age ? '存在' : '不存在' ); // 不存在

まずこの方法の欠點(diǎn)について話しましょう
次の場合:

const obj = { name: 'Baby', age: 0 }

console.log( obj.age ? '存在' : '不存在' ); // 不存在

この場合、年齢は「存在する」はずですが、「存在しない」と判定されてしまいます。

では、この方法は使えないのでしょうか？
これはビジネスの開発ニーズによって異なります。
ビジネス開発要件で、この屬性を 0、空の文字列、NaN、未定義な??どにすることができないことがわかっている場合でも、この判斷は可能です。
より厳しい環(huán)境に置くと、この方法には欠陥が生じます。

方法 2: オプションのチェーン (?.) と未定義のチェック

まず例を挙げてみましょう:

const obj1 = { name: 'Andy', age: 21 }
const obj2 = { name: 'Alice' }

console.log( obj1?.age !== undefined ? '存在' : '不存在' ); // 存在
console.log( obj2?.age !== undefined ? '存在' : '不存在' ); // 不存在

この比較のロジックは、JS 言語では、存在しない値は未定義であるということです。

しかし、オブジェクトでは次の狀況も発生する可能性があります:

const obj = {
    name: 'Andy',
    age: undefined
}

この場合、年齢屬性は「存在する」か「存在しない」のどちらにするべきでしょうか?

それは特定の需要環(huán)境によって異なりますので、何とも言えません。

方法 3: Object.keys() を検索する

オブジェクトに age 屬性があるかどうかを知る必要があると言った場合、その値が何であるかは気にしません。

次のメソッドを使用できます:

const obj = { name: 'Andy', age: 21 }

console.log( Object.keys(obj).includes('age') ? '存在' : '不存在' ); // 存在

Object.keys() を使用して、判斷用の獨(dú)自の列挙可能なプロパティ名を取得します。

ここには 2 つのキーワードがあります。1 つは「own」、もう 1 つは「enumerable」です。

まずは「自分」とは何かについて話しましょう

たとえば、ここにオブジェクトがあります。そのオブジェクトに屬性名を追加します。

const obj = { name: 'Andy' }
// `name` 就是 obj 自身的屬性
console.log( Object.keys(obj) ); // [ 'name' ]

では、それ自體の屬性ではないものは何でしょうか?そこで登場するのが「プロトタイプ」です。オブジェクトにはプロトタイプがあり、プロトタイプに追加された屬性は「それ自體の」屬性ではありません。

const obj = Object.create( { type: 'human' } );
obj.name = 'Andy';

console.log( obj.name ); // Andy
console.log( obj.type ); // human
console.log( Object.keys(obj) ); // [ 'name' ]

この例では、type が obj の屬性であるかどうかをどのように判斷しますか?これは言うのが難しいですよね？これは緩和された言語環(huán)境によって引き起こされる問題です。

しかし、知っておく必要があるのは、この場合、Object.keys() はプロトタイプのプロパティを取得できないということです。なぜなら、「獨(dú)自の」プロパティしか読み取れないからです。

2つ目は「數(shù)えられる」

ここで屬性記述子について説明しますが、私の同僚の多くは、JS 言語のオブジェクト內(nèi)に各屬性に記述子があることを知りません。
読み方は？印刷して見てみましょう:

const obj1 = { name: 'Andy', age: 21 }
const obj2 = { name: 'Alice' }

console.log( obj1.age ? '存在' : '不存在' ); // 存在
console.log( obj2.age ? '存在' : '不存在' ); // 不存在

この記述子は実際にはオブジェクトであり、値、書き込み可能、??およびこの (列挙可能) 列挙可能な ...

などのこの屬性に関する情報(bào)を記述していることがわかります。

この列挙可能変數(shù)は、その屬性と列挙可能かどうかを定義します。たとえば、この屬性は for...in ループ中に読み取ることができ、同じことが Object.keys() にも當(dāng)てはまります。

プロパティを非列挙可能として再定義すると、Object.keys() はこのプロパティを読み取ることができません。

const obj = { name: 'Baby', age: 0 }

console.log( obj.age ? '存在' : '不存在' ); // 不存在

これには屬性記述子に関する知識が関係します。これはネイティブ JS 言語の非常に重要な知識ですが、私の知っているフロントエンド プログラマーの多くはネイティブ JS の知識が不足していることがわかりました。

では、判定したい屬性が列挙可能かどうかに関係なく、それ自體の屬性だけでよい場合はどうなるでしょうか?その場合、Object.keys() は使用できません。次の方法を使用できます。

方法 4: Object.hasOwn() または hasOwnProperty() を使用する

Object.hasOwn() と hasOwnProperty() の違いは何ですか?

Object.hasOwn()はES2022で追加されたメソッドで、オブジェクト自體が特定のプロパティを持っているかどうかを確認(rèn)するために使用され、hasOwnPropertyの最適化処理を置き換えるために使用されます。このメソッドは後から追加されたものであるため、ブラウザの新しいバージョンだけを考慮すれば、引き続き使用できます。

これら 2 つのメソッドは "獨(dú)自の" 屬性名を決定するため、列挙可能かどうかに関係なく読み取ることができます。

const obj1 = { name: 'Andy', age: 21 }
const obj2 = { name: 'Alice' }

console.log( obj1?.age !== undefined ? '存在' : '不存在' ); // 存在
console.log( obj2?.age !== undefined ? '存在' : '不存在' ); // 不存在

なぜ Object.hasOwn() を使用するかというと、オブジェクトの hasOwnProperty() が変更される可能性があるためです。

const obj = {
    name: 'Andy',
    age: undefined
}

判定したい屬性名がそれ自體で列挙可能である必要がなく、プロトタイプでもよい場合は、最後の方法を使用する必要があります。

方法 5: 演算子內(nèi)

in 演算子は、プロパティがオブジェクトまたはそのプロトタイプ チェーンに存在するかどうかを判斷するために使用されます。

const obj = { name: 'Andy', age: 21 }

console.log( Object.keys(obj).includes('age') ? '存在' : '不存在' ); // 存在

要約する

これらの方法は、どの方法が正しいか、どちらが間違っているかを示しているわけではありません。すべてのシナリオが同じアプローチに適しているわけではないため、狀況に応じてベスト プラクティスに従って、コードの可読性とセキュリティを強(qiáng)化してください。

以上が[すべてのブレークスルー] JavaScript にプロパティが存在するかどうかを確認(rèn)する方法の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。