JavaScript: проверка наличия свойств в ассоциативном массиве

Быстрый ответ

JavaScript не имеет встроенной функции isset(). Вместо этого можно использовать другие способы для проверки существования переменной или свойства:

// Проверяем наличие переменной myVar
if (typeof myVar !== 'undefined') {
  // Переменная myVar существует!
}

Чтобы проверить наличие свойства в объекте, используйте следующий код:

// Существует ли свойство 'prop' в объекте myObj?
if ('prop' in myObj) {
  // Свойство 'prop' найдено!
}

Или выполняем проверку на собственность свойства:

// Является ли 'prop' собственным свойством объекта myObj
if (myObj.hasOwnProperty('prop')) {
  // 'Prop' является собственным свойством объекта myObj!
}

Принципы проведения проверок на существование

Проверка переменных с помощью оператора typeof

Если вы не уверены в существовании переменной, оператор typeof придет на помощь:

// Использование оператора typeof безопасно
if (typeof whoKnows !== 'undefined') {
  // Переменная определена!
}

Подробнее об этом расскажет наш спикер на видео

Метод hasOwnProperty для проверки собственных свойств

Метод hasOwnProperty используется для проверки собственных свойств объекта, исключая влияние наследуемых свойств:

// Метод учитывает только собственные свойства
if (myObj.hasOwnProperty('prop')) {
  // 'Prop' – собственное свойство объекта myObj
}

Оператор in для проверки собственных и наследуемых свойств

Оператор in дает возможность проверить наличие свойства как среди своих, так и унаследованных:

// Не делает различия между собственными и унаследованными свойствами
if ('prop' in myObj) {
  // Свойство 'Prop' найдено в объекте myObj
}

Современные возможности: использование оператора опционального вызова (?.) и объединения с null (??)

Два современных оператора JavaScript — опциональный вызов и объединение с null — облегчают работу с неопределенными значениями:

// Возврат значения свойства или undefined, не вызывая ошибку
let value = myObj?.prop;

// Замена null или undefined на 'default'
let secureValue = myObj?.prop ?? 'default';

Глубокая проверка: использование библиотеки Lodash и пакетов NPM

Для решения более сложных задач, связанных с проверкой существования свойств, можно воспользоваться библиотеками, например, Lodash или Underscore:

// Используем Lodash для глубокой проверки
_.has(myObj, 'deeply.nested.prop');

Пакет isset-php даёт возможность использовать функциональность isset() из PHP в JavaScript, позволяя проверять несколько аргументов одновременно:

// Используем функциональность `isset()` из PHP
const isset = require('isset-php');
if (isset(() => myObj.prop1, () => myObj.prop2)) {
  // Все свойства на месте, можно приступать к работе!
}

Проверка глобальных переменных с помощью объекта window

Глобальные переменные проверяются через объект window:

// Проверяем глобальную переменную с использованием объекта `window`
if ('myGlobalVar' in window) {
  // Глобальная переменная 'myGlobalVar' существует
}

Создание собственной функции isset() с использованием стрелочной функции

Можно определить свою функцию isset(), используя стрелочную функцию:

// Создаем собственную функцию isset()
const isset = (prop) => typeof prop !== 'undefined';
if (isset(myObj?.prop)) {
  // Свойство myObj.prop существует
}

Использование оператора in с отрицанием

Оператор in можно использовать и для проверки отсутствия свойства:

// Существует ли свойство 'Prop' в myObj?
if (!('prop' in myObj)) {
  // 'Prop' отсутствует в объекте myObj
}

Визуализация

Считайте, что объект это дом, а свойства — это лампы в комнатах:

Дом (🏠): это объект, а комнаты — это свойства.
Свет горит в комнатах (💡): Свойства установлены и их значения определены.
Темное помещение (🌑): Свойства не установлены или их значения не определены.

Проверка наличия свойства — это по сути проверка, горит ли свет в комнате:

if (typeof house['livingRoom'] !== 'undefined') {
  // В гостиной светло – свойство существует!
}

Об эксплуатации этих методов

Проверка ассоциативных массивов

В работе с ассоциативными массивами основное – это поиск в нужном месте:

// Находим определенный ключ в массиве myArray
if (myArray.hasOwnProperty('key')) {
  // Ключ найден и проблема решена!
}

Внимание к значениям, интерпретируемым как false

При проверке свойств необходимо быть внимательным к значениям, интерпретируемым как false, которые могут вводить в заблуждение:

if (myObj.prop) {
  // Это выражение может быть ошибочным из-за значений, интерпретируемых как false
}

Последовательность – залог успеха

Постоянное использование одного метода проверки свойств помогает избежать ошибок:

if (typeof someArray['key'] !== 'undefined') {
  // Целесообразно последовательно применять одни и те же проверки
}

Знание – сила

Чем больше вы знаете, тем лучше справляетесь, поэтому изучите предложенные полезные материалы для большего понимания typeof, hasOwnProperty, in и других аспектов проверок на существование в JavaScript.

Полезные материалы

1. undefined – JavaScript | MDN
2. Истинные и ложные значения: Когда всё не так, как кажется в JavaScript — SitePoint
3. Как проверить значение на "undefined" в JavaScript? – Stack Overflow
4. TypeScript: JavaScript с дополнительной поддержкой типов.
5. Найдите и исправьте проблемы в вашем коде на JavaScript – ESLint – Плагин для проверки кода на JavaScript
6. GitHub – tc39/proposal-optional-chaining