> 文章列表 > js判断对象中是否含有某个属性

js判断对象中是否含有某个属性

js判断对象中是否含有某个属性

参考文档

JavaScript 判断对象中是否含有某个属性
JS判断对象属性是否存在的方案

. 或者方括号 [ ] + undefined判断

我们知道,通过点或者方括号可以获取对象的属性值,如果对象上不存在该属性,则会返回 undefined。这种方式可以判断指定对象的自有属性继承属性,如果对象自身没有检测的属性,而原型链上有该属性,则会返回原型链上的属性值。

// 创建对象
let obj = {name: "xiaoming",age: 37,mother: {},
};
console.log(obj.name !== undefined); // true 自身属性存在
console.log(obj["name"] !== undefined); // true
console.log(obj.gender !== undefined); // false gender属性不存在// 在原型上添加一个可枚举属性
Object.prototype.nationality = "America";console.log(obj.nationality !== undefined); // true

简单的,我们可以通过 Object.propertyName !== undefined 的返回值来判断对象上是否含有某属性。但有一种情况,即:属性名存在,属性值为 undefined 的情况下,就不能返回想要的结果。

// 新增一个值为undefined的属性
obj.birthday = undefined
​
console.log(obj.birthday !== undefined)  // false

那么,我们可以使用 in 运算符来解决这个问题。

in

in运算符可以判断指定对象的自有属性继承属性中是否存在某属性,如果存在则返回 true。 in 运算符也能检测到原型链上的属性。

console.log("name" in obj);         //true 自身属性存在
console.log("gender" in obj);       // false gender属性不存在
console.log("nationality" in obj);  //true 继承属性存在
console.log("birthday" in obj);     //true 值为undefined的属性

in 运算符的语法也很简单,作用范围和效果与点( . )或方括号( [ ] )相同,不同的是值为 undefined 的属性也可以正常判断。

Reflect.has()

Reflect是在ES2015新增的一个内置对象,提供了与Javascript对象交互的方法。
判断一个对象是否存在某个属性,和 in 运算符] 的功能完全相同。
用法:Reflect.has(obj, propName)

console.log(Reflect.has(obj, "name")); //true 自身属性存在
console.log(Reflect.has(obj, "gender")); // false gender属性不存在
console.log(Reflect.has(obj, "nationality")); //true 继承属性存在
console.log(Reflect.has(obj, "birthday")); //true 值为undefined的属性

注: 以上这三种方法的局限性就是:不能准确区分是自有属性还是原型链上的属性。如果检测自身属性是否存在时,就需要 Object.hasOwnProperty() 了。

Object.prototype.hasOwnProperty

文档介绍
Object.prototype.hasOwnProperty 用来判断指定对象自身是否含有某个属性(非继承),返回布尔值。

console.log(obj.hasOwnProperty("name")); // true 自身属性
console.log(obj.hasOwnProperty("gender")); // false
console.log(obj.hasOwnProperty("birthday")); // true
console.log(obj.hasOwnProperty("nationality")); // false 原型链上继承的属性

该方法会过滤掉那些继承来的属性,当检测属性为自有属性时返回 true。

Object.hasOwn() 强烈推荐

文档介绍
如果指定的对象自身有指定的属性,则Object.hasOwn() 返回 true。如果属性是继承的或者不存在,该方法返回 false。

备注: Object.hasOwn() 旨在取代 Object.hasOwnProperty()

console.log(Object.hasOwn(obj, "name")); // true 自身属性
console.log(Object.hasOwn(obj, "gender")); // false
console.log(Object.hasOwn(obj, "birthday")); // true
console.log(Object.hasOwn(obj, "nationality")); // false 原型链上继承的属性

Object.keys()

Object.keys() ES5 新增的一个对象方法,该方法返回指定对象自身的可枚举属性(不含继承的和Symbol属性)组成的数组。

console.log(Object.keys(obj).includes("nationality")); // false  原型链上继承的属性
console.log(Object.keys(obj).indexOf("gender")); // -1  gender属性不存在

补充

因为使用for...in遍历对象时,不仅会遍历自身属性,也会遍历原型链上的属性

let obj = {name: "xiaoming",age: 37,
};
// 在原型上添加一个可枚举属性
Object.prototype.nationality = "America";
for (let key in obj) {console.log(key); // 打印出: name  age  nationalityif (Object.hasOwn(obj, key)) {console.log(key); // 打印出: name  age}
}

总结:
1、判断自身属性,不包含继承属性,采用 Object.hasOwn() 最为便捷。
2、判断自身属性以及继承属性,inReflect.has()