JS判断对象属性是否存在的五种方案分享

下面是"JS判断对象属性是否存在的五种方案分享"的攻略：

方案一：in操作符

使用in操作符判断对象是否存在某个属性。

语法：

属性名 in 对象

示例：

const student = {
  name: 'Tom',
  age: 20
}

console.log('name' in student) // true
console.log('gender' in student) // false

注意事项：

• in操作符判断的是属性名，不是属性值；
• 如果一个属性存在于对象中，无论它的值是什么，in操作符都会返回true；
• 为了避免误判，最好使用对象的.hasOwnProperty()方法判断。

方案二：hasOwnProperty()方法

使用对象的hasOwnProperty()方法判断对象是否存在某个属性。

语法：

对象.hasOwnProperty(属性名)

示例：

const student = {
  name: 'Tom',
  age: 20
}

console.log(student.hasOwnProperty('name')) // true
console.log(student.hasOwnProperty('gender')) // false

注意事项：

• hasOwnProperty()方法只判断对象自身是否拥有该属性，不会从原型链中查找；
• 由于JavaScript中自带的对象都是Object的实例，所以如果属性名和Object的原型对象中的属性名相同，hasOwnProperty()方法会返回false，如toString()、valueOf()。

方案三：undefined判断

判断对象某个属性的值是否为undefined。

语法：

typeof 对象.属性名 === 'undefined'

示例：

const student = {
  name: 'Tom',
  age: 20
}

console.log(typeof student.gender === 'undefined') // true
console.log(typeof student.age === 'undefined') // false

注意事项：

• 该方法只适用于判断属性是否为undefined，无法判断属性是否存在且不为undefined。

方案四：null判断

判断对象某个属性的值是否为null。

语法：

对象.属性名 === null

示例：

const student = {
  name: 'Tom',
  age: 20,
  gender: null
}

console.log(student.gender === null) // true
console.log(student.age === null) // false

注意事项：

• 该方法只适用于判断属性是否为null，无法判断属性是否存在且不为null。

方案五：try-catch语句

使用try-catch语句判断对象是否存在某个属性。

语法：

try {
  对象.属性名
  // 如果以上语句执行失败，会跳到catch语句
} catch(e) {
  // 如果以上语句执行失败，会进入这个catch语句
}

示例：

const student = {
  name: 'Tom',
  age: 20
}

try {
  if (student.gender) {
    console.log(true)
  }
} catch(e) {
  console.log(false)
}

注意事项：

• 使用try-catch语句的代价比其他方法要高，如果在一个循环中运行，会大量消耗CPU资源。