[Jeder Durchbruch] So ermitteln Sie, ob eine Eigenschaft in JavaScript vorhanden ist

Vorwort

Bei der JavaScript-Entwicklung müssen wir häufig feststellen, ob eine Eigenschaft in einem Objekt vorhanden ist.
Da JavaScript eine relativ lockere Sprache ist, ist es für uns schwierig, etwas Strengeres zu tun. Es gibt beispielsweise ein Problem bei der Definition von „ob ein Attribut existiert“ in JavaScript. Wann ist es vorhanden und wann gilt es als nicht vorhanden? Es gibt keine richtige oder falsche Antwort, aber in unterschiedlichen Kontexten und unterschiedlichen Entwicklungsbedürfnissen ist die Bedeutung von „Existenz“ unterschiedlich.
Hier werde ich über die fünf häufig verwendeten Beurteilungsmethoden und ihre Probleme sprechen.

Methode 1: Boolesches Urteil

Hier ist ein Beispiel:

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

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

Lassen Sie uns zunächst über die Mängel dieser Methode sprechen
Wenn:

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

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

In diesem Fall sollte das Alter „vorhanden“ sein, es wird jedoch als „existiert nicht“ gewertet.

Diese Methode kann also nicht angewendet werden?
Dies hängt von den Entwicklungsbedürfnissen des Unternehmens ab.
Wenn Sie wissen, dass dieses Attribut in Ihren Geschäftsentwicklungsanforderungen nicht 0, leere Zeichenfolge, NaN, undefiniert usw. sein darf, ist diese Beurteilung immer noch möglich.
Wenn Sie es in einer strengeren Umgebung einsetzen, weist diese Methode Mängel auf.

Methode 2: Optionale Verkettung (?.) und undefinierte Prüfungen

Lassen Sie uns zunächst ein Beispiel geben:

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

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

Die Logik dieses Vergleichs besteht darin, dass in der JS-Sprache ein Wert, der nicht existiert, undefiniert ist.

Aber in einem Objekt kann diese Situation auch auftreten:

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

Sollte das Altersattribut in diesem Fall „existiert“ oder „existiert nicht“ lauten?

Das ist schwer zu sagen, es hängt immer noch von Ihrem spezifischen Nachfrageumfeld ab.

Methode 3: Object.keys() finden

Wenn ich sage, ich muss wissen, ob es in einem Objekt ein Attribut „Alter“ gibt, ist mir sein Wert egal.

Wir können diese Methode verwenden:

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

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

Verwenden Sie Object.keys(), um einen eigenen aufzählbaren Eigenschaftsnamen zur Beurteilung abzurufen.

Hier gibt es zwei Schlüsselwörter, eines ist „own“ und das andere ist „enumerable“.

Lassen Sie uns zunächst darüber sprechen, was „Selbst“ ist.

Zum Beispiel gibt es hier ein Objekt. Fügen Sie dem Objekt einen Attributnamen hinzu:

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

Was ist also kein Attribut seiner selbst? Hier kommt der „Prototyp“ ins Spiel. Ein Objekt verfügt über einen Prototyp, und die dem Prototyp hinzugefügten Attribute sind keine „eigenen“ Attribute.

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' ]

Wie bestimmen Sie in diesem Beispiel, ob der Typ ein Attribut von obj ist? Das ist schwer zu sagen, oder? Man kann ja oder nein sagen. Dies ist das Problem, das durch die entspannte Sprachumgebung verursacht wird.

Was Sie jedoch wissen müssen, ist, dass Object.keys() in diesem Fall die Eigenschaften des Prototyps nicht abrufen kann. Weil es nur „eigene“ Eigenschaften lesen kann.

Die zweite ist „aufzählbar“.

Hier werden Attributdeskriptoren erwähnt. Viele meiner Kollegen wissen nicht, dass in der JS-Sprache jedes Attribut einen Deskriptor hat.
Wie liest man es? Lass es uns ausdrucken und einen Blick darauf werfen:

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

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

Sie werden feststellen, dass es sich bei diesem Deskriptor tatsächlich um ein Objekt handelt, das einige Informationen zu diesem Attribut beschreibt, z. B. Wert, beschreibbar und dieses (aufzählbare) aufzählbare ...

Diese Aufzählung definiert dieses Attribut und ob es aufgezählt werden kann. Dieses Attribut kann beispielsweise während der for...in-Schleife gelesen werden, und das Gleiche gilt für Object.keys().

Wenn ich eine Eigenschaft als nicht aufzählbar neu definiere, kann Object.keys() diese Eigenschaft nicht lesen.

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

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

Dazu gehören Kenntnisse über Attributdeskriptoren. Das sind sehr wichtige Kenntnisse der nativen JS-Sprache, und ich finde, dass vielen Front-End-Programmierern, die ich kenne, diese Kenntnisse der nativen JS fehlen.

Was ist, wenn das Attribut, das Sie beurteilen möchten, nur ein eigenes Attribut sein muss, unabhängig davon, ob es aufzählbar ist oder nicht? Dann können Sie Object.keys() nicht verwenden. Sie können die folgende Methode verwenden.

Methode 4: Verwenden Sie Object.hasOwn() oder hasOwnProperty()

Was ist der Unterschied zwischen Object.hasOwn() und hasOwnProperty()?

Object.hasOwn() ist eine in ES2022 hinzugefügte Methode, mit der überprüft wird, ob das Objekt selbst eine bestimmte Eigenschaft hat, und die die Optimierungsverarbeitung von hasOwnProperty ersetzt. Da diese Methode später hinzugefügt wurde, ist die Kompatibilität immer noch ein Problem. Wenn Sie nur neue Browserversionen in Betracht ziehen, kann sie weiterhin verwendet werden.

Diese beiden Methoden ermitteln den „eigenen“ Attributnamen, sodass dieser unabhängig davon gelesen werden kann, ob er aufzählbar ist oder nicht.

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

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

Warum Object.hasOwn() verwenden, da hasOwnProperty() des Objekts möglicherweise geändert wird:

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

Wenn der Attributname, den Sie beurteilen möchten, kein eigener und aufzählbarer Name sein muss und auch ein Prototyp akzeptabel ist, sollte die letzte Methode verwendet werden.

Methode 5: im Operator

Der

in-Operator wird verwendet, um zu bestimmen, ob eine Eigenschaft im Objekt oder seiner Prototypenkette vorhanden ist.

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

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

Zusammenfassen

Diese Methoden sagen nicht, welche Methode richtig oder falsch ist. Nicht jedes Szenario ist für den gleichen Ansatz geeignet. Halten Sie sich je nach Situation an Best Practices, um die Lesbarkeit und Sicherheit des Codes zu verbessern.

Das obige ist der detaillierte Inhalt von[Jeder Durchbruch] So ermitteln Sie, ob eine Eigenschaft in JavaScript vorhanden ist. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!