JS 5种方法判断某属性是否在指定对象中

技术频道 - js技术

JS 5种方法判断某属性是否在指定对象中

作者:admin 时间:2022-4-14 15:52:43 浏览:

在JS实际编程中，有时我们需要判断某个属性是否在指定对象里，本文将介绍5种方法判断某属性是否在指定对象中，所有方法均有实例演示。

in运算符
Reflect.has() 方法
hasOwnProperty() 方法
Object.prototype.hasOwnProperty() 方法
Object.hasOwn() 方法

1、in运算符

如果指定的属性在指定的对象或其原型链中，则in运算符返回true，否则返回false。

实例：

let obj = {name: "卡卡测速网 webkaka.com"}
console.log('name' in obj);

true

但是in操作符有一个缺点，那就是：如果属性来自对象的原型，它仍然会返回true，例如：

let obj = {name: "卡卡测速网 webkaka.com"}
console.log('toString' in obj);

true

JS中in的用法

我们常常用in来查询数组获取数据。在JS中in可以用来查寻一个值是否存在数组中，存在为ture否则为flase。如：

var arr=[1,2,3,4,5]
console.log(1 in arr)

true

存在，所以结果为ture。

也可以将数组进行for/in 循环枚举出来。如：

var arr=[1,2,3,4,5]
for (var i in arr) {
  console.log(i)
}

说明，如下写法效果一样。

for(var i=0;i<arr.length;i++) 与 for (var i in arr)

结果为：

1
2
3
4
5

2、Reflect.has() 方法

Reflect.has方法允许你检查属性是否在对象中。它就像in操作符一样工作。如：

let obj = {name: "卡卡测速网 webkaka.com"}
console.log(Reflect.has(obj,'name'));

true

但是，Reflect.has()也存在跟in一样的一个缺点，那就是如果属性来自对象的原型，它仍然会返回true。如：

let obj = {name: "卡卡测速网 webkaka.com"}
console.log(Reflect.has(obj,'toString'));

true

示例，使用 Reflect.has() ：

Reflect.has({x: 0}, "x"); // true
Reflect.has({x: 0}, "y"); // false

// 如果该属性存在于原型链中，返回true
Reflect.has({x: 0}, "toString");

// Proxy 对象的 .has() 句柄方法
obj = new Proxy({}, {
  has(t, k) { return k.startsWith("door"); }
});
Reflect.has(obj, "doorbell"); // true
Reflect.has(obj, "dormitory"); // false

3、hasOwnProperty() 方法

hasOwnProperty()方法返回一个布尔值，指示对象是否具有指定的属性作为它自己的属性（而不是继承它）。

用法：

let obj = {name: "卡卡测速网 webkaka.com"}
console.log(obj.hasOwnProperty('name'));

true

它比前面介绍的in和Reflect.has()好用的地方在于，它可以正确地区分对象本身的属性和其原型的属性。如：

let obj = {name: "卡卡测速网 webkaka.com"}
console.log(obj.hasOwnProperty('toString'));

false

示例：

const object1 = {};
object1.property1 = 42;

console.log(object1.hasOwnProperty('property1'));
// expected output: true

console.log(object1.hasOwnProperty('toString'));
// expected output: false

console.log(object1.hasOwnProperty('hasOwnProperty'));
// expected output: false

即使属性的值是 null 或 undefined，只要属性存在，hasOwnProperty 依旧会返回 true。如：

o = new Object();
o.propOne = null;
o.hasOwnProperty('propOne'); // 返回 true
o.propTwo = undefined;
o.hasOwnProperty('propTwo'); // 返回 true

自身属性与继承属性

下面的例子演示了 hasOwnProperty 方法对待自身属性和继承属性的区别：

o = new Object();
o.prop = 'exists';
o.hasOwnProperty('prop');             // 返回 true
o.hasOwnProperty('toString');         // 返回 false
o.hasOwnProperty('hasOwnProperty');   // 返回 false

但是这种写法有个缺点，就是如果对象是由创造的Object.create(null)，那么就不能使用这种方法了。

4、Object.prototype.hasOwnProperty() 方法

解决前面的问题很简单，我们只需要使用Object.prototype.hasOwnProperty. 该方法是直接调用内置的效用函数，跳过原型链。如：

let obj = Object.create(null);
obj.name = "卡卡测速网 webkaka.com";
console.log(Object.prototype.hasOwnProperty.call(obj,'name'));

true

而如下代码则返回false。

let obj = Object.create(null);
obj.name = "卡卡测速网 webkaka.com";
console.log(Object.prototype.hasOwnProperty.call(obj,'toString'));

5、 Object.hasOwn() 方法

由于前面的几种方式都不优雅，所以有了一个新的提议：Object.hasOwn。

如果指定的对象具有指定的属性作为其自己的Object.hasOwn()属性，则静态方法返回true。如果该属性被继承或不存在，则该方法返回false。如：

let obj = Object.create(null);
obj.name = "卡卡测速网 webkaka.com";
console.log(Object.hasOwn(obj,'name'));

true

而下面代码则返回false。

let obj = Object.create(null);
obj.name = "卡卡测速网 webkaka.com";
console.log(Object.hasOwn(obj,'toString'));

示例：

const object1 = {
  prop: 'exists'
};

console.log(Object.hasOwn(object1, 'prop'));
// expected output: true

console.log(Object.hasOwn(object1, 'toString'));
// expected output: false

console.log(Object.hasOwn(object1, 'undeclaredPropertyValue'));
// expected output: false

直接属性与继承属性

以下示例区分了直接属性和通过原型链继承的属性：

let example = {}
example.prop = 'exists';

// `hasOwn` will only return true for direct properties:
Object.hasOwn(example, 'prop');             // returns true
Object.hasOwn(example, 'toString');         // returns false
Object.hasOwn(example, 'hasOwnProperty');   // returns false

// The `in` operator will return true for direct or inherited properties:
'prop' in example;                          // returns true
'toString' in example;                      // returns true
'hasOwnProperty' in example;                // returns true

总结

本文通过大量示例详细介绍了 JS 5种方法判断某属性是否在指定对象中，它们之间的用法不用，功能也有所区别，所以在实际编程中要特别注意哪些情况下不能用哪些方法。