5 способов проверить, существует ли ключ в объекте в JavaScript

Использование оператора «in»

Оператор in возвращает true, если указанное свойство присутствует в указанном объекте или в цепочке его прототипов, в противном случае он возвращает false.

const app = { name: 'Instagram', type: 'Social Media' };
console.log('name' in app); // true
console.log('release_date' in app); // false

Использование метода Reflect.has()

Reflect — это встроенный объект, который предоставляет некоторые полезные методы для операций JavaScript. Метод has() этого объекта возвращает true, если указанное свойство присутствует в указанном объекте или в цепочке его прототипов, иначе возвращается false. Синтаксис:

Reflect.has(targetObject, propertyKey);

Давайте используем его на одном примере.

const app = { name: 'Instagram', type: 'Social Media' };
console.log(Reflect.has(app, 'name')); // true
console.log(Reflect.has(app, 'release_date')); // false

Использование метода hasOwnProperty()

Этот метод присутствует в прототипе объекта. Поэтому любой объект, не созданный с помощью Object.create(null), имеет доступ к этому методу. Этот метод возвращает true, если указанное свойство присутствует в объекте (не наследуется), иначе он возвращает false.

const app = { name: 'Instagram', type: 'Social Media' };
console.log(app.hasOwnProperty('type')); // true
console.log(app.hasOwnProperty('founder_name')); // false

Путем доступа к свойству и сравнения его с «undefined».

Если мы обращаемся к какому-либо свойству, не существующему у объекта, возвращается undefined. Таким образом, мы можем получить доступ к свойству и сравнить его значение с undefined, чтобы узнать, существует оно или нет.

const app = { name: 'Instagram', type: 'Social Media' };
console.log(app['name'] === undefined); // false
console.log(app['founder_name'] === undefined); // true

// or simply use an if block without comparing to undefined
if (app['founder_name']) {
    // do your work
}

Мы не можем определить существование свойства с помощью этого подхода, если свойство существует в объекте и имеет значение undefined.

const auth = { token: undefined };
console.log(auth['token'] === undefined); // true
console.log(auth['timestamp'] === undefined); // true

Метод Object.hasOwn() (обновление ES2022)

Этот метод возвращает true, если указанное свойство присутствует в объекте (не наследуется), в противном случае возвращается false.

const app = { name: 'Instagram', type: 'Social Media' };
console.log(Object.hasOwn(app, 'type')); // true
console.log(Object.hasOwn(app, 'founder_name')); // false

Кроме метода hasOwnProperty() и hasOwn(), остальные три способа прекрасно работают в случае унаследованных свойств. Давайте посмотрим один пример.

function square(side) {
    this.side = side;
}

square.prototype.getArea = function () {
    return Math.pow(this.side, 2);
}

const sq = new square(5);
console.log(sq); // { side: 5 };
console.log(sq.getArea()); // 25
/*
 Here "side" will be part of own object whereas
 "getArea" will be inherited through prototype chain.
*/

// checking with 'in'
console.log('side' in sq); // true
console.log('getArea' in sq); // true

// checking with 'Reflect.has()'
console.log(Reflect.has(sq, 'side')); // true
console.log(Reflect.has(sq, 'getArea')); // true

// checking with 'hasOwnProperty()'
console.log(sq.hasOwnProperty('side')); // true
console.log(sq.hasOwnProperty('getArea')); // false

// comparing with 'undefined'
console.log(sq['side'] !== undefined); // true
console.log(sq['getArea'] !== undefined); // true

// checking with 'hasOwn()'
console.log(Object.hasOwn(sq, 'side')); // true
console.log(Object.hasOwn(sq, 'getArea')); // false

Вывод

Первые два подхода (оператор in и метод Reflect.has()) являются более заметными, в то время как остальные три подхода имеют некоторые ограничения.

• Как следует из названия, методы hasOwnProperty() и hasOwn() работают только для собственных свойств объекта, но не для унаследованных свойств.
• Метод hasOwnProperty() недоступен для объектов, созданных с помощью Object.create(null).
• Подход «сравнение с undefined» работает хорошо, если только указанное свойство не существует, но имеет undefined в качестве значения.

Вам также может понравиться

• Object.freeze() vs Object.seal() vs Object.preventExtensions()
• Map в JavaScript и когда он является лучшим выбором, чем Object
• JavaScript Объект Set для хранения уникальных значений
• Утилитарные методы Pipe и Compose в JavaScript
• Функции-генераторы в JavaScript
• Краткое руководство по методу Object.defineProperty()
• API вибрации в JavaScript
• JavaScript Fetch API для выполнения HTTP-запросов
• Краткое руководство по Promises в JavaScript
• 20+ приемов кодирования с помощью сокращений JavaScript

Спасибо за ваше время ❤️
Найдите больше моих статей о веб-разработке на jscurious.com