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

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

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

1. Метод hasOwnProperty()

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

const hero = { name: 'Batman'
}; hero.hasOwnProperty('name'); // => true
hero.hasOwnProperty('realName'); // => false

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

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

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

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

const hero = { name: 'Batman'
}; hero.toString; // => function() {...} hero.hasOwnProperty('toString'); // => false

2. Оператор in

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

const hero = { name: 'Batman'
}; 'name' in hero; // => true 'realName' in hero; // => false

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

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

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

const hero = { name: 'Batman'
}; hero.toString; // => function() {...} 'toString' in hero; // => true

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

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

const hero = { name: 'Batman'
}; hero.name; // => 'Batman'
hero.realName; // => undefined

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

const hero = { name: 'Batman'
}; hero.name !== undefined; // => true
hero.realName !== undefined; // => false

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

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

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

const hero = { name: undefined
}; hero.name !== 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.