3 способа проверить в JavaScript, есть ли у объекта свойство

3 способа проверить в JavaScript, есть ли у объекта свойство

От автора: из-за динамической природы JavaScript вам может потребоваться проверить, существует ли в объекте конкретное свойство. В этом посте вы узнаете о трех распространенных способах проверки наличия свойства в объекте.

1. Метод hasOwnProperty()

У объекта JavaScript есть специальный метод object.hasOwnProperty(propName), который возвращает логическое значение, указывающее, имеет object ли свойство propName. В следующем примере hasOwnProperty() определяется наличие свойств:

Свойство name существует в объекте hero: таким образом, hero.hasOwnProperty(‘name’) возвращается true.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

С другой стороны, свойство realName не существует в объекте hero. Как и ожидалось, hero.hasOwnProperty(‘realName’) возвращается false — обозначает отсутствующее свойство.

Имя метода hasOwnProperty() предполагает, что он ищет свойства в собственных свойствах объекта. Проще говоря, собственными свойствами являются те, которые определены непосредственно для объекта.

Даже если у каждого объекта JavaScript есть унаследованное свойство toString (которое является методом, унаследованным от прототипа объекта), hasOwnProperty() оно не определяется как свойство:

2. Оператор in

Оператор in в propName in object также определяет, существует ли свойство propName в object. Давайте используем оператор in, чтобы определить существует ли свойство:

‘name’ in hero оценивается, как ожидается, true, потому что hero содержит свойство name. Однако hero не содержит свойства с именем ‘realName’. В результате ‘realName’ in hero оценивается, как false.

У оператора in короткий синтаксис, и я в большинстве случаев предпочитаю его методу hasOwnProperty(). Вот основное различие между методом hasOwnProperty() и оператором in: последний проверяет не только собственные свойства, но и список унаследованных свойств.

Вот почему, в отличие от hasOwnProperty(), оператор in обнаруживает, что унаследованное свойство toString существует в объекте hero:

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

3. Сравнение с undefined

Если вы обращаетесь к несуществующему свойству объекта, результат будет undefined. Давайте рассмотрим пример:

hero.realName оценивается undefined, потому что свойство realName отсутствует. Теперь вы можете понять идею: давайте сравним с undefined, чтобы определить наличие свойства.

hero.name !== undefined оценивается, как true, что показывает наличие свойства. С другой стороны, hero.realName !== undefined оценивается false, что указывает на отсутствие realName.

Я сравнивал с undefined, чтобы определить существование свойства в течение довольно долгого времени. Это простой, но грязный подход.

Обратите внимание, что этот подход может генерировать ложноотрицательный результат. Если свойство существует, но имеет значение undefined (этот случай, однако, встречается редко), сравнение с undefined оценивается неверно false:

Даже если свойство name существует (но имеет значение undefined), hero.name !== undefined оценивается как false: что неправильно указывает на отсутствие свойства.

4. Заключение

Есть 3 основных способа проверить, существует ли свойство. Первый способ — вызвать object.hasOwnProperty(propName). Метод возвращает true, если propName существует в object, и false в противном случае. Обратите внимание, что hasOwnProperty() выполняет поиск только в пределах собственных свойств объекта.

Второй подход использует оператор propName in object. Оператор оценивается true для существующего свойства, и false в противном случае. Оператор in ищет наличие свойств как в собственных, так и в унаследованных свойствах объекта.

Наконец, вы можете просто использовать object.propName !== undefined и сравнивать с undefined напрямую.

Автор: Dmitri Pavlutin

Источник: https://dmitripavlutin.com

Редакция: Команда webformyself.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook: