Home > Web Front-end > Front-end Q&A > How to determine whether an object has a certain attribute in es6

How to determine whether an object has a certain attribute in es6

青灯夜游
Release: 2022-04-11 15:15:18
Original
5035 people have browsed it

Judgment method: 1. Use the "object.property name! == undefined" statement to determine. If the return value is true, then there is a certain attribute on the object; 2. Use the "'property name' in object" statement , if it returns true, there is a certain attribute; 3. Use the "object.hasOwnProperty('property name')" statement.

How to determine whether an object has a certain attribute in es6

The operating environment of this tutorial: Windows 7 system, ECMAScript version 6, Dell G3 computer.

es6 Determine whether the object has a certain attribute

Method 1: Point (.) undefined judgment

We know that the attribute value of an object can be obtained through dots or square brackets. If the attribute does not exist on the object, undefined will be returned. This method can determine the own properties and inherited properties of the specified object. If the object itself does not have a detected property and the property is on the prototype chain, the property value on the prototype chain will be returned.

// 创建对象
let obj = {
    name: 'Scarlett',
    age: 37
}
console.log(obj.name !== undefined)  // true 自身属性存在
console.log(obj.gender !== undefined)  // false gender属性不存在

// 在原型上添加一个可枚举属性
Object.prototype.nationality = 'America'

// 在obj对象上添加一个不可枚举属性
Object.defineProperty(obj, 'occupation', {
    value: 'actress',
    enumerable: false
})
Copy after login

Simply, we can use the return value of Object.propertyName !== undefined to determine whether the object contains a certain property. But there is one situation, that is, if the attribute name exists and the attribute value is undefined, the desired result cannot be returned.

// 新增一个值为undefined的属性
obj.birthday = undefined

console.log(obj.birthday !== undefined)  // false
Copy after login

Well, we can use the in operator to solve this problem.

Method 2: in operator

This method can determine whether a certain attribute exists in the own attributes and inherited attributes of the specified object, and returns true if it exists. The in operator can also detect properties on the prototype chain. The syntax of the

'name' in obj  // true 自身属性存在
'occupation' in obj  // true 不可枚举属性存在
'nationality' in obj  // true 继承属性
'birthday' in obj  // true 值为undefined的属性
Copy after login

in operator is also very simple. The scope and effect are the same as dots (.) or square brackets ([]). The difference is that attributes with a value of undefined can also be judged normally.

  • The limitation of the above two methods is that they cannot accurately distinguish between self-owned properties and properties on the prototype chain. If you want to check whether your own properties exist, you need Object.hasOwnProperty().

Method 3: Object.hasOwnProperty()

Object.hasOwnProperty() is used to determine whether the specified object itself contains a certain attribute (not Inherited), returns a Boolean value.

obj.hasOwnProperty('name')  // true 自身属性
obj.hasOwnProperty('occupation')  // true 不可枚举属性
obj.hasOwnProperty('birthday')  // true
obj.hasOwnProperty('nationality')  // false 原型链上继承的属性
Copy after login

This method will filter out those inherited attributes and return true when the detected attribute is its own attribute.

【Related recommendations: javascript video tutorial, web front-end

The above is the detailed content of How to determine whether an object has a certain attribute in es6. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template