原生js判断对象是否存在该属性以及存在的问题

typeof

一般情况下，使用typeof操作符可以判断一个对象上是否存在该属性，我们看一下下面的代码

const obj = {
  name: "ray",
  job: "frontend",
  age: undefined,
};
console.log(typeof obj.name !== "undefined"); 
// 输出 true
console.log(typeof obj.job !== "undefined"); 
// 输出 true
console.log(typeof obj.age !== "undefined"); 
// 输出 false
console.log(typeof obj.hobby !== "undefined"); 
// 输出 false

通使用typeof可以判断一个对象上是否存在该属性，但是如果一个对象上有该属性且该属性的值为undefined时，那么此时判断会有问题。比如上面的代码：age属性的值为undefined，使用typeof判断的结果并不是我们期望的

undefined

一般情况下，我们利用属性值是否为undefined，可以判断一个对象上是否存在该属性，我们看一下下面的代码

const obj = {
  name: "ray",
  job: "frontend",
  age: undefined,
};
console.log(obj.name !== undefined); 
// 输出 true
console.log(obj.job !== undefined); 
// 输出 true
console.log(obj.age !== undefined); 
// 输出 false
console.log(obj.sax !== undefined); 
// 输出 false

使用属性值是否为undefined可以判断一个对象上是否存在该属性。但是如果一个对象上有该属性且该属性的值为undefined时，那么此时判断会有问题。比如上面的代码：age属性的值为undefined，使用属性值是否为undefined判断的结果并不是我们期望的。

null

一般情况下，我们利用属性值是否==null可以判断一个对象上是否存在该属性，这是因为在javascript中，null == undefined会返回true，我们看一下下面的代码

const obj = {
  name: "ray",
  job: "frontend",
  age: undefined,
  hobby: null,
  sex: "undefined",
};
console.log(obj.name != null); 
// 输出 true
console.log(obj.job != null); 
// 输出 true
console.log(obj.age != null); 
// 输出 false
console.log(obj.hobby != null); 
// 输出 false
console.log(obj.sax != null); 
// 输出 false
console.log(obj.address != null); 
// 输出 false

在不在乎类型的前提下，可以使用属性值是否为null来判断一个对象上是否存在该属性。但是一个对象上有该属性且该属性的值为undefined、"undefined"、null时会存在问题。比如上面的代码：age: undefined、sex: "undefined"、hobby: null使用是否为null来判断均不是我们期望的

in

使用in操作符可以判断一个对象上是否存在该属性，我们看一下下面的代码

const obj = {
  name: "ray",
  job: "frontend",
};
console.log("name" in obj); 
// 输出 true
console.log("job" in obj); 
// 输出 true
console.log("age" in obj); 
// 输出 false

一般情况下，我们使用in可以判断一个对象上是否存在该属性。在js中，一切皆对象。操作符in无法判断出该属性是自己的还是继承来的，我们看一下以下代码

function Cat(name) {
  this.name = name;
}
Cat.prototype.type = "动物";
var cat = new Cat("猫");
console.log("name" in cat); 
// 输出 true
console.log("color" in cat); 
// 输出 false
console.log("type" in cat); 
// 输出 true
// ---------------------------------
class Cat1 {
  constructor(name) {
    this.name = name;
  }
}
Cat1.prototype.type = "动物";
var cat1 = new Cat1("狗");
console.log("name" in cat1); 
// 输出 true
console.log("color" in cat1); 
// 输出 false
console.log("type" in cat1); 
// 输出 true

在上面的代码中，如果我们仅判断cat、cat1上面是否存在某个属性时，上面的代码是没有问题的。但是如果我们需要判断该属性是否是自己的而非继承的，那么使用in操作符判断的结果并不是我们期望的

hasOwnProperty

大多数情况下，使用hasOwnProperty是判断一个对象是否存在该属性的首选方法。我们看一下以下代码

const obj = {
  name: "ray",
};
console.log(Object.prototype.hasOwnProperty.call(obj, "name")); 
// 输出 true
console.log(Object.prototype.hasOwnProperty.call(obj, "job")); 
// 输出 false

function Cat(name) {
  this.name = name;
}
Cat.prototype.type = "动物";
var cat = new Cat("大明");
console.log(Object.prototype.hasOwnProperty.call(cat, "name")); 
// 输出 true
console.log(Object.prototype.hasOwnProperty.call(cat, "type")); 
// 输出 false

class Cat1 {
  constructor(name) {
    this.name = name;
  }
}
Cat1.prototype.type = "动物";
var cat1 = new Cat1("大明", "黄色");
console.log(Object.prototype.hasOwnProperty.call(cat1, "name")); 
// 输出 true
console.log(Object.prototype.hasOwnProperty.call(cat1, "type")); 
// 输出 false

在上面的代码中，我们可以看出hasOwnProperty不仅能精确判断出一个对象是否存在该属性，且继承的属性也会返回false。换句话说，使用该方法可以判断出对象的属性是自己的还是继承来的

Reflect.has(target, key)

Reflect是ES6为了操作对象而提供的新API,而使用Reflect.has也可以判断一个对象是否存在该属性。我们看一下以下代码

const obj = {
  name: "ray",
};
console.log(Reflect.has(obj, "name")); 
// 输出 true
console.log(Reflect.has(obj, "job")); 
// 输出 false

function Cat(name) {
  this.name = name;
}
Cat.prototype.type = "动物";
var cat = new Cat("大明");
console.log(Reflect.has(cat, "name")); 
// 输出 true
console.log(Reflect.has(cat, "type")); 
// 输出 true

class Cat1 {
  constructor(name) {
    this.name = name;
  }
}
Cat1.prototype.type = "动物";
var cat1 = new Cat1("大明", "黄色");
console.log(Reflect.has(cat1, "name")); 
// 输出 true
console.log(Reflect.has(cat1, "type")); 
// 输出 true

关于更多Reflect的用法请查看