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

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!